SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

HTMLの文書構造：見出し・リンク・セマンティック要素でページを組み立てるの解説動画

再生時間 8:02動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01エイチティーエムエル入門、第二回です。
  3. 0:04今回のテーマは、文書構造です。
  4. 0:06前回作った文章を、架空の学習会、まなびのアトリエの紹介ページへ育てていきます。
  5. 0:13今回のゴールは、ページのどこに、何の情報があるのかを、エイチティーエムエルで表現することです。
  6. 0:21見出しの階層、意味のある領域、そしてページ内リンクを扱います。
  7. 0:26見た目は、まだブラウザーの標準表示のままです。
  8. 0:30色や配置は後の回で整えるので、今回は構造だけに集中しましょう。
  9. 0:35元になる記事は、エスイーの部屋の、エイチティーエムエルの文書構造、です。
  10. 0:41構造を作る前に、まず情報の順番を決めます。
  11. 0:45今回のページは、学習会で何を学べるかを伝える紹介サイトです。
  12. 0:51並びは上から、サイト名とナビゲーション、ページの主題、学習内容、運営の紹介、
  13. 0:55補足情報、という順序にします。
  14. 1:00ポイントは、コードを書き始める前に、文章として順序を決めてしまうことです。
  15. 1:07シーエスエスで見た目を並べ替える前に、文章の順番そのものが読みやすいかを確認できます。
  16. 1:15読み手が上から読んで、自然に理解できる順番になっているか。
  17. 1:20これが、構造作りの出発点です。
  18. 1:23次に、見出しで話題を整理します。
  19. 1:26このページでは、エイチ ワンをページ全体の主題に、エイチ ツーを、学べること、
  20. 1:31などの章に、エイチ スリーを、エイチティーエムエル、シーエスエス、ジャバスクリプトという、
  21. 1:37各章の中の項目に使います。
  22. 1:43ここで大切な注意点です。
  23. 1:45文字を小さくしたい、という理由で見出しのレベルを変えないでください。
  24. 1:50見た目の大きさは、シーエスエスで調整できます。
  25. 1:54見出しのレベルは、情報の階層を表すものです。
  26. 1:58確認方法は簡単です。
  27. 2:00見出しだけを順番に読んで、ページの概要が分かるかどうか。
  28. 2:05エイチ ツーの下に、突然エイチ フォーを置くような、階層の飛ばし方をせず、
  29. 2:09情報の階層に合わせて組み立てましょう。
  30. 2:14次に、ページの領域に意味を付けます。
  31. 2:17ヘッダーには導入を置きます。
  32. 2:19サイト名などが入ります。
  33. 2:21ナブには、主な移動用のリンクを置きます。
  34. 2:24メインには、そのページの中心的な内容を置きます。
  35. 2:28この例では、メインは一つだけにします。
  36. 2:31フッターには、補足情報を置きます。
  37. 2:34そして、ディブです。
  38. 2:35ディブは、用途を限定しない、汎用のまとまりです。
  39. 2:39意味のある要素が適していない場合や、後でレイアウトを整えるときに使います。
  40. 2:45なんでもディブにするのではなく、意味のある要素があるなら、そちらを優先する。
  41. 2:51これが、セマンティック、つまり意味のある、エイチティーエムエルという考え方です。
  42. 2:58セクションとアーティクルの使い分けも覚えましょう。
  43. 3:02セクションは、見出しを持つ、話題のまとまりに使います。
  44. 3:06アーティクルは、それ自体を取り出しても内容が理解できる、独立した項目に向いています。
  45. 3:12今回のページでは、学べることの一つ一つ、題名と説明を持つカードを、アーティクルとして扱います。
  46. 3:20迷ったときの判断基準は、その部分だけ切り取って、別の場所に置いても意味が通じるか、
  47. 3:23です。
  48. 3:27逆に、単に枠を描きたいだけなら、無理にアーティクルにせず、ディブでも構いません。
  49. 3:33意味に合った要素を選ぶことが大切です。
  50. 3:36次は、リンクでページ内を移動する方法です。
  51. 3:40仕組みは、行き先と目印のペアです。
  52. 3:42エイチレフ イコール シャープ レッスンズ、と書いたリンクは、同じ文書内の、
  53. 3:48アイディー イコール レッスンズ、を持つ要素へ移動します。
  54. 3:53シャープの後ろの文字列と、アイディーの値が一致していることがポイントです。
  55. 3:59アイディーは、文書の中で重複させません。
  56. 4:02重複すると、どこへ移動すべきか分からなくなります。
  57. 4:06作ったら、必ず確認しましょう。
  58. 4:09リンクをクリックしたときに目的の章へ移動するか。
  59. 4:13そして、タブキーでリンクを選んで、エンターキーでも動くか。
  60. 4:17マウスだけでなく、キーボードでも操作できることが大切です。
  61. 4:22リンクの文字にも気を配りましょう。
  62. 4:25こちら、という文字だけでは、押した先に何があるか分かりません。
  63. 4:31学べること、のように、行き先が分かる文字を使います。
  64. 4:35これは、リンクだけを拾い読みする人にとっても親切です。
  65. 4:40別ページへのリンクは、エイチレフ イコール ドット スラッシュ アバウト ドット エイチティーエムエル、
  66. 4:46のように書けます。
  67. 4:51ただし、まだそのファイルが存在しない場合は、リンク切れになってしまいます。
  68. 4:58存在しないページを仮のリンクとして残さず、今回は、実在するページ内の章へ移動させるリンクだけを使います。
  69. 5:07リンクとボタンの混同も、よくあるつまずきです。
  70. 5:11使い分けはシンプルです。
  71. 5:12別の場所へ移動するときは、エー、リンクを使います。
  72. 5:16メニューを開くなど、現在の画面で何か操作するときは、ボタンを使います。
  73. 5:21ディブにクリック処理を付けただけでも、見た目上は押せるものが作れます。
  74. 5:26しかし、その場合は、キーボード操作や、ボタンとしての役割を、自分で補う必要が生じてしまいます。
  75. 5:33目的に合うエイチティーエムエル要素を選べば、ブラウザー標準の操作をそのまま利用できます。
  76. 5:39要素選びは、操作のしやすさに直結するのです。
  77. 5:42では、完成コードの骨組みを見てみましょう。
  78. 5:45前回のインデックス ドット エイチティーエムエル全体を、今回の内容へ置き換えます。
  79. 5:51画面に出ているのは、文章を短く省略した骨組みです。
  80. 5:55ボディの先頭には、本文へスキップというリンクがあります。
  81. 5:59その次にヘッダーがあり、サイト名とナブが入ります。
  82. 6:03メインの中には、セクションが三つ。
  83. 6:05トップ、レッスンズ、アバウトです。
  84. 6:08レッスンズの中には、アーティクルが三つ並びます。
  85. 6:11最後にフッターです。
  86. 6:13開始タグと終了タグの対応を追いながら読むと、入れ子の構造が見えてきます。
  87. 6:18タイトルは、まなびのアトリエ、学べること、のように、ページの内容が分かる形に更新されています。
  88. 6:25ブラウザーで開いて、確認するポイントです。
  89. 6:28一つ目、ページ内リンクをクリックすると、対応する章へスクロールすること。
  90. 6:34二つ目、シーエスエスがなくても、サイト名、主題、章、項目の順序が伝わることです。
  91. 6:40順序が伝われば、今回の目標は達成です。
  92. 6:43最初の、本文へスキップ、についても説明します。
  93. 6:46これは、繰り返し現れるナビゲーションを飛ばして、本文へ直接移動するためのリンクです。
  94. 6:53キーボードで操作する人にとって、毎回ナビゲーションを通るのは負担になるためです。
  95. 6:59このリンクに、フォーカス時に表示するスタイルを付ける作業は、後の回で扱います。
  96. 7:05最後に、練習と点検です。
  97. 7:07練習は、私たちについて、の部分に、開催方針などの段落を追加することです。
  98. 7:13そのとき、並列の方針はユーエル、順序のある手順はオーエルで表現してください。
  99. 7:19文字として記号を打つより、リストとしての意味が伝わります。
  100. 7:24よくある失敗も覚えておきましょう。
  101. 7:27ピーの中に大きな章全体を入れること。
  102. 7:30リンクの中に別のリンクを入れること。
  103. 7:32この二つは避けてください。
  104. 7:35ブラウザーがエイチティーエムエルを自動で補正すると、書いたソースと実際のドムが異なることがあります。
  105. 7:43原因を探すときは、開発者ツールのエレメンツで入れ子を確認しましょう。
  106. 7:48まとめです。
  107. 7:49今日は、見出しの階層、意味のある領域、ページ内リンク、そして要素の選び方を学びました。
  108. 7:56次回は、画像、パス、入力フォームがテーマです。
  109. 8:00お疲れさまでした。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

h1〜h3、header・nav・main・footer、sectionとarticleを使い、紹介サイトの構造を作成。ページ内リンクとキーボード操作も確認します。

解説記事・サンプルコードを読む：HTMLの文書構造：見出し・リンク・セマンティック要素でページを組み立てる →