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

これまでのページでは、下記の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ページのレイアウトとして頻繁に使用する機会があるでしょう。ぜひ、活用してみて下さい。

【関連記事】


投資に興味のない未経験者限定で、オンラインインタビューを受けていただける方を募集中!
ご応募の際に事前に投資意向調査アンケートにご回答いただきます。
投資に興味がない方限定で受け付けております。
※謝礼は10,000円になります(最大10名まで。投資に興味のある方からの募集は〆切りました)

ご協力いただける方はこちらから回答をお願いいたします(回答期限は2021年3月8日15時まで)


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。