6 レイアウトの基本を作る

ボックスの並べ方を考えてレイアウトの基本構造を作ります。

今回はシンプルな２段組のページを作るために、５つのボックスを以下のように並べるものとします。また、レスポンシブ・デザインの設定も行って、ブラウザ画面の横幅に合わせて並びが変わるようにします。

ボックスを横に並べるで説明したレイアウトと似ていますが、ボックスの名前が異なります。

6.1 ボックスを横に並べる

ここでは <article> と <aside> のボックスを横に並べるものとします。そのため、<article> と <aside> の外側を <div class="wrap"> で囲ってグループ化を行い、ボックスを横に並べるの設定を行います。

横幅は <article> を70%に、<aside> を30%に設定します。

・・省略・・
<body><header>
サイトタイトルの内容
</header>
<nav>
メニューの内容
</nav>
<div class="wrap">
<article>
記事の内容
</article>
<aside>
右メニューの内容
</aside>
</div>
<footer>
フッターの内容
</footer></body>
・・省略・・

@charset "UTF-8";

body {font-family: Meiryo,'メイリオ',
      'Hiragino Kaku Gothic Pro',sans-serif;}

/* 横に並べる設定 */
.wrap:after { content: "";
              display: block;
              clear: both; }

article { float: left; 
          width:70%; }

aside { float: left; 
        width:30%; }

/* サイトタイトル */
・・省略・・

<article>と<aside>が横に並びます。

6.2 レスポンシブ・デザインに対応する

ブラウザ画面の横幅に応じて <article> と <aside> の横並びが解除されるようにして、レスポンシブ・デザインを設定します。

レスポンシブ・デザインを設定するで解説したように @media ( ) { ～ } で横並びのためのCSS設定を囲います。なおブレイクポイントは768ピクセルとします。

@charset "UTF-8";

body {font-family: Meiryo,'メイリオ',
      'Hiragino Kaku Gothic Pro',sans-serif;}
/* 幅768px以上 */
@media (min-width:768px) {
/* 横に並べる設定 */
.wrap:after { content: "";
              display: block;
              clear: both; }

article { float: left; 
          width:70%; }

aside { float: left; 
        width:30%; }
}/* サイトタイトル */
・・省略・・

ブラウザの横幅に応じて横並びが解除されます。

ブラウザ画面の横幅を大きくしたり小さくしたりして、幅の変化に応じてサブメニューの位置が横並び・縦並びに変化する様子を確認してください。