固定幅レイアウトのベーシックテンプレート - Webテンプレート - 仮想空間

ウェブレイアウトのスタンダードである、固定幅レイアウトのベーシックテンプレート（fixed layout basic templates）を5種類作りました。是非ご利用ください。

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

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

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

index.html	ページ本体となるファイルです。全レイアウトで同じHTMLファイルを使用している（liquid 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#Mainの横幅は540pxなので、468pxサイズのバナー（広告）も無理なく配置できます。
• div#Menuとdiv#Subの横幅は220pxなので、180pxサイズのバナー（広告）も無理なく配置できます。
• div#Subは必要なければ削除して構いません。削除してもレイアウトは崩れないよう設計されています。
• divタグとh2タグにはCSSで背景色が指定されています。これはレイアウトを分かり易くするために行っています。背景に別の色や画像を適用することで、オリジナリティのあるページが作成できます。
• div.Content内で使われるタグで設定済みなのは<h2>，<p>，<ul>，<ol>の4つのみなので、その他のタグを使用する場合には別途設定が必要になります。

ポイント

中央にメインコンテンツが配置されている3カラムレイアウトを実現するには、以下の3つの方法が挙げられます。

1. floatプロパティのみで3カラムレイアウトを実現する（HTML側に本来必要の無いdivタグを追加する必要があります）。
2. floatプロパティとpositionプロパティを併用して3カラムレイアウトを実現する。
3. floatプロパティとネガティブマージンを利用して3カラムレイアウトを実現する。

仮想空間のWebテンプレートは、IE7を除く全てのブラウザで2の方法を採用し、IE7だけCSSハックを使って3の方法を適用させています。

その理由は、2の方法だけ使用した場合、IE7で新たに採用されたズーム機能を使用するとレイアウトが崩れてしまうからです。

逆に、3の方法だけ使用した場合には、Netscape7.1でfloatが解除されない現象が発生し、フッターが隠れてしまいます。

これらの問題を解消する為に2と3の方法を併用しています。

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

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

お願い

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

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

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

タグ

ベーシックテンプレート

投稿日

07.07.04

カテゴリー

Webテンプレート

コメント

0

トラックバック

0