レスポンシブ対応の複数カラムの料金表を作ります。

今回のキモとなるのはCSSのcolumn-countとcolumn-gapプロパティ。
比較的新しいCSSの仕様ですが、これを利用することで料金表など複数カラムのデザインの実装がラクになります。

まずは実際の挙動をご確認ください。

DEMO : https://on-ze.com/demo/css-column-price/

HTML

HTMLは簡単な<ul> <li>のリストでマークアップします。

<ul class="price-list">
	<li>盛り合わせ<span class="price"><b>2000</b>円</span></li>
	<li>もも<span class="price"><b>2000</b>円</span></li>
	<li>ねぎま<span class="price"><b>2000</b>円</span></li>
	<li>かしら<span class="price"><b>2000</b>円</span></li>
	<li>くび<span class="price"><b>2000</b>円</span></li>
	<li>ぼんじり<span class="price"><b>2000</b>円</span></li>
	<li>セセリ<span class="price"><b>2000</b>円</span></li>
	<li>手羽先<span class="price"><b>2000</b>円</span></li>
	<li>鶏皮<span class="price"><b>2000</b>円</span></li>
	<li>つくね<span class="price"><b>2000</b>円</span></li>
	...
</ul>

CSS

ul.price-list{
	column-count:4;
	column-gap:60px;
	list-style:none;
	margin:10% 2%;
	padding:0;
}

ul.price-list li{
	border-bottom:#d2d2d2 1px dotted;
	display:inline-flex;
	font-weight:bold;
	margin-bottom:8px;
	padding-bottom:8px;
	width:100%;
}
@media screen and (max-width:1300px) {
	ul.price-list {column-count:3;}
}
@media screen and (max-width:1000px) {
	ul.price-list {column-count:2;}
}
@media screen and (max-width:600px) {
	ul.price-list {column-count:1;}
}

CSSコーディングのポイント

  • 親要素にcolumn-countを指定、分割する子要素はインライン要素にする必要があり、今回はdisplay:inline-flex;を指定しています。
    子要素をdisplay:block;とした場合は表示がズレてしまうので注意。
  • column-countで指定した数値は横列の数です。
  • 今回はレスポンシブ対応なので、メディアクエリーで「column-count」の値を細かく調整しています。
  • column-gap:60px;でカラム間のマージンを調整します。

以上。
レスポンシブ対応の複数カラムの料金表でした。

DEMO : https://on-ze.com/demo/css-column-price/