2カラムのサンプルを色々作ってみました。

事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。

IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P
http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html

で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。

細かく作っていけば限りなく出来るけど、13種作ったら疲れました。
11からは既にネタ切れ感が無きにしも非ず・・・

次は3カラムも色々つくろうかなーとか思ってます。
ってことで作りました。
3カラムサンプル18種


仕様っぽいことと注意事項っぽいこと

DOCTYPEは XHTML 1.0 Strict で文字コードは utf-8 で、XML宣言はしておりません。

表示確認は、IE6とFirefox2でおこなってます。
IE5xは対応してません。仕様です。

主流ブラウザだったら大半は問題ないと思いますが、崩れているサンプルは教えてくれると嬉しいです。

このサンプルを使うことの一切の制限が無いです。
人に配ろうが、どうカスタマイズしようが、商用だろうが、何に使うのもご自由です。
ウチから拾ってきたとかって紹介や、リンクも不要です。

その代わりという訳ではないですが、このサンプルを使ったことで何らかの問題等が発生しても一切の保障やら責任は負いません。

あ、紹介やリンク、ブクマとかは不要だけどしてくれたら嬉しいっす。

2カラムサンプル一覧

2カラムサンプル全て
Sample 01

Sample 01

Sample 02

Sample 02

Sample 03

Sample 03

Sample 04

Sample 04

Sample 05

Sample 05

Sample 06

Sample 06

Sample 07

Sample 07

Sample 08

Sample 08

  • エラスティックレイアウト、センタリング、メニュー右、背景無理やり繰り返しているように(サイドより本文の方が高さが有る場合のみ)
  • Sample 08 ダウンロード(zip)
Sample 09

Sample 09

Sample 10

Sample 10

  • エラスティックレイアウト、センタリング、メニュー左、背景無理やり繰り返しているように(サイドより本文の方が高さが有る場合のみ)
  • Sample 10 ダウンロード(zip)
Sample 11

Sample 11

Sample 12

Sample 12

Sample 13

Sample 13