コンテナの HRML を書く

デザインをコンテナに分割し終わったら、HRML コーディングに入る

コンテナを表現する HTML はシンプルで、パターンが決まっているので簡単

コンテナの HRML はパターン化している

デザインを分割して出来たコンテナは、いずれも以下のような HTML になる

• <div> 要素の子要素に <div> 要素が入る二重構造になっている
• 二重にすることで CSS を書き換えるだけで多くのデザイン、レイアウトに対応出来る柔軟な HTML を作ることができる

コンテナの 2組の <div> 要素を、親、子と呼ふ

親要素、子要素のコンテナ全体をコンテナ HTML セットと呼ぶ

コンテナの親要素には <div> 以外のタグを使うこともある

コンテナの子要素には必ず <div> を使い他のタグは使わない

コンテナの親要素に使われるグループ化タグ

: <header>～</header>

: <footer>～</footer>

: <main>～</main>

: <article>～</article>

: <section>～</section>

: <nav>～</nav>

: <div>～</div>

要素のクラス名の付け方

コンテナ親要素、コンテナ子要素には CSS を適用しやすくするため

コンテナであることが HTML だけ見ても解りやすいようにクラス名を付ける

コンテナ親要素のクラス名

• 何のコンテナか解るような名前を付ける

コンテナ子要素のクラス名

• container または、○○-container のように、container という名が付くようにする
• <div> タグがコンテナの一部ということを明確にする

サンプルでは 5つのコンテナに分解したので、5つのコンテナセットを作ることになる

HTML にコメントを入れるか入れないか

Web ページのデザインが複雑になればなるほど、HTML のソースコードが長くなる

<div> タグの終了タグがどれだかわからなくなる可能性がある

終了タグの後ろにコメント文を入れて、開始タグとの対応関係をわかりやすくすることがある

コーディングに使うエディタによっては、弁別しやすくなっていたり、インデントすれば良いことではあり、必須ではならなくなっている

テンプレートファイル