WEBVTT

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

2
00:00:01.013 --> 00:00:04.220
エイチティーエムエル入門、第二回です。

3
00:00:04.220 --> 00:00:06.752
今回のテーマは、文書構造です。

4
00:00:06.752 --> 00:00:13.335
前回作った文章を、架空の学習会、まなびのアトリエの紹介ページへ育てていきます。

5
00:00:13.335 --> 00:00:21.268
今回のゴールは、ページのどこに、何の情報があるのかを、エイチティーエムエルで表現することです。

6
00:00:21.268 --> 00:00:26.501
見出しの階層、意味のある領域、そしてページ内リンクを扱います。

7
00:00:26.501 --> 00:00:30.383
見た目は、まだブラウザーの標準表示のままです。

8
00:00:30.383 --> 00:00:35.615
色や配置は後の回で整えるので、今回は構造だけに集中しましょう。

9
00:00:35.615 --> 00:00:41.692
元になる記事は、エスイーの部屋の、エイチティーエムエルの文書構造、です。

10
00:00:41.692 --> 00:00:45.563
構造を作る前に、まず情報の順番を決めます。

11
00:00:45.563 --> 00:00:51.093
今回のページは、学習会で何を学べるかを伝える紹介サイトです。

12
00:00:51.093 --> 00:00:55.978
並びは上から、サイト名とナビゲーション、ページの主題、学習内容、運営の紹介、

13
00:00:55.978 --> 00:01:00.863
補足情報、という順序にします。

14
00:01:00.863 --> 00:01:07.683
ポイントは、コードを書き始める前に、文章として順序を決めてしまうことです。

15
00:01:07.683 --> 00:01:15.609
シーエスエスで見た目を並べ替える前に、文章の順番そのものが読みやすいかを確認できます。

16
00:01:15.609 --> 00:01:20.955
読み手が上から読んで、自然に理解できる順番になっているか。

17
00:01:20.955 --> 00:01:23.720
これが、構造作りの出発点です。

18
00:01:23.720 --> 00:01:26.451
次に、見出しで話題を整理します。

19
00:01:26.451 --> 00:01:31.969
このページでは、エイチ ワンをページ全体の主題に、エイチ ツーを、学べること、

20
00:01:31.969 --> 00:01:37.487
などの章に、エイチ スリーを、エイチティーエムエル、シーエスエス、ジャバスクリプトという、

21
00:01:37.487 --> 00:01:43.006
各章の中の項目に使います。

22
00:01:43.006 --> 00:01:45.054
ここで大切な注意点です。

23
00:01:45.054 --> 00:01:50.857
文字を小さくしたい、という理由で見出しのレベルを変えないでください。

24
00:01:50.857 --> 00:01:54.782
見た目の大きさは、シーエスエスで調整できます。

25
00:01:54.782 --> 00:01:58.537
見出しのレベルは、情報の階層を表すものです。

26
00:01:58.537 --> 00:02:00.244
確認方法は簡単です。

27
00:02:00.244 --> 00:02:05.022
見出しだけを順番に読んで、ページの概要が分かるかどうか。

28
00:02:05.022 --> 00:02:09.801
エイチ ツーの下に、突然エイチ フォーを置くような、階層の飛ばし方をせず、

29
00:02:09.801 --> 00:02:14.580
情報の階層に合わせて組み立てましょう。

30
00:02:14.580 --> 00:02:17.448
次に、ページの領域に意味を付けます。

31
00:02:17.448 --> 00:02:19.678
ヘッダーには導入を置きます。

32
00:02:19.678 --> 00:02:21.590
サイト名などが入ります。

33
00:02:21.590 --> 00:02:24.776
ナブには、主な移動用のリンクを置きます。

34
00:02:24.776 --> 00:02:28.599
メインには、そのページの中心的な内容を置きます。

35
00:02:28.599 --> 00:02:31.626
この例では、メインは一つだけにします。

36
00:02:31.626 --> 00:02:34.335
フッターには、補足情報を置きます。

37
00:02:34.335 --> 00:02:35.928
そして、ディブです。

38
00:02:35.928 --> 00:02:39.751
ディブは、用途を限定しない、汎用のまとまりです。

39
00:02:39.751 --> 00:02:45.646
意味のある要素が適していない場合や、後でレイアウトを整えるときに使います。

40
00:02:45.646 --> 00:02:51.700
なんでもディブにするのではなく、意味のある要素があるなら、そちらを優先する。

41
00:02:51.700 --> 00:02:58.072
これが、セマンティック、つまり意味のある、エイチティーエムエルという考え方です。

42
00:02:58.072 --> 00:03:02.041
セクションとアーティクルの使い分けも覚えましょう。

43
00:03:02.041 --> 00:03:06.328
セクションは、見出しを持つ、話題のまとまりに使います。

44
00:03:06.328 --> 00:03:12.996
アーティクルは、それ自体を取り出しても内容が理解できる、独立した項目に向いています。

45
00:03:12.996 --> 00:03:20.459
今回のページでは、学べることの一つ一つ、題名と説明を持つカードを、アーティクルとして扱います。

46
00:03:20.459 --> 00:03:23.952
迷ったときの判断基準は、その部分だけ切り取って、別の場所に置いても意味が通じるか、

47
00:03:23.952 --> 00:03:27.445
です。

48
00:03:27.445 --> 00:03:33.795
逆に、単に枠を描きたいだけなら、無理にアーティクルにせず、ディブでも構いません。

49
00:03:33.795 --> 00:03:36.812
意味に合った要素を選ぶことが大切です。

50
00:03:36.812 --> 00:03:40.186
次は、リンクでページ内を移動する方法です。

51
00:03:40.186 --> 00:03:42.917
仕組みは、行き先と目印のペアです。

52
00:03:42.917 --> 00:03:48.299
エイチレフ イコール シャープ レッスンズ、と書いたリンクは、同じ文書内の、

53
00:03:48.299 --> 00:03:53.682
アイディー イコール レッスンズ、を持つ要素へ移動します。

54
00:03:53.682 --> 00:03:59.626
シャープの後ろの文字列と、アイディーの値が一致していることがポイントです。

55
00:03:59.626 --> 00:04:02.839
アイディーは、文書の中で重複させません。

56
00:04:02.839 --> 00:04:06.856
重複すると、どこへ移動すべきか分からなくなります。

57
00:04:06.856 --> 00:04:09.266
作ったら、必ず確認しましょう。

58
00:04:09.266 --> 00:04:13.122
リンクをクリックしたときに目的の章へ移動するか。

59
00:04:13.122 --> 00:04:17.781
そして、タブキーでリンクを選んで、エンターキーでも動くか。

60
00:04:17.781 --> 00:04:22.440
マウスだけでなく、キーボードでも操作できることが大切です。

61
00:04:22.440 --> 00:04:25.524
リンクの文字にも気を配りましょう。

62
00:04:25.524 --> 00:04:31.147
こちら、という文字だけでは、押した先に何があるか分かりません。

63
00:04:31.147 --> 00:04:35.864
学べること、のように、行き先が分かる文字を使います。

64
00:04:35.864 --> 00:04:40.762
これは、リンクだけを拾い読みする人にとっても親切です。

65
00:04:40.762 --> 00:04:46.294
別ページへのリンクは、エイチレフ イコール ドット スラッシュ アバウト ドット エイチティーエムエル、

66
00:04:46.294 --> 00:04:51.827
のように書けます。

67
00:04:51.827 --> 00:04:58.539
ただし、まだそのファイルが存在しない場合は、リンク切れになってしまいます。

68
00:04:58.539 --> 00:05:07.972
存在しないページを仮のリンクとして残さず、今回は、実在するページ内の章へ移動させるリンクだけを使います。

69
00:05:07.972 --> 00:05:11.259
リンクとボタンの混同も、よくあるつまずきです。

70
00:05:11.259 --> 00:05:12.975
使い分けはシンプルです。

71
00:05:12.975 --> 00:05:16.548
別の場所へ移動するときは、エー、リンクを使います。

72
00:05:16.548 --> 00:05:21.550
メニューを開くなど、現在の画面で何か操作するときは、ボタンを使います。

73
00:05:21.550 --> 00:05:26.553
ディブにクリック処理を付けただけでも、見た目上は押せるものが作れます。

74
00:05:26.553 --> 00:05:33.271
しかし、その場合は、キーボード操作や、ボタンとしての役割を、自分で補う必要が生じてしまいます。

75
00:05:33.271 --> 00:05:39.560
目的に合うエイチティーエムエル要素を選べば、ブラウザー標準の操作をそのまま利用できます。

76
00:05:39.560 --> 00:05:42.704
要素選びは、操作のしやすさに直結するのです。

77
00:05:42.704 --> 00:05:45.806
では、完成コードの骨組みを見てみましょう。

78
00:05:45.806 --> 00:05:51.863
前回のインデックス ドット エイチティーエムエル全体を、今回の内容へ置き換えます。

79
00:05:51.863 --> 00:05:55.556
画面に出ているのは、文章を短く省略した骨組みです。

80
00:05:55.556 --> 00:05:59.692
ボディの先頭には、本文へスキップというリンクがあります。

81
00:05:59.692 --> 00:06:03.386
その次にヘッダーがあり、サイト名とナブが入ります。

82
00:06:03.386 --> 00:06:05.897
メインの中には、セクションが三つ。

83
00:06:05.897 --> 00:06:08.408
トップ、レッスンズ、アバウトです。

84
00:06:08.408 --> 00:06:11.954
レッスンズの中には、アーティクルが三つ並びます。

85
00:06:11.954 --> 00:06:13.431
最後にフッターです。

86
00:06:13.431 --> 00:06:18.749
開始タグと終了タグの対応を追いながら読むと、入れ子の構造が見えてきます。

87
00:06:18.749 --> 00:06:25.692
タイトルは、まなびのアトリエ、学べること、のように、ページの内容が分かる形に更新されています。

88
00:06:25.692 --> 00:06:28.902
ブラウザーで開いて、確認するポイントです。

89
00:06:28.902 --> 00:06:34.406
一つ目、ページ内リンクをクリックすると、対応する章へスクロールすること。

90
00:06:34.406 --> 00:06:40.521
二つ目、シーエスエスがなくても、サイト名、主題、章、項目の順序が伝わることです。

91
00:06:40.521 --> 00:06:43.426
順序が伝われば、今回の目標は達成です。

92
00:06:43.426 --> 00:06:46.942
最初の、本文へスキップ、についても説明します。

93
00:06:46.942 --> 00:06:53.363
これは、繰り返し現れるナビゲーションを飛ばして、本文へ直接移動するためのリンクです。

94
00:06:53.363 --> 00:06:59.478
キーボードで操作する人にとって、毎回ナビゲーションを通るのは負担になるためです。

95
00:06:59.478 --> 00:07:05.440
このリンクに、フォーカス時に表示するスタイルを付ける作業は、後の回で扱います。

96
00:07:05.440 --> 00:07:07.406
最後に、練習と点検です。

97
00:07:07.406 --> 00:07:13.305
練習は、私たちについて、の部分に、開催方針などの段落を追加することです。

98
00:07:13.305 --> 00:07:19.531
そのとき、並列の方針はユーエル、順序のある手順はオーエルで表現してください。

99
00:07:19.531 --> 00:07:24.283
文字として記号を打つより、リストとしての意味が伝わります。

100
00:07:24.283 --> 00:07:27.068
よくある失敗も覚えておきましょう。

101
00:07:27.068 --> 00:07:30.017
ピーの中に大きな章全体を入れること。

102
00:07:30.017 --> 00:07:32.967
リンクの中に別のリンクを入れること。

103
00:07:32.967 --> 00:07:35.097
この二つは避けてください。

104
00:07:35.097 --> 00:07:43.289
ブラウザーがエイチティーエムエルを自動で補正すると、書いたソースと実際のドムが異なることがあります。

105
00:07:43.289 --> 00:07:48.860
原因を探すときは、開発者ツールのエレメンツで入れ子を確認しましょう。

106
00:07:48.860 --> 00:07:49.843
まとめです。

107
00:07:49.843 --> 00:07:56.889
今日は、見出しの階層、意味のある領域、ページ内リンク、そして要素の選び方を学びました。

108
00:07:56.889 --> 00:08:00.657
次回は、画像、パス、入力フォームがテーマです。

109
00:08:00.657 --> 00:08:02.132
お疲れさまでした。