floatとメディアクエリでレスポンシブな3カラムレイアウトを作る
今回は、レスポンシブwebデザインの制作で使える、カラムレイアウトの作り方をご紹介します。これからレスポンシブWebデザインでサイトを制作しようとする方にも分かりやすい方法ですので、ご参考ください。
0. カラムレイアウト
多くのECサイトにおいても、2カラム、3カラムのレイアウトが採用されています。レフトカラム・ライトカラムにはサイドバーとして検索ボックスや、カテゴリー、特集バナーなどを配置する場合が多いです。
レスポンシブWebデザインのカラムレイアウトにおいては、大きいデバイスではカラムレイアウトにし、スマートフォンなどの小さいデバイスではカラムを下に落として縦に表示させます。
1. 下準備
カラムレイアウトを作る前に、
- カラム数
- 各カラムの比率
- ブレイクポイント
を決める必要があります。
これらを決める際には、こちらの記事もご参考ください。
結局どのサイズ表示を意識する？レスポンシブwebデザイン、レイアウトの決め方
今回は３カラムレイアウトを作ってみます。
2. 実際にコーディング
では、実際にコーディングしてみます。
① 元となるソースコード
HTML
<body>
<div class="header">ヘッダー</div>
<div class="main">メインコンテンツ
<div class="left">レフトカラム</div>
</div>
<div class="right">ライトカラム</div>
</body>
上記のコードに、わかりやすいように色と高さをつけたものがこちらです。
デモサイト①はこちら
レフトカラムがメインコンテンツの入れ子構造となっています。
これは、「スマホ・タブレットサイズ：メインコンテンツを最上部に表示」「PCサイズ：メインコンテンツ中央に表示」とするためにこのような形になっています。
段組みを解除したスマートフォン・タブレットサイズでは、そのまま上から下に表示されるので、もっとも重要なコンテンツをいちばん上に持ってきます。モバイル端末ではPCに比べて、上に配置された要素ほどよく閲覧され、下に行くほど見られなくなります。ここではメインコンテンツを一番上に記述します。
さらにメインコンテンツを段組みしたPCサイズで中央に配置するためには、上記のように入れ子にするか、ヘッダー部分を落としてカラムにするなどする必要があります。
② floatで段組みに・幅を設定
追加するコード
CSS
.left, .main {
float: right;
}
.main-contents {
float: left;
width: 80%;
}
.right {
float: right;
width: 20%;
}
.left{
width: 20%;
}
.main{
width: 80%;
}
Floatでカラムレイアウトにします。また、widthの値の合計が、親要素に対して100%になるように注意して設定してください。
③ メディアクエリでスマホ・タブレットでの段組みを解消
①で決定したブレイクポイントで、段組みを解消します。
追加するコード
CSS
@media screen and (max-width: 600px){
.main, .left ,.main-contents, .right{
width: 100%;
}
}
こちらで完成となります。
デモサイト完成版はこちら
3. おわりに
いかがでしたでしょうか。
なお、レスポンシブECサイト構築ASP『aishipR』では、カラムあり/なし、カラムの左右を管理画面から簡単に切り替えることが可能です。
3カラムの実装ももちろん可能です。aishipRを導入されているECサイトでも、様々なカラムを採用されているので、レスポンシブECサイトの導入事例もぜひご覧ください。
黒河
