CSSでつくるレスポンシブなテーブレイアウトサンプル集 #CSS

CSSでつくるレスポンシブなテーブレイアウトサンプル集 #CSS

以前、CSSを使ってレスポンシブなテーブルレイアウトをつくるメモを作りました。それからしばらくして、自分用にでもいろんなレイアウトのサンプルHTMLやCSSもついでにメモっておけば、後が楽!ということに気づきました。サンプルHTMLはストックはしているけれど、それぞれバラバラになってて正直使い勝手が悪いので、まとめなおして記録しておきます。

左サイドバーのレイアウト

sample1

一つ目は左側にサイドバーを配置した標準的によくあるレイアウトです。

このレイアウトの特徴は、サイドバーからのリンク遷移がわかりやすいことが挙げられます。

コンテンツ部分よりもサイドバーのほうが先に目に入ってくるので、コンテンツへの注目が少し薄まるかもしれません。

ブレイクポイントは480pxにしました。

左サイドバーレイアウトサンプル

ヘッダー
サイドバー
コンテンツ
フッター

右サイドバーのレイアウト

sample2

二つ目は右側にサイドバーを配置した標準的によくあるレイアウトです。

このレイアウトの特徴は、一つ目よりコンテンツに注目を当てられることです。ブログなどのタイプではこのレイアウトが多いですね。

サイドバーの役割が完全にサブになるので、補足リンク程度に考えるのが無難です。

ブレイクポイントは480pxにしました。

右サイドバーレイアウトサンプル

ヘッダー
コンテンツ
サイドバー
フッター

3カラムのレイアウト

sample3

三つ目は左右にサイドバーを配置したレイアウトです。

このレイアウトの特徴は、PCの画面幅が広くなったことを利用して、よりダイナミックに画面を使えることです。

ただ、まぁ、左右にサイドバーを持ってくるので、どうしてもコンテンツ部分の幅が狭くなります。リキッドレイアウトのほうが向いているかも。

ブレイクポイントは480pxにしました。

3カラムのレイアウトサンプル

ヘッダー
サイドバー1
コンテンツ
サイドバー2
フッター

3カラムのレイアウト発展

sample4

四つ目は3カラムのレイアウトを利用した、サービス系のwebサイトでよく見るレイアウトです。

三つ目の3カラムのレイアウトの発展で使えます。

ブレイクポイントは480pxにしました。

3カラムのレイアウト発展サンプル

ヘッダー
サブブロック1
サブブロック2
サブブロック3
コンテンツ
フッター

Back to Top