Amazon.co.jp ウィジェット

CSSハックなし! 究極のマルチカラムリキッドレイアウト

Ultimate multi-column liquid layouts

すばらしいCSSテンプレートを発見したのでご紹介。

Matthew James Taylorさんのブログより「究極のリキッドレイアウトテンプレート」。これはホントにすごい。なぜ究極かというと…

■CSSハックなし!
IE用のコンディショナルコメント処理が一行だけ必要ですが、100%正しい(W3CのCSS Validatorで正当と判断される)CSSで書かれています。しかもモダンブラウザだけでなくIEでもちゃんと動作(IEで問題になりがちな横方向のpaddingやmarginを使ってないため)。
■正しいHTML構文
デモページのマークアップはW3CのMarkup Validatorで正当と判断されています(XHTML1.0 strict)。
■SEOフレンドリー
サーチエンジンはHTMLで上に記述されているものほど重要と見なすので、サイドバー等はメインのコンテンツの下に記述、CSSで位置を変えています。
■高さが揃ったカラム
それぞれのカラムの内容量がたとえ極端に違っても、同じ高さに揃ったカラムを実現。
■画像やjavascriptは使用しない
カラムの高さを揃えるためだけに、本来必要のない画像やスクリプトを使用する必要はありません。javascriptも全く使用していないので、offにされている環境でも大丈夫。
■テキストのリサイズにも対応
テキストを拡大してもレイアウトが崩れません。
■モダンブラウザだけでなくIEでもちゃんと表示
確認できている対応ブラウザは以下。

Windows
Firefox 1.5 & 2
Safari
Opera 8.1 & 9
Explorer 5.5, 6 & 7
Netscape 8
Mac
Firefox
Safari
Opera
Netscape
iPhone & iPod Touch
Safari
■無料!
デモページのCSSとHTMLをコピーして自由に使って良いそうです(ただし、CSSは外部ファイルにするよう勧めておられます)。リンクを貼ってくれると嬉しいなとのことですが必須ではありません。使用した場合はMattさんに連絡すれば、サンプルサイトのリストに加えてくれるそうです。

昨日公開されたときには、ウィンドウ幅を極端に小さくするとレイアウトが崩れてしまってましたが、Mattさんにメールしてみたらすぐに修正してくれました。なんていい人なんだ…。

というわけで以下がサンプルページです。divの図解等もあって、とてもわかりやすいですよ。それぞれサイドバーのサイズが可変のパーセンテージ版と、固定のem版、ピクセル版があります。

Holy Grail
3カラム/両サイドにサイドバー


パーセンテージ版
em版
ピクセル版

Blog Style
3カラム/右サイドバー


パーセンテージ版
em版
ピクセル版

Left Menu 2カラム/左サイドバー


パーセンテージ版
em版
ピクセル版

Right Menu 2カラム/右サイドバー


パーセンテージ版
em版
ピクセル版

Full Page 1カラム


パーセンテージ版
em版
ピクセル版

Multi Column マルチカラム


パーセンテージ版
em版
ピクセル版

万が一なにか動作がおかしい等を見つけられたら、作者のMattさんに教えてあげてください。私に連絡くださっても結構です。

すばらしいテンプレートをシェアしてくださったMattさんに感謝!

タグ:

コメント

メールアドレスとサイトURLは必須ではありません