1. ページ情報
  2. メインコンテンツ
  3. メニュー
  4. サブコンテンツ
  5. サイト情報


当ページまでの足跡
ホーム
インターネット
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の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ではブラウザを狭めた際に左端が消えてしまうという現象を確認していますが、これは残念ながら解消できていません。

お願い

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

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

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

タグ

コメント

08.05.12 17:25

はじめまして、関と申します。
CSS勉強のため、貴殿サイトを拝見させていただき
デンプレートをダウンロードさせていただきました。

htmlとcssをドリームウィーバーで開いたところ
デザイン画面部分にレイアウトが表示されず
文字情報のみしか表示されません。

どうしたら、cssで定義されている内容が
ドリームウィーバーで表示できるのでしょうか?

実際に、ドリームウィーバー上とブラウザー上では
表示がことなることもあり、どうせことなることも
あるのであれば、はじめから貴殿のファイルのように
作成できたらと思います。
もし、よろしかったら教えて下さい。

以上、お手数ですが宜しくお願い致します。

08.06.26 06:52 Hiro

製作&配布ありがとうございます☆
DLさせていただきました。

今後もサイト訪問させていただきます☆

ありがとうございました。

コメントフォーム

*印が付いた項目は入力必須です。

※Typekey(認証サービス)を利用しないで投稿されたコメントは承認されるまで表示されません。

トラックバック

トラックバックURL

※受け付けたトラックバックは承認されるまで表示されません。

前後のコンテンツ
リキッドレイアウトのベーシックテンプレート
エラスティックレイアウトのベーシックテンプレート


Join

Ads



  1. ページ情報
  2. メインコンテンツ
  3. メニュー
  4. サブコンテンツ
  5. サイト情報