CSS 全体のレイアウト
全体のレイアウトをCSSで宣言するにはどうしたらよいかの話です。
大雑把に以下の条件で、<div>、<header>、<nav>、<main>、<aside>、<footer>タグをレイアウトしましょう。
- nav内の一覧はdisplay:flex;を使って横一列に並べる。
- <main>、<aside>はdisplay:flex;を使って横に並べる。
- <main>、<aside>はwidthプロパティで幅を1200pxとして、paddingプロパティまたはmarginプロパティを設定し中心の揃える。
- <aside>でmin-heightプロパティとheight: auto !important;を使い最小の高さを設定する。
@mediaで表示サイズごとの表示方法を設定しておく。