440design Beta

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版、ピクセル版があります。

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

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

• ひとりごと: 風邪ひいて頭が割れるように痛い…。ほぼ一日寝てました。ブログも休もうと思ったんですが、せっかくMattさんが速攻で対応してくださったので根性でアップ。みなさん風邪には気をつけてくださいね〜。

2008年1月21日月曜日 22:33:28  カテゴリー:Web Design
よかったら、コメントまたはトラックバックしてください。
トラックバックURL