TOP > CSSリファレンス > 全体のレイアウト

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で表示サイズごとの表示方法を設定しておく。

動作の確認