WEBVTT

1
00:00:00.000 --> 00:00:00.771
こんにちは。

2
00:00:00.771 --> 00:00:03.471
エイチティーエムエルリファレンス解説です。

3
00:00:03.471 --> 00:00:07.456
エイチティーエムエルタグ編の百九本目は、アーティクルタグです。

4
00:00:07.456 --> 00:00:12.083
アーティクルは、単独でも意味が通じる、独立した内容を示すための要素です。

5
00:00:12.083 --> 00:00:16.968
たとえばブログの記事一本、お知らせ一本、利用者の投稿などが、その代表例です。

6
00:00:16.968 --> 00:00:20.567
その部分だけを切り取って、別のページに載せたり、配信したりしても話が成り立つかどうかが、

7
00:00:20.567 --> 00:00:24.166
判断の出発点になります。

8
00:00:24.166 --> 00:00:28.151
今回は、その独立性という考え方、セクションとの違い、使い方や入れ子、コード例、

9
00:00:28.151 --> 00:00:32.136
互換性、よくある間違いまで、順番に確認します。

10
00:00:32.136 --> 00:00:36.892
ブログのトップページに並ぶ要約も、元をたどれば一本一本が独立した記事です。

11
00:00:36.892 --> 00:00:39.867
アーティクルは、どんな場面で使うのでしょうか。

12
00:00:39.867 --> 00:00:41.420
キーワードは独立性です。

13
00:00:41.420 --> 00:00:48.146
一本のブログ記事、ニュース記事、お知らせ、フォーラムへの投稿など、それだけで完結する内容が向いています。

14
00:00:48.146 --> 00:00:53.968
記事一覧のページでも、各項目がそれぞれ独立した記事なら、一つ一つをアーティクルで囲めます。

15
00:00:53.968 --> 00:00:57.978
逆に、独立しない単なる説明の一節、たとえば一つの長い記事の中の話題の区切りなら、

16
00:00:57.978 --> 00:01:01.988
アーティクルではなくセクションを検討します。

17
00:01:01.988 --> 00:01:08.456
見た目がカードのようだから、箱だからという理由ではなく、中身が単独で成り立つかで選ぶことが大切です。

18
00:01:08.456 --> 00:01:13.760
商品紹介のカードやレビューの投稿なども、それだけで内容が完結すれば候補になります。

19
00:01:13.760 --> 00:01:17.326
よく混同されるセクションとの違いを整理します。

20
00:01:17.326 --> 00:01:21.048
セクションは、見出しのある主題別のまとまりです。

21
00:01:21.048 --> 00:01:26.785
長いページを、概要、使い方、注意点のように話題ごとに分けるために使います。

22
00:01:26.785 --> 00:01:33.453
一方アーティクルは、そのまとまり自体が独立した作品や投稿として成り立つ場合に使います。

23
00:01:33.453 --> 00:01:42.757
判断に迷ったら、その部分だけを取り出して、タイトルと一緒に別の場所へ持っていっても意味が通じるかを自問してみてください。

24
00:01:42.757 --> 00:01:46.789
通じるならアーティクル、親の文書の中で初めて意味を持つ一節ならセクション、

25
00:01:46.789 --> 00:01:50.820
という分け方が目安になります。

26
00:01:50.820 --> 00:01:56.868
名前が似ていても役割は違うので、最初にこの区別を押さえておくと迷いが減ります。

27
00:01:56.868 --> 00:01:58.975
基本の書き方を確認します。

28
00:01:58.975 --> 00:02:03.674
アーティクルは、開始タグと終了タグを明示して使う要素です。

29
00:02:03.674 --> 00:02:06.591
終了タグを省略することはできません。

30
00:02:06.591 --> 00:02:09.995
中には、その記事の見出しと本文を入れます。

31
00:02:09.995 --> 00:02:15.829
見出しは、その記事が何について書かれたものかを伝える大切な手がかりです。

32
00:02:15.829 --> 00:02:19.880
記事の中で使う見出しのレベルは固定ではありません。

33
00:02:19.880 --> 00:02:24.823
一覧ページに並べるならエイチツー、ページの主題そのものならエイチワンというように、

34
00:02:24.823 --> 00:02:29.766
配置先の見出し階層に合わせて調整します。

35
00:02:29.766 --> 00:02:35.438
まずはアーティクルで囲み、見出しを付けるという基本形を覚えてください。

36
00:02:35.438 --> 00:02:41.920
この形は、ブログでもお知らせでも共通する、アーティクルの最も基本的な骨組みです。

37
00:02:41.920 --> 00:02:45.067
記事の活用事例をもとに、コード例を見ます。

38
00:02:45.067 --> 00:02:49.413
例では、十月の学習会という見出しと、エイチティーエムエルの基本を体験しますという本文を、

39
00:02:49.413 --> 00:02:53.759
アーティクルで囲んでいます。

40
00:02:53.759 --> 00:02:58.705
これだけで、この一塊が独立したお知らせ記事であることが伝わります。

41
00:02:58.705 --> 00:03:03.800
末尾にはフッターを置き、投稿者が運営チームであることを示しています。

42
00:03:03.800 --> 00:03:08.896
フッターは記事の中にも置け、その記事についての補足情報を担当します。

43
00:03:08.896 --> 00:03:18.637
練習では、入門で作ったファイルにこの例を置き、保存して再読み込みし、開発者ツールで構造が意図通りになっているか確認してみましょう。

44
00:03:18.637 --> 00:03:24.332
日付や投稿者を添えると、誰がいつ書いた記事かも合わせて伝わるようになります。

45
00:03:24.332 --> 00:03:26.590
入れ子と組み合わせを確認します。

46
00:03:26.590 --> 00:03:31.389
アーティクルの中をさらに分けたいときは、内側にセクションを置けます。

47
00:03:31.389 --> 00:03:38.304
たとえば旅行記という一本の記事の中を、一日目、二日目という話題ごとにセクションで分ける書き方です。

48
00:03:38.304 --> 00:03:42.679
逆に、アーティクルの内側に別のアーティクルを置く例もあります。

49
00:03:42.679 --> 00:03:47.477
記事へのコメント一つ一つを、内側のアーティクルとして扱うケースです。

50
00:03:47.477 --> 00:03:52.982
この場合、内側の内容は外側の記事と関連する独立した投稿、という関係になります。

51
00:03:52.982 --> 00:03:58.909
またヘッダーやフッター、アサイドも記事ごとに置け、記事単位で構造を完結させられます。

52
00:03:58.909 --> 00:04:04.272
入れ子の深さは最小限にとどめ、どの記事に属するのかが追える構造にしましょう。

53
00:04:04.272 --> 00:04:06.793
一覧ページでの使い方も見ておきます。

54
00:04:06.793 --> 00:04:10.293
メイン要素の中に、アーティクルを複数並べる形です。

55
00:04:10.293 --> 00:04:15.474
各アーティクルにはそれぞれ見出しを付け、中には要約や投稿日などを置きます。

56
00:04:15.474 --> 00:04:21.916
読む側や読み上げソフトにとって、各項目が独立した記事の集まりであることが構造から伝わります。

57
00:04:21.916 --> 00:04:27.377
ここでも、独立していない項目まで無理にアーティクルにしないことがポイントです。

58
00:04:27.377 --> 00:04:31.158
目次の一行や、単なるリンクの並びは記事ではありません。

59
00:04:31.158 --> 00:04:34.939
その場合はリストなど、内容に合った要素を選びましょう。

60
00:04:34.939 --> 00:04:40.540
タイトルだけを並べた目次とは違い、各項目に中身がある点がアーティクルの条件です。

61
00:04:40.540 --> 00:04:41.937
属性を確認します。

62
00:04:41.937 --> 00:04:46.126
アーティクルには、この要素専用の必須属性はありません。

63
00:04:46.126 --> 00:04:50.782
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

64
00:04:50.782 --> 00:04:57.299
アイディーは文書内で一意な識別子で、ページ内リンクやスクリプトからの参照に使います。

65
00:04:57.299 --> 00:05:03.662
クラスは、シーエスエスやジャバスクリプトで複数の要素をまとめて選ぶための名前です。

66
00:05:03.662 --> 00:05:08.317
ラングは内容の言語を示し、日本語ならジェーエーを指定します。

67
00:05:08.317 --> 00:05:15.456
そのほか、アプリ独自の値を保持するデータ属性もありますが、秘密情報を置く場所ではありません。

68
00:05:15.456 --> 00:05:19.335
子要素に指定する属性と混同しないようにしましょう。

69
00:05:19.335 --> 00:05:25.232
属性は必要になったときに足すものなので、最初から全部付ける必要はありません。

70
00:05:25.232 --> 00:05:28.201
見出しとアクセシビリティについてです。

71
00:05:28.201 --> 00:05:34.764
アーティクルには、原則として見出しを付け、その記事の主題が一目で分かるようにします。

72
00:05:34.764 --> 00:05:41.015
見出しがあることで、読み上げソフトの利用者が記事の区切りをたどりやすくなります。

73
00:05:41.015 --> 00:05:47.579
投稿日や更新日を示すなら、タイム要素で日付を機械にも読める形で添える方法もあります。

74
00:05:47.579 --> 00:05:52.267
実装の前後には、三百二十ピクセル程度の狭い画面幅や、文字を拡大した状態でも、

75
00:05:52.267 --> 00:05:56.955
内容や操作部分が欠けないかを確認しましょう。

76
00:05:56.955 --> 00:06:03.674
リンクを含む場合は、キーボードのタブキーなどでたどれるかも合わせて見ておくと安心です。

77
00:06:03.674 --> 00:06:09.300
見出しの階層を飛ばさないことも、構造を正しく伝えるための大切な配慮です。

78
00:06:09.300 --> 00:06:11.526
ブラウザー互換性を確認します。

79
00:06:11.526 --> 00:06:17.684
記事が紹介するエムディーエヌのデータでは、アーティクル要素本体は、クロームが五以降、

80
00:06:17.684 --> 00:06:23.842
エッジが十二以降、ファイアフォックスが四以降、サファリが五以降から対応しています。

81
00:06:23.842 --> 00:06:30.222
エイチティーエムエルファイブで導入された要素の中でも、古くから安定して使える部類です。

82
00:06:30.222 --> 00:06:34.080
現在の主要ブラウザーであれば、まず問題なく使えます。

83
00:06:34.080 --> 00:06:39.274
ただし、要素本体の対応と、新しい属性やエーピーアイの対応は別ものです。

84
00:06:39.274 --> 00:06:46.990
新しい機能を組み合わせるときは、それぞれの対応状況を確認し、モバイル版も含めて実機で試しておきましょう。

85
00:06:46.990 --> 00:06:52.480
導入時期が古い分、古いブラウザーを含む環境でも安心して採用できる要素です。

86
00:06:52.480 --> 00:06:55.920
まとめとして、よくある間違いを三つ挙げます。

87
00:06:55.920 --> 00:07:01.392
一つ目は、区切りというだけで何でもアーティクルで囲んでしまうことです。

88
00:07:01.392 --> 00:07:06.238
意味のない箱ならディブ、主題の区切りならセクションが適切です。

89
00:07:06.238 --> 00:07:10.928
二つ目は、独立していない一節までアーティクルにすることです。

90
00:07:10.928 --> 00:07:15.306
単独で読めない内容は、親の記事の一部として扱いましょう。

91
00:07:15.306 --> 00:07:18.433
三つ目は、見出しを付けずに使うことです。

92
00:07:18.433 --> 00:07:22.341
記事の主題を示す見出しはできるだけ添えてください。

93
00:07:22.341 --> 00:07:27.813
アーティクルは、単独でも意味が通じる自己完結した内容のための要素です。

94
00:07:27.813 --> 00:07:30.628
独立性を合言葉に使ってみてください。

95
00:07:30.628 --> 00:07:36.256
迷ったときは、切り取って単独で読めるかという最初の問いに戻ってください。

96
00:07:36.256 --> 00:07:38.132
これで解説を終わります。