レスポンシブレイアウト

レスポンシブデザインのテーブルレイアウト

レスポンシブデザイン時のテーブルレイアウトの一つの参考。

600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。

幅600pxのテーブル

見出しA 見出しB 見出しC 見出しD
コンテンツA コンテンツA コンテンツAコンテンツA コンテンツAコンテンツAコンテンツA
コンテンツBコンテンツB コンテンツB コンテンツBコンテンツBコンテンツB コンテンツBコンテンツB
コンテンツCコンテンツCコンテンツC コンテンツCコンテンツCコンテンツCコンテンツC コンテンツCコンテンツC コンテンツCコンテンツCコンテンツC

HTML

CSS

tableを囲んだdivに

を入れると、PCでは横スクロール、スマホなどでは左右にスワイプできます。

レスポンシブレイアウトの基本設定

サイトをレスポンシブにする場合にまず最初に設定することのまとめ。

ブレークポイントを決める

レイアウトを切替る画面サイズを決めます。
PC・タブレット・スマートフォンそれぞれに対応したレイアウトにするなら

PC向け       768px以上
タブレット向け   768pxまで
スマートフォン   480pxまで

こんな感じでしょうか。

ちょっと使わないとすぐ忘れてしまうので、iphoneなどのデバイスの解像度を一覧にまとめておきます。

 

端末 画面サイズ(inch) 画面解像度(px) デバイスピクセル比 ブラウザサイズ
iPhone4 3.5インチ 640 x 960 2.0 320 x 480
iPhone5/5s 4インチ 640 x 1136 2.0 320 x 568
iPhone6 4.7インチ 750 x 1334 2.0 375 x 667
iPhone6 plus 5.5インチ 1080 x 1920 2.0 414 x 738
iPad mini 9.7インチ 1536 x 2048 2.0 768 x 1024
iPad 7.9インチ 1536 x 2048 2.0 768 x 1024

View Portの設定

実際のHTMLファイルにviewportの設定をします。

 IE8以下の対応

IE8以下ではhtml5やメディアクエリーに対応していないため、javascriptを設定します。

html5shiv.jsを入れる

 https://code.google.com/p/html5shiv/

css3-mediaqueries.jsを入れる

https://code.google.com/p/css3-mediaqueries-js/

 CSSの設定

ブレイクポイントをしていたサイズに応じてmedea queryを設定します。

もっと細かく設定するなら

メディアクエリーの記述方法には、

・モバイルファーストか
・PCファーストか
という考え方の違いで記述方法も変わってくると思います。