エラスティックレイアウトのベーシックテンプレート - Webテンプレート - 仮想空間

文字サイズに対応してレイアウトサイズの倍率も変化する、エラスティックレイアウトのベーシックテンプレート（elastic layout basic templates）を5種類作りました。是非ご利用ください。

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

elastic three column	両側にサイドバーを配置したエラスティック3カラムレイアウトです。	Sample
elastic three column right sidebar	右側2カラムにサイドバーを配置したエラスティック3カラムレイアウトです。	Sample
elastic three column left sidebar	左側2カラムにサイドバーを配置したエラスティック3カラムレイアウトです。	Sample
elastic two column right sidebar	右側にサイドバーを配置したエラスティック2カラムレイアウトです。	Sample
elastic two column left sidebar	左側にサイドバーを配置したエラスティック2カラムレイアウトです。	Sample

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

index.html	ページ本体となるファイルです。全レイアウトで同じHTMLファイルを使用している（fixed layout basic templates と liquid 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は上記のものしかなく、とってもクリーンです。
• レイアウトの横幅はフォントサイズ75%（12px）を基準にして設計されています。
• div#Subは必要なければ削除して構いません。削除してもレイアウトは崩れないよう設計されています。
• divタグとh2タグにはCSSで背景色が指定されています。これはレイアウトを分かり易くするために行っています。背景に別の色や画像を適用することで、オリジナリティのあるページが作成できます。
• div.Content内で使われるタグで設定済みなのは<h2>，<p>，<ul>，<ol>の4つのみなので、その他のタグを使用する場合には別途設定が必要になります。
• div.Content内で使うタグで横幅の設定が必要になる場合は、単位をemにしないとカラム落ちの原因になります。0.8emを10px（正確には9.6px）として計算してください。

ポイント

エラスティックレイアウト（elastic layout）は比較的新しいレイアウト手法で、ズーム機能を持たないブラウザでもズーム機能があるかのように拡大・縮小が可能になっています。

欠点としては、横幅や縦幅の計算（pxからemへの変換）が面倒であることです。計算をきちんとしないとカラム落ち等の問題が発生するため、初心者向きのレイアウトとは言えません。

また、基本となる文字サイズを変更する場合には、全てのレイアウトサイズを計算し直して、変更する必要があります。

エラスティックレイアウトをフルに使うためには、標準的な画像サイズ320×240や、バナーサイズ468×60などをあらかじめCSSで、class設定しておくと良いかもしれません。

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

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

お願い

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

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

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

タグ

ベーシックテンプレート

投稿日

07.07.04

カテゴリー

Webテンプレート

コメント

2

トラックバック

0