ここでは以下の５つのパーツを作ります。
各パーツはHTMLとCSSの断片です。HTMLは index.html の <body> 範囲内に、上から順番に収めてください。
CSSは原則、末尾に順番に設定を追加してください。
5.1 サイトタイトル header
5.2 ナビゲーションメニュー nav
5.3 記事 article
5.4 サイドメニュー aside
5.5 フッター footer
完成例
ボックスの中に収めるコンテンツを用意します。ここでは簡単なHTMLとCSSの設定のみを行い、細かなデザインはパーツを利用する時に、実際のページ合わせて調整をします。
ここでは以下の５つのパーツを作ります。
各パーツはHTMLとCSSの断片です。HTMLはindex.htmlの<body>範囲内に、上から順番に収めてください。
CSSは原則、末尾に順番に設定を追加してください。5.1 サイトタイトル header
5.2 ナビゲーションメニュー nav
5.3 記事 article
5.4 サイドメニュー aside
5.5 フッター footer
完成例
参考までに、完成したらHTMLやCSSがどうなるかを下に示しておきます。
上記のパーツを全て
index.htmlの<body>範囲内に収めると、各パーツは以下のような構造で並んでいるはずですので確認してください。なお細かい部分は省略しています。詳細は上記の 5.1 ～ 5.5 を参照してください。HTMLファイル内では下のように
<header>や<article>といったタグが目印となります。・・省略・・
<body>
<header>
「5.1 サイトタイトル」で作った内容 </header><nav>
「5.2 ナビゲーションメニュー」で作った内容 </nav><article>
「5.3 記事」で作った内容 </article><aside>
「5.4 サイドメニュー」で作った内容 </aside><footer></body>
「5.5 フッター」で作った内容 </footer>
・・省略・・CSSファイル内では下のように
/* ～ */のコメントが目印となります。・・省略・・
/* サイトタイトル */
「5.1 サイトタイトル」で作った内容/* ナビゲーションメニュー */
「5.2 ナビゲーションメニュー」で作った内容/* 記事 */
「5.3 記事」で作った内容/* サイドメニュー */
「5.4 サイドメニュー」で作った内容/* フッター */
「5.5 フッター」で作った内容HTMLやCSSファイルが上記のようになっていれば、ひとまずこの段階までは完了したと言えます。次へ進みましょう。