【CSS】レスポンシブデザインに対応した表の作り方2016.02.25CSSレスポンシブ近年はサイト制作の際にはスマートフォン対応することを考慮した上でコーディングなどを行う必要性が出てきました。そんな時に結構手こずるのがtableレイアウトだったりします。スマートフォンでtableレイアウトを見ると幅が狭いために見づらかったりしますし、PCサイトの時にはtableレイアウトでお問い合わせフォームを作っている時にはスマートフォンサイトの際に縦に表を並べておいた方が見やすかったりしますよね。当サイトのお問い合わせフォームも、PCで見た時にはtableレイアウト、スマートフォンで見た時には表が縦になるようにレイアウトしています。そこで今回は、レスポンシブデザインに対応した表の作り方をご紹介したいと思います!まずデモページとして以下のページを用意しました。まとめレスポンシブデザインに対応した表を作るにはまず、レスポンシブデザインに対応した表を作るにはtableタグではなく、ulタグで表を作ることで可能になります!tableタグでもレスポンシブデザイン対応できるらしいのですが、自分がやってみた結果、どうしても上手くいかなかったので、今回はulタグで作成する方法で解説します。ulタグでソースを記述それではまず、ulタグで表のもととなるソースを記述します。見本のソースとして以下のように用意しました。続いて、CSSでレイアウトをtableレイアウトになるようデザインします。CSSは今回以下のように記述しました。10px;}ulの幅を決めるまず、ulの幅を決めましょう。これは表の幅になるので、どれくらいの幅の表にしたいかによって幅のサイズを決めます。見出し部分と内容部分のCSSを設定する続いて、見出し部分と内容部分のCSSを設定します。class=”table-2′′>~</div>としましたが、class名は任意のものを競っていただけたらと思います。CSSの設定の流れとしては以下になります。hiddenを設定する。※今回は背景色に#cccを設定しています。leftと幅を設定する。30%と設定しました。3内容部分に対して、背景色と見出し部分の幅分、margin-leftを設定する。※見出し部分に背景色を設定するとしたら、liに対して背景色を設定するように!見出し部分に背景色を設定する場合、普通だったらそのまま見出し部分に対して背景色を設定しそうですが、必ずliに対して背景色を設定するようにしてください!何故このように設定するのかというと、見出し部分に背景色を設定してしまった場合、以下のようになってしまうのです。見出し1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト見出し2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストこれでは表としてはレイアウトがおかしくなっていますよね...なので、liに背景色を設定しておくことで見出し部分の背景色も設定されたように見せる...という手法をとる必要があります。ちなみに内容部分の背景色は別に設定したい...という場合は、内容部分そのものに背景色を設定して大丈夫です(^-^)表の枠線はulに設定するようにするそして表の枠線は、基本的にはulに設定しておきましょう。内容部分にはborder-leftの数値を設定という工程を踏んでいます。以上の設定でulタグで表が作れたかと思います!なので続いてスマートフォン用のCSSを設定しましょう。今回は以下のようにCSSを記述しました。見出し部分のfloatを解除してwidthを100%にするまず、見出し部分のfloatを解除して、widthを100%に設定しましょう。