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>
  10. <div id="contents">
  11. <div id="contents-inner">
  12. <h2>コンテンツ見出し</h2>
  13. <p>以下、本文続く…</p>
  14. 　・
  15. 　・
  16. 　・
  17. </div>
  18. </div>
  20. <div id="footer">
  21. <p>コピーライト等、フッター情報…</p>
  22. </div>
  23. </body>
  24. </html>

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

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

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

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

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

まずは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:9  |  TB:0  |  ▲

コメント（9件）

管理人のみ閲覧できますRe:スポンサーサイトCSSで縦分割の擬似フレームページ

このコメントは管理人のみ閲覧できます
  • 2006/08/26(Sat) 00:51:22
  • by -- No Name -
  • URL
  • [ 編集 ]

管理人のみ閲覧できますRe:スポンサーサイトCSSで縦分割の擬似フレームページ

このコメントは管理人のみ閲覧できます
  • 2008/02/06(Wed) 12:52:53
  • by -- No Name -
  • URL
  • [ 編集 ]

ちょｗｗおまえらｗｗｗｗｗRe:スポンサーサイトCSSで縦分割の擬似フレームページ

相手は一人だと思ってたのに３人もいたからマジびびった(^-^;;
案の定。。３人で俺のてぃんてぃんを奪い合いｗｗｗｗｗｗ
てぃんこ折れるかと思ったよ。。。
きっちり一人４マンずつ回収しましたｗｗｗ
http://copcop.net/galgal/jGKuyUjO/
  • 2008/06/02(Mon) 03:32:55
  • by 幸太- No Name -
  • URL
  • [ 編集 ]

工口ッッッッッッｗｗｗｗｗRe:スポンサーサイトCSSで縦分割の擬似フレームページ

クリちゃんをクリクリしまくってたらすんごい声出しながら
顔面シャワーされちゃったよ(；´Д`)Tシャツ、ぐっしょぐしょになったし！ｗｗ
お返しにたっぷり顔射してやったら、なぜかお礼もらえたお。
金持ち(゜д゜)ウマー
http://111ch.net/chocolate/sQDLHroO/
  • 2008/06/06(Fri) 00:28:17
  • by ハンカチーフ皇子- No Name -
  • URL
  • [ 編集 ]

Η（・∀・）ｲｲ!!Re:スポンサーサイトCSSで縦分割の擬似フレームページ

脱サラしてセっクス三昧の生活を始めたんだけどマジで当たりだったよ！
こないだ１４マンくれた女は、コンニャク５枚使って俺のティンコシゴいた後に全部食べてやんのｗｗｗｗｗｗ
金持ちって変態だらけだなｗｗｗｗｗｗｗ
http://exeair.net/cawaii/4R4vdvGt/
  • 2008/06/08(Sun) 22:01:31
  • by しんや- No Name -
  • URL
  • [ 編集 ]

ナスｗｗｗｗｗｗｗｗRe:スポンサーサイトCSSで縦分割の擬似フレームページ

女の子のオ●ニーをじっくり見たのはじめて(;゜∀゜)=3
彼女いわくオ●ニーにも前戯があるらしく、最初はナスビ入れてたよｗｗｗｗ
やっとバイブ使ったと思ったら一瞬で死ぬほど潮吹いてるしΣ(´Д｀　）ナンジャソリャ
見てるだけで６マンはウマかったわぁ（゜Д゜)y─┛~~
http://jazzye.net/nasukko/xwpPaSdS/
  • 2008/06/16(Mon) 09:30:19
  • by マサマサ- No Name -
  • URL
  • [ 編集 ]

エロコスすぎたー！！！！！Re:スポンサーサイトCSSで縦分割の擬似フレームページ

コスプレでセクロスしたのは生まれて初めての経験だたよ(*´Д`)ハァハァ
コスプレだけでも萌えるのに女が激カワ！！萌え度４００％超えちゃったよｗｗｗｗｗｗｗｗ
次は二人で一緒にやるかわりに報酬は２倍だとさｗｗ喜んでやるよ(*^ー゜)b
http://pinkpag.net/kosupure/lj7hGohB/
  • 2008/06/22(Sun) 02:44:11
  • by ほっしー- No Name -
  • URL
  • [ 編集 ]

はわぁぁぁわわぁあ！！！！Re:スポンサーサイトCSSで縦分割の擬似フレームページ

カメラ持参で来るなんてヤル気ありすぎだろｗｗｗｗｗｗ
俺のチソコずっと撮られてたよ（＾＾；
こういうのは逆ハ×撮りとでも言うんだろうか。。ｗｗ
５マソって約束だったけど、撮らせてあげるかわりに＋５マソ要求したらあっさりОＫしてくれたわヽ(´ー｀)ノ
http://lppulu.net/lovesex/449mW86U/
  • 2008/06/29(Sun) 15:09:51
  • by タラ様- No Name -
  • URL
  • [ 編集 ]

ふぉぉおおおおぉおぉおｗｗｗｗｗRe:スポンサーサイトCSSで縦分割の擬似フレームページ

デ ー トしてНしただけで８ マ ンもらえたーーーー！！！！！
それもフ ェ ラと騎 乗 位だったから俺は寝てただけヽ(´ー｀)ノ
家 賃 代あっさり稼 げ て金 浮いたわぁ�横�ｗｗｗｗｗｗ
http://2O0VuQKxmelulu.net/
  • 2008/07/04(Fri) 04:14:59
  • by ますたー- No Name -
  • URL
  • [ 編集 ]

コメント投稿

コメントフォーム
項目名 記入欄

管理者だけが読めるようにする

トラックバック（0件）


<< 画像ポップアップリンク