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

10章. 複数カラムのレスポンシブ

      2017/03/27   hatano

複数カラムのレスポンシブの対応

複数カラムのレスポンシブは、PCサイトのmarginの使い方がポイントです。
下記は、PCサイトが2行4列のカラム、スマホサイトは、1列のカラムのレスポンシブレイアウトです。

複数カラムのレスポンシブの例

HTMLは下記のようになっています。

ポイントは、PCサイトの4の倍数のカラムのmarginと最初の行の4つのカラムのmarginをなしにすることです。
今回は指定した番号で要素の指定ができる「カウント擬似クラス」を利用していきます。
「カウント擬似クラス」に関しては、「中級62. カウント擬似クラスの指定方法」をご覧ください。
指定した要素以外の要素が含まれる場合は、:first-of-type, nth-of-type() を使用してください。
:firtst-child、nth-child()と:first-of-type, nth-of-type() との違いは、「中級61. カウント擬似クラスの違い」で詳しく解説しています。
では、実際にどのように対応していくかを見ていきましょう。
まず4の倍数のカラムのmarginは、:nth-child(4n)でmargin-rightをなしにします。

nth-child(4n)でmargin-rightを0にした場合

最初の行のカラムのmarginは、:nth-child(-n+4)で最初から4番目までのmargin-topをなしにします。

nth-child(-n+4)でmargin-topを0にした場合

あとは、スマホサイト側で最初のカラムまたは最後のカラムの上下のmarginを処理します。
下記は、1つ目のカラムを:first-childで指定し、margin-topをなしにした場合です。

最後に今回使用したコードを「5章. レスポンシブサイトの設計方法」で紹介したパターンでそれぞれ紹介していきます。
レイアウトを分かりやすくするために各カラムに背景色と高さを指定しています。

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

スマホサイトでPCサイトのmarginを打ち消す箇所が多く、難易度が高いパターンになります。

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

コードも少なく、スマホサイトからPCサイトの継承も比較的、用意なパターンです。

pc、スマホを別々に指定

コード量は増えますが、marginの打ち消しをしないので、分かりやすいコードになります。

広告

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