スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 |   | 

CSSで縦分割の擬似フレームページ

  • 2006/07/09(Sun)
  • カテゴリー:CSS

なんとなくアクセス解析を眺めていると、擬似フレームに関する検索で辿り着く方がわりといらっしゃるようだったので、今回はまた擬似フレームについて。

今回は左右分割ではなく縦分割のフレームをCSSで擬似的に再現してみようと思います。

まず(X)HTMLを以下のように記述します。

  1.  ・
  2.  <略>
  3.  ・
  4. <body>
  5. <div id="header">
  6. <h1>擬似フレームサンプル</h1>
  7. <p>CSSで縦分割の擬似フレームを再現。</p>
  8. </div>
  9. <div id="contents">
  10. <div id="contents-inner">
  11. <h2>コンテンツ見出し</h2>
  12. <p>以下、本文続く…</p>
  13.  ・
  14.  ・
  15.  ・
  16. </div>
  17. </div>
  18. <div id="footer">
  19. <p>コピーライト等、フッター情報…</p>
  20. </div>
  21. </body>
  22. </html>

これといったポイントはありませんが、一箇所だけ。
コンテンツボックスの内包要素として、11~17行目に渡って<div id="contents-inner">~</div>で囲っています。

後述しますが、これはpadding指定の為に記述しています。

次にCSSを以下のように指定します。

  1. html {
  2.     height: 100%;
  3.     overflow: hidden;
  4. }
  5. body {
  6.     height:100%;
  7.     overflow:hidden;
  8. }
  9. div#header {
  10.     width: 100%;
  11.     height: 100px;
  12.     position: absolute;
  13.     top: 0;
  14.     right: 16px;    /* スクロールバー幅 */
  15.     z-index: 2;
  16.     background: #fff;
  17. }
  18. div#content {
  19.     height: 100%;
  20.     overflow: auto;
  21.     position: relative;
  22.     z-index: 1;
  23. }
  24. div#content-inner {
  25.     padding: 100px 0 50px;
  26. }
  27. div#footer {
  28.     width: 100%;
  29.     height: 50px;
  30.     position: absolute;
  31.     bottom: 0;
  32.     right: 16px;    /* スクロールバー幅 */
  33.     z-index: 2;
  34.     background: #fff;
  35. }
  36. div#header h1,div#header p {
  37.     margin-left: 16px;
  38. div#footer p {
  39.     margin-left: 16px;
  40. }

ポイントとなるのは強調部分です。
以下、解説していきます。

まずは2,7,22行目の「height:100%」ですが、htmlとbodyの双方にも指定してやることで、高さ100%のボックスを作り出しています。
(これは標準準拠、後方互換の両モードで同様の表示を得る為です)

次にhtmlとbodyに「overflow:hidden」を指定してスクロールバーを消します。
実際に表示されるスクロールバーは、コンテンツボックスに指定した「overflow:auto」で出現させます。(23行目)

後はヘッダーとフッターの両ボックスをそれぞれ上部と下部に絶対配置させるのですが、注意点があります。
それは16行目と37行目で指定しているように、スクロールバーの幅分左にずらす必要があるということです。

これはスクロールバーが隠れてしまうのを防ぐ為ですが、詳細はサンプルの中で説明していますので、そちらを参照して下さい。

さらに、ヘッダーとフッターにはz-indexで前面に配置されるよう、レイヤーの重なり順を指定します。(17行目と38行目)

最後の注意点として、ヘッダーとフッターそれぞれに指定している背景があります。
この背景指定を抜かしてしまうと、ヘッダーとコンテンツ(フッターとコンテンツも)が重なり合って見えるので、必ず指定して下さい。

以上で縦分割の擬似フレームそのものは完成しますが、div#contents-innerにpadding(marginでも可)を指定(29行目)しないとコンテンツボックス内上部にある要素がヘッダーボックスの裏に隠れたままになってしまいます。

また、42~47行目の指定に関しては、ヘッダーとフッターの両ボックスを左へずらしたので内包要素を右へずらし直して元の位置に戻しているだけです。

その他、24~25行目の指定は、z-indexによる重なり順を指定する為に「position:relative」、「z-index:1」としていますが、無くても支障はないと思います。

その他詳細については縦分割の擬似フレームサンプルをご覧下さい。

【関連記事】
スポンサーサイト
CM:4  |  TB:0  | 

<< prev

<< 2006/06

2006/08 >>

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。