ホームページ作成

レスポンシブな2カラムレイアウトを作るCSSの書き方(4ページ目)

レスポンシブWebデザインを使って2カラム(2段組)レイアウトを作成する方法を、簡単なテンプレートとしても使えるHTML+CSSソースの例と共に解説。スマートフォンなど幅の狭い画面では1カラム(段組なし)で表示し、PCなど幅の広い画面ではマルチカラムで表示するような「画面幅に適したレイアウトで表示できるWebサイト」も、HTML+CSSだけで簡単に作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

中間サイズでは一部分だけをマルチカラムにする書き方

これまでのページでは、下記の2種類のレイアウトだけを切り替えるレスポンシブWebデザインを作りました。
 
  • 広い画面用の2カラムレイアウト:主にPC向け
  • 狭い画面用の1カラムレイアウト:主にスマートフォン向け

しかし、広くもなく狭くもない中間サイズの画面では、「2カラムにするには狭いが、1カラムにすると横方向に間延びして感じる」という状態になることもあります(下図の上側)。そこで、もう1つレイアウトを増やして「ページ全体では1カラムレイアウトだが、一部分だけをマルチカラムにする」ことで空間を有効活用する(下図の下側)方法をご紹介いたします。
 
画面の広いモバイル端末でも1カラムにしてしまうと、間延びして見えてしまう可能性がある。

画面の広いモバイル端末でも1カラムにしてしまうと、間延びして見えてしまう可能性がある。


サンプルページの中でサイドカラム部分を作っているHTMLソースは以下のような構造です。
<!-- ====================== -->
<!-- ▼サイドを作るブロック -->
<!-- ====================== -->
<div class="side-column">

   <div class="side-box">
      <h2>サイド見出し1</h2>
      ~ボックスの中身~
   </div>

   <div class="side-box">
      <h2>サイド見出し2</h2>
      ~ボックスの中身~
   </div>

   <div class="side-box">
      <h2>サイド見出し3</h2>
      ~ボックスの中身~
   </div>

   : : :

</div>
<!-- ====================== -->
<!-- ▲サイドを作るブロック -->
<!-- ====================== -->
上記では、サイドカラムを作るdiv要素(class="side-column")の内側に、細かなボックスを作るdiv要素(class="side-box")が多数含まれる構造になっています。
 
サイドカラムの内側にある小さなボックス群だけを2カラムレイアウトにする

サイドカラムの内側にある小さなボックス群だけを2カラムレイアウトにする


この内側の細かなボックスだけをマルチカラムにできれば、下図のように描画領域の空間を有効活用できます。

 
そこで以下のようなCSSソースを加えます。描画領域の横幅が600px~849pxの場合にだけ、これらのCSSが適用されるよう1行目に記述しています。この数値は望みに応じて変更して下さい。
@media (min-width: 600px) and (max-width: 849px) {

   /* ▼サイドカラムの内側だけで各ボックスを2段組にする */
   .side-box {
      display: inline-block;  /* インラインブロック化 */
      width: 48%;             /* 横幅を48%に(2段組にするため) */
      vertical-align: top;    /* 横並びのブロック間では上端を揃える */
      margin: 0;              /* 外側の余白をなくす */
      text-align: left;       /* ボックス内部は左寄せ */
   }

   /* ▼サイドカラムの装飾 */
   .side-column {
      text-align: center;   /* 内部のインラインブロックを中央に寄せる */
      padding: 1em 0.2em;   /* 上下に若干の余白を設ける */
   }

}
各行の意味はコメントの形で記した通りですが、ここで重要なのは以下の2点です。
 
  • サイドカラム内側の各ボックスを作るdiv要素(.side-box)は、
    → インラインブロック化し、(display: inline-block;)
    → 横幅を48%にする。(width: 48%;)

これらの記述によって、サイドカラム(※)の内側に含まれる各ボックスが2カラムレイアウトになります。もしwidthプロパティの値を200pxなどの数値で固定すれば、描画領域の幅に合わせてカラム(段)が増えるマルチカラムレイアウトにもできます。なお、ここで値を「50%」にしなかったのは、枠線の太さ分は横幅に含まれない仕様と、インラインブロックの直後に空白があるためです。2カラムレイアウトにするためには、横幅を50%よりも小さくする必要があります。

※サイドカラムという名称を使ってはいますが、ここでは「メインカラムとサイドカラムによる段組構成」はないので、描画領域のサイド(端)ではなく描画領域全体に広がって表示されます。

サンプルページで表示確認
実際にお使いのブラウザで表示確認してみたい場合は、レスポンシブ2カラムレイアウトの作成例Dなどをご覧下さい。本記事ではA~Dまで4種類のサンプルページを用意していますが、すべてに同じように記述してありますので、どれを見ても構いません。
 
左側から順に、サンプルページをPCで閲覧した場合、タブレットで閲覧した場合、スマートフォンで閲覧した場合

左側から順に、サンプルページをPCで閲覧した場合、タブレットで閲覧した場合、スマートフォンで閲覧した場合


 

レスポンシブWebデザインで2カラムレイアウトを作るCSS

今回は、幅の広い画面では2カラムレイアウト(2段組)になり、幅の狭い画面では1カラムレイアウト(段組解除)になるような、レスポンシブWebデザインを採用したページレイアウトの作成方法をご紹介いたしました。段組構造はWebページのレイアウトとして頻繁に使用する機会があるでしょう。ぜひ、活用してみて下さい。

【関連記事】
【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
  • 3
  • 4
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます