リキッドレイアウトのベーシックテンプレート - Webテンプレート - 仮想空間

ブラウザのサイズによってレイアウト幅が可変する、リキッドレイアウトのベーシックテンプレート（liquid layout basic templates）を5種類作りました。是非ご利用ください。

テンプレートのダウンロード

liquid three column	両側にサイドバーを配置したリキッド3カラムレイアウトです。	Sample
liquid three column right sidebar	右側2カラムにサイドバーを配置したリキッド3カラムレイアウトです。	Sample
liquid three column left sidebar	左側2カラムにサイドバーを配置したリキッド3カラムレイアウトです。	Sample
liquid two column right sidebar	右側にサイドバーを配置したリキッド2カラムレイアウトです。	Sample
liquid two column left sidebar	左側にサイドバーを配置したリキッド2カラムレイアウトです。	Sample

各テンプレートの内容について

index.html	ページ本体となるファイルです。全レイアウトで同じHTMLファイルを使用している（fixed layout basic templates と erastic layout basic templates とも同じ）ため、差し替えができます。
style.css	ページの見栄えを定義しているファイルです。基本的な設定しか施していないので、ご自由にカスタマイズしてください。

• index.htmlはXHTML1.0 Strictで作られており、W3CのMarkup Validation ServiceでValidになることを確認しています。
• style.cssはCSS version 2，2.1，3に対応しており、W3CのCSS Validation ServiceでValidになることを確認しています。
• Another HTML-lint gatewayで、100点になることを確認しています。

index.htmlのdiv構成について

div#All	ブラウザで表示される全ての部分です。
div#Header	ページ情報（サイト・ページ名称等）やグローバルナビゲーション（メインメニュー）を記述する部分です。
div#Main	メインコンテンツを記述する部分です。最小横幅は約540pxです。
div#Menu	ローカルナビゲーション（サブメニュー）などのサイト内リンクを記述する部分です。最小横幅は約220pxです。
div#Sub	サブコンテンツ（お知らせ等）やサイト外リンク（相互リンク等）を記述する部分です。最小横幅は約220pxです。
div.Content	#Main，#Menu，#Subの中で繰り返される、コンテンツ毎のまとまりです。
div#Footer	サイト情報（著作権表記等）を記述する部分です。

• divタグに設定されているid，classは上記のものしかなく、とってもクリーンです。
• div#Allには最少幅（min-width）が設定してあるため、カラム落ち等の心配はありません（IE6にも対応しています）。
• div#Mainの最小横幅は約540pxなので、468pxサイズのバナー（広告）も無理なく配置できます。
• div#Menuとdiv#Subの最小横幅は約220pxなので、180pxサイズのバナー（広告）も無理なく配置できます。
• div#Subは必要なければ削除して構いません。削除してもレイアウトは崩れないよう設計されています。
• divタグとh2タグにはCSSで背景色が指定されています。これはレイアウトを分かり易くするために行っています。背景に別の色や画像を適用することで、オリジナリティのあるページが作成できます。
• div.Content内で使われるタグで設定済みなのは<h2>，<p>，<ul>，<ol>の4つのみなので、その他のタグを使用する場合には別途設定が必要になります。

ポイント

リキッドレイアウト（liquid layout）は閲覧する環境（ディスプレイサイズ）によって横幅を最適化するため、閲覧する側にとって優しいレイアウトと言えます。そのため、ポータルサイトなどで広く使われています。

min-widthプロパティのよってレイアウトの最少幅が設定できるようになってきたので、カラム落ちなどの問題も少なくなり、これから普及していきそうです。

しかし、制作者側にとっては厄介なレイアウトでもあります。例えば見出しを画像化する場合や角丸ボックスによるデザインをする場合には、固定幅でのレイアウトが基本となります。

そのため、実現可能なデザインの作成や無駄なタグの無いコーディングが困難になります。このような理由から、ウェブサイト制作会社はクライアントの指定が無い限り固定幅レイアウトで制作する訳です。

今後、CSSで一つのブロックレベル要素に対して複数の画像が設定できるようになれば（それがスタンダードになれば）、飛躍的にリキッドレイアウトが普及するでしょうね。

ちなみに、IE6はmin-widthプロパティを設定しても適用されません。しかし、仮想空間のリキッドレイアウト・ベーシックテンプレートは、JavaScriptによってmin-widthと同様の効果を実現しています。

ブラウザ毎のバグ対策について

• 各ブラウザで3カラムレイアウトのカラム落ちが発生することを確認していますが、div#Subにネガティブマージンを設定することで解消しています。
• Netscape7.1ではブラウザを狭めた際に左端が消えてしまうという現象を確認していますが、これは残念ながら解消できていません。

お願い

テンプレートの使用に関して、再配布を禁止すること以外、特に制限を設けていませんので、ご自由にダウンロードしてお使いください。

ダウンロードする際の報告義務はありませんが、コメントを残していってくれるとうれしいです。また、何らかのバグを発見した場合にもコメントしていただければ、テンプレートの改善に役立てますので、どうかよろしくお願いします。

また、テンプレートを使用したサイトからのリンクやトラックバックは大歓迎です。

タグ

ベーシックテンプレート

投稿日

07.07.04

カテゴリー

Webテンプレート

コメント

0

トラックバック

0