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

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

      2017/03/02

2カラムレイアウトからのレスポンシブ

PCサイトで、floatを使った2カラムレイアウトを1カラムに変更する場合は、スマホでのレイアウトの順番が重要です。
まず、スマホでのレイアウトの順番を決めます。
次にPCサイトでfloatを使い、2カラムレイアウトにします。
PCサイトでの左右のカラムの入れ替えは、floatを使うことでコントロールが可能です。
今回は、左右どちらかがメニューになっていても対応できる方法を紹介します。

サンプルは、HTMLは共通とし「5章. レスポンシブサイトの設計方法」で紹介したパターンをそれぞれ紹介していきます。
レイアウトを分かりやすくするために、mainレイアウトにheightを指定しています。

右メニューのレイアウトの場合

pcサイトは、mainに float: left; side-menuに float: right; を指定し、スマホサイトはfloat指定をせず、カラムダウンさせています。

右メニューの2カラムレイアウト

下記は、共通のHTMLです。

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

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

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

下記は、スマホサイトからCSSを指定。PCサイトはメディアクエリを使いスマホサイトのCSSを継承しています。
pc側でfloatの設定とカラムのwidthの上書き指定をしています。

pc、スマホを別々に指定

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

左メニューのレイアウトの場合

右メニューとの違いは、mainとside-menuのfloatの指定です。
mainにfloat: right; side-manuにfloat: left;にすることで、pcサイトでカラムの左右を入れ替えられます。
サンプルでは、pcサイト, スマホサイトを別々に指定した場合の例で紹介します。

左メニューの2カラムレイアウト

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