広い画面で便利な2カラムレイアウトは、狭い画面では読みにくい

狭い画面でも2カラムレイアウト(2段組構造)を構成したままだと、読みにくくなってしまう

狭い画面でも2カラムレイアウト(2段組構造)を構成したままだと、読みにくくなってしまう

ウェブページのレイアウトを2カラム(2段組)にして、下記のような役割の2段を横方向に並べるデザインがよく使われています。
  • 主要コンテンツを掲載するメインカラム
  • メニューや補足情報を掲載するサイドカラム(サイドバー)
このようなマルチカラム(段組)レイアウトは、画面の幅を有効活用できる点で便利です。

しかし、画面の幅が狭いモバイル端末などで2カラムレイアウトを表示すると、1カラムあたりの幅も狭くなって読みにくくなるデメリットがあります。したがって、狭い画面では1カラムで表示する(=段組を解除する)という対策が必要でしょう。


 

サイドバーが1つある2カラムレイアウトをCSSでレスポンシブ化する

広い画面では2カラム(2段組)レイアウトで表示し、狭い画面では1カラムで表示(段組を解除)する

広い画面では2カラム(2段組)レイアウトで表示し、狭い画面では1カラムで表示(段組を解除)する

広い画面では2カラムレイアウトで表示し、狭い画面では1カラムで表示する方法の1つに、レスポンシブ・ウェブデザインがあります。これを使えば、例えば下記のような3段階の動的なレイアウト変更がCSSだけで作成できます。

1. PCのような広い画面では、段組構造を使って表示
2. タブレットのような中間サイズでは、一部の段組を解除
3. スマートフォンのような狭い画面では、すべての段組を解除

そこで今回は、サイドバーが1つだけある2カラムレイアウトを、レスポンシブ・ウェブデザインで作成する方法を解説いたします。


 

2カラムレイアウトをレスポンシブにする4通りの書き方

2カラムレイアウトとしてメインカラムとサイドカラムの2段を用意する場合、「HTMLソースの記述順」と「カラム(段)の表示順」との組み合わせには以下の4通りがあります。

2カラムレイアウト(2段組)を作る際、「HTMLの記述順序」と「実際の表示順」で4通りの作成方法がある

2カラムレイアウト(2段組)を作る際、「HTMLの記述順序」と「実際の表示順」との組み合わせで、4通りの作成方法がある


  • A:HTMLはメイン(黄)→サイド(緑)の順。2段の表示もメイン(黄)→サイド(緑)の順。
  • B:HTMLはサイド(緑)→メイン(黄)の順。2段の表示はメイン(黄)→サイド(緑)の順。
  • C:HTMLはメイン(黄)→サイド(緑)の順。2段の表示はサイド(緑)→メイン(黄)の順。
  • D:HTMLはサイド(緑)→メイン(黄)の順。2段の表示もサイド(緑)→メイン(黄)の順。

上記の4通りの中では、「HTMLの記述順」と「カラムの表示順」が一致しているのがAとD、一致していないのがBとCです。記述順と表示順が一致している場合は簡単ですが、記述順と表示順が逆になる場合には若干の工夫が必要です。

1. 記述順と表示順が一致している場合 (A・D)

2カラムレイアウトでは、左側メイン・右側サイド。HTML内ではメイン→サイドの順に記述。

2カラムレイアウトでは、左側メイン→右側サイド。HTML内ではメイン→サイドの順に記述。

パターンAのレイアウトは、右図と下記に示すとおりです。
  • 2カラムの表示は、左がメインカラム→右がサイドカラム
  • HTMLの記述順は、先にメインカラム→後にサイドカラム
    (1カラムでの表示は、上がメインカラム→下がサイドカラム)
詳しい記述方法は後述しますが、お使いのブラウザで表示を確認したい場合は、レスポンシブ2カラムレイアウトの作成例Aをご覧下さい。


 
2カラムレイアウトでは、左側サイド・右側メイン。HTML内ではサイド→メインの順に記述。

2カラムレイアウトでは、左側サイド→右側メイン。HTML内ではサイド→メインの順に記述。

パターンDのレイアウトは、右図と下記に示すとおりです。
  • 2カラムの表示は、左がサイドカラム→右がメインカラム
  • HTMLの記述順は、先にサイドカラム→後にメインカラム
    (1カラムでの表示は、上がサイドカラム→下がメインカラム)
詳しい記述方法は後述しますが、お使いのブラウザで表示を確認したい場合は、レスポンシブ2カラムレイアウトの作成例Dをご覧下さい。


 
※このA・Dのような場合は、HTMLソースに記述した順序通りに表示されるようCSSソースを書けば良いだけなので簡単です。具体的な記述方法は2ページ目で解説いたします。


 

2. 表示順が記述順の逆になる場合 (B・C)

2カラムレイアウトでは、左側メイン・右側サイド。HTML内ではサイド→メインの順に記述。

2カラムレイアウトでは、左側メイン→右側サイド。HTML内ではサイド→メインの順に記述。

パターンBのレイアウトは、右図と下記に示すとおりです。
  • 2カラムの表示は、左がメインカラム→右がサイドカラム
  • HTMLの記述順は、先にサイドカラム→後にメインカラム
    (1カラムでの表示は、上がサイドカラム→下がメインカラム)
詳しい記述方法は後述しますが、お使いのブラウザで表示を確認したい場合は、レスポンシブ2カラムレイアウトの作成例Bをご覧下さい。


 
2カラムレイアウトでは、左側サイド・右側メイン。HTML内ではメイン→サイドの順に記述。

2カラムレイアウトでは、左側サイド→右側メイン。HTML内ではメイン→サイドの順に記述。

パターンCのレイアウトは、右図と下記に示すとおりです。
  • 2カラムの表示は、左がサイドカラム→右がメインカラム
  • HTMLの記述順は、先にメインカラム→後にサイドカラム
    (1カラムでの表示は、上がメインカラム→下がサイドカラム)
詳しい記述方法は後述しますが、お使いのブラウザで表示を確認したい場合は、レスポンシブ2カラムレイアウトの作成例Cをご覧下さい。


 
※このB・Cのような場合で2カラムレイアウトを作る際には、HTMLソースの記述順序とは逆順で表示されるようにCSSソースを記述する必要があります。具体的な記述方法は3ページ目で解説いたします。


 

望ましい記述順序は?

HTMLソースでは、メインコンテンツを先に記述したい

HTMLソースでは、メインコンテンツを先に記述したい

サイドカラムを右側に表示したいか左側に表示したいかは、目的や好みに応じて自由に決めれば問題ありません。しかし、HTMLソースの記述順序は、より重要なコンテンツ(ここではメインカラム)が先に登場するように記述する方が望ましいでしょう。つまり、4通りの中ではAかCのパターンです。

そうするメリットには、以下の点が挙げられます。

  • 装飾が無視された場合(読み上げ環境など)でも、重要な情報を先に見せられる。
  • 重要な内容が先にある方がSEO面で役に立つ可能性がある。
  • 段組を解除して表示する際(モバイル端末での表示時)に、重要な内容を先に見せやすい。

とはいえ、サイドカラムの役割がメニューの表示であって、モバイル環境ではメニューを動的に表示したい場合には、サイドカラムを先に記述しておく方が楽に作れます。したがって、本記事では4通り(A~D)のパターンすべての実現方法を順にご紹介いたします。

それでは次のページから、2カラムレイアウトを作成する具体的な書き方を見ていきましょう。