CSSを使ってレスポンシブなテーブルレイアウトをつくるメモ #CSS CSSを使ってレスポンシブなテーブルレイアウトをつくるメモ #CSS

CSSを使ってレスポンシブなテーブルレイアウトをつくるメモ #CSS

前に、cssでテーブルレイアウトを作るメモを書きましたが、今回はそのメモから発展してテーブルレイアウトからのレスポンシブにするメモです。
ひとまず、簡単な2カラムなテーブルレイアウトをつくるソースから。

左のセル
右のセル

わかりやすいように色をつけてます。

てな感じで、tableタグを使わずにテーブルレイアウトを作れます。ブロックの数を増やせば3カラムのレイアウトもできます。

いわゆるレスポンシブにしてみよう!

左のセル
右のセル

上のようなレイアウトだと、ウィンドウサイズを小さくした時に、

左のセル
右のセル

こんなかんじに表示されるようにします。

CSSのほうにメディアクエリを設定します。

今回はウィンドウサイズが481px以上のときはテーブルレイアウトになるようにしました。

ためしにブラウザのウィンドウサイズを調整してみるとわかると思いますが、ウィンドウサイズが変わると上のブロックの部分のレイアウトが変わります。

よくあるレイアウトでためそう

ヘッダー
左のセル
右のセル
フッター

よくある左にサイドバーをもってきたタイプのレイアウトです。

実際にhtmlに書くときはこんなふうにすると良いかと。(今回のサンプルはdivばっかりですが)

これにさっきのCSSを適用すると、レスポンシブなテーブルレイアウトのできあがりです。

レイアウトサンプル集

別記事ですが、レイアウトサンプル集をつくりました。

21,837 views/total