karlley's tech blog

学習メモや記録とか

HTMLのセクション要素にCSSを適応しても良いのか

HTMLのセクション要素の使い方への理解が曖昧だったので復習です。 恥ずかしながらブロック要素にCSSを当てる際は今までは脳死状態でdivで囲っていました。 セクション要素(sectionarticle等)にCSSを適応して良いのかなかなか判断できなかったので調べました。

結論

セクション要素(sectionarticle等)にCSSを適応してもOK。ただし以下のような縛りがある。

  • アウトラインを意識したマークアップを重視するためdivよりもセクション要素を優先
  • セクション要素で囲めない要素の場合のみdivを使う
  • セクション要素にCSSを適応する場合はclassidを付与してそれに対して指定する
  • レイアウト目的(2カラム等)でCSSを適応場合もセクション要素を優先的に使う
    • セクション要素で囲める要素はセクション要素を使う
    • ボタン等のセクション要素で囲めない要素はdivを使う

2カラムレイアウトでのセクション要素の使い方の例

<body>
  <h1>見出し1</h1>
  <p>テキスト</p>

  <!-- セクション要素で囲める2カラムレイアウト -->
  <article class="flexbox">
    <section class="main">
      <h2>小見出し1</h2>
      <p>テキスト</p>
    </section>
    <section class="side">
      <h2>小見出し2</h2>
      <p>テキスト</p>
    </section>
  </article>

  <!-- セクション要素で囲めない2カラムレイアウト -->
  <nav>
    <div class="flexbox">
      <div class="main">
        <a>link_1</a>
      </div>
      <div class="side">
        <a>link_2</a>
      </div>
    </div>
  </nav>

</body>
.flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  flex: 3;
}

.side {
  flex: 1;
}

注意点

  • セクション要素を使ったマークアップの情報は情報量が多くどの情報が正しいのか分からない状態になってしまうので基本的には公式ドキュメントを参照する
  • div を多様するとアウトラインが正しくマークアップされていないことに気付きにくいのでOutlinerでアウトラインを確認する

まとめ

HTMLとCSSってほんと難しい。 アウトラインを意識したマークアップなんて必要ないと思っていた時期もありましたが全部意味があるんだなと理解できたので良い機会になった。 HTMLってプログラミングの立ち位置的にすごい舐められがちだけど個人的には一番難しいんじゃないかと思う。

参照

ゼロからはじめるHTML5でのサイト制作/第4回 HTML5で新しく定義された新要素「section要素」の使い方の基本をまとめよう | デザインってオモシロイ -MdN Design Interactive-

【html5】sectionタグについて

HTML Standard