記事の内容やaishipシリーズに関するお問い合わせはこちらから

0120-173-163 お電話

[電話受付時間]平日9:30〜19:00

TOP

CATEGORY

SERVICE

【超便利】レスポンシブWebデザインで3カラムレイアウトを作る方法

【超便利】レスポンシブWebデザインで3カラムレイアウトを作る方法

floatとメディアクエリでレスポンシブな3カラムレイアウトを作る

今回は、レスポンシブwebデザインの制作で使える、カラムレイアウトの作り方をご紹介します。これからレスポンシブWebデザインでサイトを制作しようとする方にも分かりやすい方法ですので、ご参考ください。

0. カラムレイアウト

多くのECサイトにおいても、2カラム、3カラムのレイアウトが採用されています。レフトカラム・ライトカラムにはサイドバーとして検索ボックスや、カテゴリー、特集バナーなどを配置する場合が多いです。

レスポンシブWebデザインのカラムレイアウトにおいては、大きいデバイスではカラムレイアウトにし、スマートフォンなどの小さいデバイスではカラムを下に落として縦に表示させます。

1. 下準備

カラムレイアウトを作る前に、

  • カラム数
  • 各カラムの比率
  • ブレイクポイント

を決める必要があります。

これらを決める際には、こちらの記事もご参考ください。
結局どのサイズ表示を意識する?レスポンシブwebデザイン、レイアウトの決め方

今回は3カラムレイアウトを作ってみます。

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サイトの導入事例もぜひご覧ください。

黒河

                   
クラウドECのサイト構築はaishipR-カスタマイズ可能なASP実績No.1

累計2000社以上の導入の総合通販型カートシステムで、カスタマイズ性が高く、デザインの自由度はもちろん、各種システムとの連携や機能追加等も独自のカスタマイズができるため、こだわりのある本格的な通販を月額9,800円から実現できます。 またモバイルファースト設計や月2回の無償バージョンアップなどの特徴があり、使いやすさと最新性を追求した通販サイトを構築できます。 さらに信頼性の高いサーバーを採用しており大規模アクセスにも対応できるため、これからさらに通販での売上を伸ばされたい事業者様におすすめです。
         

レスポンシブWebデザインカテゴリの最新記事