HTMLのセクション要素の使い方への理解が曖昧だったので復習です。
恥ずかしながらブロック要素にCSSを当てる際は今までは脳死状態でdivで囲っていました。
セクション要素(sectionやarticle等)にCSSを適応して良いのかなかなか判断できなかったので調べました。
結論
セクション要素(sectionやarticle等)にCSSを適応してもOK。ただし以下のような縛りがある。
- アウトラインを意識したマークアップを重視するため
divよりもセクション要素を優先 - セクション要素で囲めない要素の場合のみ
divを使う - セクション要素にCSSを適応する場合は
classやidを付与してそれに対して指定する - レイアウト目的(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ってプログラミングの立ち位置的にすごい舐められがちだけど個人的には一番難しいんじゃないかと思う。
