VIDEO LESSON

HTMLのsectionタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 7:50動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04HTMLタグ編の二十九本目は、セクションタグです。
0:08セクションは、ページの内容を話題ごとに区切るためのタグです。
0:12たとえば学習会のページなら、開催日程、参加方法、よくある質問、といった具合に、
0:17一つの話題を一つのまとまりとして囲みます。
0:21そして、そのまとまりには見出しを付けるのが基本です。
0:25今回はセクションの役割、ディブとの違い、ほかの区切りタグとの使い分けまで、
0:29初心者向けに順番に解説します。
0:33ページの骨組みを作るうえで毎日使うタグなので、ここでしっかり押さえておきましょう。
0:40セクションが向いているのは、話題が切り替わる場所です。
0:44お店のページなら営業時間、メニュー、アクセス。
0:48商品ページなら特徴、仕様、注意事項。
0:51このように、読み手が話題の切り替わりを感じるところで区切ると、ページ全体がぐっと読みやすくなります。
0:59ポイントは、見出しとその説明を一組にすることです。
1:03見出しを付けられないまとまりは、そもそも一つの話題として独立していないかもしれません。
1:10また、長いページではセクションごとに区切ることで、目次から目的の場所へ移動する案内も作りやすくなります。
1:18区切りは見た目の飾りではなく、読み手への道しるべだと考えてください。
1:24基本の形を見てみましょう。
1:26セクションには開始タグと終了タグがあり、その内側の最初に見出しを置きます。
1:31例ではエイチツーで開催日程という見出しを示し、続けて段落を二つ置いています。
1:37この見出しが、そのまとまり全体のテーマを表します。
1:41見出しのレベルは、ページ全体の階層に合わせて選んでください。
1:46大きな区切りならエイチツー、その中をさらに分けるならエイチスリー、という具合です。
1:52セクションは入れ子にもできます。
1:54外側の大きな話題の中に、小さな話題を内側のセクションとして置く形です。
2:00まずは見出しプラス本文、という最小の形を手で写して覚えましょう。
2:05記事の活用事例を読み解きます。
2:07この例では、見出しのエイチツーにアイディーを付け、セクション側のアリア、
2:12ラベルドバイ属性で、そのアイディーを参照しています。
2:17こうすると、セクションは開催日程という名前を持った領域として、支援技術に伝わります。
2:24音声読み上げを使う方は、名前のある領域を目印にページ内を移動できるようになります。
2:30ただし、すべてのセクションに機械的に名前を付ける必要はありません。
2:35ページ内移動の目印として役立つ、大きな区切りに絞って使うのが現実的です。
2:41書いたらブラウザーで開き、見出しと本文が一組に見えるか確認してみてください。
2:47よく迷うのが、ディブとの違いです。
2:49判断の基準は、意味があるかどうかです。
2:52そのまとまりに名前を付けられる、つまり見出しを付けられるならセクション。
2:58背景色を付ける、横並びに配置する、といった見た目や都合だけの箱ならディブが適切です。
3:04記事でも、装飾だけの箱ならディブを使う、とはっきり示されています。
3:09セクションを何重にも重ねて見た目を整えるのは、意味のない区切りを増やすだけで、
3:13読み上げの案内もかえって分かりにくくなります。
3:18逆に、話題の区切りなのに全部ディブで作ると、文書の構造が機械に伝わりません。
3:24迷ったら、見出しを付けたいかどうかで判断してみてください。
3:28似た区切りタグとの使い分けも整理しましょう。
3:32アーティクルは、それだけを取り出しても独立して読める内容に使います。
3:37ブログの一記事やニュース一件が代表例です。
3:40アサイドは、補足や関連リンクなど、本文の流れから少し脇へ置く内容です。
3:46ナブは、サイト内の主要なリンクの集まりを囲みます。
3:50それに対してセクションは、独立まではしないけれど、話題ごとに分けたいときの汎用的な区切りです。
3:58たとえばアーティクルの中を、概要、本文、まとめとセクションで分ける、といった組み合わせもよくあります。
4:06タグの名前ではなく、内容の役割から選ぶ習慣を付けましょう。
4:11属性を確認します。
4:12セクションには、専用の必須属性はありません。
4:15必要に応じて、どの要素でも使えるグローバル属性を使います。
4:20代表はアイディーとクラスです。
4:22アイディーは文書の中で一意な識別子で、目次からそのセクションへ飛ぶページ内リンクの目印や、
4:27ジャバスクリプトからの参照に使えます。
4:32クラスは、シーエスエスで複数のセクションをまとめて選ぶときに使います。
4:38ただし注意点として、クラス名で見た目を指定しても、要素の意味自体は変わりません。
4:44また、データ属性に独自の値を保持することもできますが、秘密情報を置く場所ではないことも覚えておいてください。
4:52セクションで最も大切なのは見出しです。
4:56見出しのないセクションは、何のまとまりなのかが読み手にも機械にも伝わりません。
5:02デザイン上、見出しを画面に見せたくない場合でも、シーエスエスで視覚的に隠す方法を検討し、
5:08文書からは消さないようにしましょう。
5:13また、見出しレベルの階層も大切です。
5:16ページの主題がエイチワン、その下のセクションがエイチツー、内側のセクションがエイチスリー、
5:24と順番に深くしていくと、見出しだけを拾って目次を作れる、整った文書になります。
5:31レベルの数字を、文字の大きさを変える目的だけで選ばないことも、よくある注意点です。
5:38大きさはシーエスエスで調整してください。
5:42ブラウザー互換性は心配いりません。
5:44記事が参照するエムディーエヌの記録では、セクション要素本体は、クロームはバージョン五以降、
5:50エッジは十二以降、ファイアフォックスは四以降、サファリは五以降で対応しています。
5:56いずれもかなり古いバージョンから使えているので、現在の環境ではそのまま安心して利用できます。
6:03ただし、これは要素本体の対応です。
6:05新しい属性や機能を組み合わせる場合は、そちら側の対応状況を別に確認してください。
6:11実機での確認も大切です。
6:13スマートフォンのブラウザーで、区切りや見出しの表示が崩れていないか、一度は自分の目で確かめる習慣を付けましょう。
6:21実装前後のチェックポイントをまとめます。
6:24まず、各セクションが本当に話題の区切りになっているか、タグ名ではなく内容の意味から判断してください。
6:31次に、入れ子が深くなりすぎていないかも確認します。
6:35区切りが細かすぎると、かえって構造が読み取りにくくなります。
6:40三つ目は表示の確認です。
6:42三百二十ピクセル程度の狭い画面や、文字を拡大した状態でも、見出しや本文が欠けたり重なったりしないかを見てください。
6:51最後に、開発者ツールでソースと実際の構造が食い違っていないか確かめると安心です。
6:57閉じタグの書き忘れは、ブラウザーが自動で補正して構造を崩す原因になります。
7:03最後に練習とまとめです。
7:05セクションは、見出しのある主題ごとのまとまりを示すタグでした。
7:10大切なポイントは三つです。
7:12一つ目は、見出しと内容を必ず一組にすること。
7:15二つ目は、装飾だけの箱にはディブを使い、意味のある区切りにだけセクションを使うこと。
7:22三つ目は、アーティクルやアサイド、ナブとは、内容の役割で使い分けることです。
7:28練習として、自己紹介や学習会のお知らせなど、身近なページを三つの話題に分け、
7:33それぞれを見出し付きのセクションで囲んでみてください。
7:39小さく試して構造を確認する積み重ねが、読みやすいページ作りへの近道です。
7:44お疲れさまでした。
7:46次回もエイチティーエムエルタグの解説を続けましょう。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

sectionタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。見出しのある主題別のまとまり。装飾だけの箱なら div を使います。

解説記事・サンプルコードを読む：HTMLのsectionタグとは？属性・使い方・ブラウザー互換性と活用例 →