HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

9章. 3カラムレイアウトのレスポンシブ化

      2017/03/02

3カラムからの変更

3カラムのレスポンシブは、前章の「2カラムレイアウトのレスポンシブ化」floatを使用したパターンでは難しい場合があります。
PCサイトで中央にメインカラム、両端にナビやバナーなどのサブカラムがある場合、スマホでは、メインカラム → サブカラム → サブカラムといった順に並べたいことが多いと思います。

このような場合は、PCサイトで、position: absolute; を使うと自由にレイアウトを作ることができます。
ポイントは、メインカラムまたは一番高さがあるカラムには、positionを設定しないことです。
position: absolute; は、親要素からは認識できない要素となり、親要素が高さを確保することができません。
結果、footerなどの下のブロックが重なってしまいます。

footerが重なってしまった3カラムのレイアウト

下記のサンプルは、左にナビ、右にバナーエリアを設置した場合です。
メインカラムには、サブカラムより高くなるようにheightを指定していますが、通常はheight指定をしないようにしましょう。
もし、メインカラムがサブカラムより高さが足りない場合は、メインカラムにmargin-bottompadding-bottomで調整するほうが良いでしょう。
今回も「5章. レスポンシブサイトの設計方法」で紹介した3つのパターンのCSSで解説します。

3カラムのレスポンシブ

下記は、共通のHTMLです。

pc → スマホ(pcを継承)の場合

下記は、PCサイトからCSSを指定。スマホサイトはメディアクエリを使いPCサイトのCSSを継承して指定しています。
pc側で、設定したpositionをスマホ側で position: static; で解除しています。

スマホ → pc(スマホを継承)の場合

下記は、スマホサイトからCSSを指定。PCサイトはメディアクエリを使いスマホサイトのCSSを継承して指定しています。
pc側でサイドメニューとバナーエリアに position: absolute; を指定し、両端に配置しました。 wrapで、position: relative; を指定し、2つのカラムの位置の基点にしています。

pc、スマホを別々に指定

下記は、pcサイトとスマホサイトのCSSを別々にメディアクエリで指定した場合です。

 - レスポンシブサイト制作