KUSU'S SITE
2016年2月25日

【CSS】レスポンシブデザインに対応した表の作り方

  

 近年はサイト制作の際にはスマートフォン対応することを考慮した上でコーディングなどを行う必要性が出てきました。

そんな時に結構手こずるのがtableレイアウトだったりします。
スマートフォンでtableレイアウトを見ると幅が狭いために見づらかったりしますし、PCサイトの時にはtableレイアウトでお問い合わせフォームを作っている時にはスマートフォンサイトの際に縦に表を並べておいた方が見やすかったりしますよね。
当サイトのお問い合わせフォームも、PCで見た時にはtableレイアウト、スマートフォンで見た時には表が縦になるようにレイアウトしています。

そこで今回は、レスポンシブデザインに対応した表の作り方をご紹介したいと思います!

まずデモページとして以下のページを用意しました。
PCから見ている方はWebブラウザの幅を狭めるとレイアウトが変わり、スマートフォンから見ている方はスマートフォンの向きを縦と横にそれぞれ変えるとレイアウトが変わると思います!
デモページ

レスポンシブデザインに対応した表を作るには

 まず、レスポンシブデザインに対応した表を作るにはtableタグではなく、dlタグで表を作ることで可能になります!
tableタグでもレスポンシブデザイン対応できるらしいのですが、自分がやってみた結果、どうしても上手くいかなかったので、今回はdlタグで作成する方法で解説します。

1. dlタグでソースを記述

 それではまず、dlタグで表のもととなるソースを記述します。

見本のソースとして以下のように用意しました。

<dl>
	<dt></dt>
	<dd>あああああ</dd>
	<dt></dt>
	<dd>いいいいい</dd>
	<dt></dt>
	<dd>ううううう</dd>
</dl>

2. CSSでレイアウトを作成

 続いて、CSSでレイアウトをtableレイアウトになるようデザインします。
CSSは今回以下のように記述しました。

dl {
	width: 500px;
	overflow: hidden;
	font-size: 18px;
	background: #ccc;
	border: 1px solid #000;
	border-top: 0;
	box-sizing: border-box;
}

dt {
	float: left;
	width: 150px;
	border-top: 1px solid #000;
	padding: 10px;
	box-sizing: border-box;
}

dd {
	background: #fff;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	padding: 10px;
	box-sizing: border-box;
	margin-left: 150px;
}

dlの幅を決める

 まず、dlの幅を決めましょう。
これは表の幅になるので、どれくらいの幅の表にしたいかによって幅のサイズを決めます。

dtとddの幅を決めて横並びになるよう設定する

 続いて、dtとddの幅を決めます。これはdlの幅を元に設定しましょう。
ここでdlの幅より大きい幅だとレイアウトが崩れたりします

そしてdtとddの幅を決めたら、横並びになるよう設定します。
流れとしては、
・dtをfloat: left;で左に並べる
・ddはdt分のmargin-leftで値をとる

といったところになります。
今回でいえば、dtは150pxと幅を設定しているので、ddはmargin-left: 150px;にしておく…ということですね。

dtに背景色を設定するとしたらdlそのものに設定するように!

 よくサイトとかでdtの背景に色をつけていて、表として見やすくしているところがあると思います。
それを今回のようなdlでテーブルのように表示する時には、dtに背景色を設定するのではなく、dlそのものに背景色を設定するようにしておきましょう。

何故このように設定するのかというと、dtに背景色を設定してしまった場合、以下のようになってしまうのです。。。

見本見本見本見本見本
見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本

これでは表としてはレイアウトがおかしくなっていますよね…
なので、dl自体に背景色を設定しておくことでdtの背景色も設定されたように見せる…という手法をとる必要があります。

ちなみにddの背景色は別に設定したい…という場合は、ddそのものに背景色を設定して大丈夫です(^-^)

表の枠線はdlに設定するようにする

 そして表の枠線は、基本的にはdlに設定しておき、dtとddはそれぞれ必要なところだけborderを設定する…という手法が良いかと思います。
今回でいえば、
・dlのborder-topは値を0にする
・dt、ddにborder-topの数値を設定
・ddにはborder-leftの数値を設定

という工程を踏んでいます。

ちなみに、dlにborder-topではなくborder-bottomの値を0にして、dtとddにborder-bottomで数値を設定してしまうと、以下のような残念な感じになってしまうので、そこも注意が必要です!

見本見本見本見本見本
見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本見本

3. スマートフォン用にCSSの設定を変更

 以上の設定でdlタグで表が作れたかと思います!
なので続いてスマートフォン用のCSSを設定しましょう。

今回は以下のようにCSSを記述しました。

@media (max-width: 480px) {

dl {
	width: 95%;
	margin: 0 auto;
	margin-top: 2.5%;
}

dt {
	width: 100%;
	float: none;
}

dd {
	width: 100%;
	border-left: 0;
}

}

dtのfloatを解除してwidthを100%に

 ここで大事なのが、dtのfloatを解除して、widthを100%に設定しましょう。
これで表が縦に並んで表示されるようになるかと思います!

まとめ

 以上がレスポンシブデザインに対応した表の作り方になります!
tableのデザインによってはdlの設定なども変えていく必要があるかと思いますので、今回ご紹介した方法を元に設定を変更してみるのもよいかと思います(^-^)

スポンサーリンク
スポンサーリンク

コメントを残す




スポンサーリンク

ホームページ制作について

ホームページの制作依頼希望の方
はまず↓をクリック!
ホームページの制作依頼希望の方はまず↓をタップ!
サービスの詳細

WordPress講習会について

WordPress講習会について
気になる方ははまず↓をクリック!
WordPress講習会について気になる方はまず↓をタップ!
サービスの詳細

TWITTER

ページトップに戻る