Ads by Google

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

CSSで擬似フレームページ

  • 2006/04/12(Wed)
  • カテゴリー：CSS

今回はフレームページをCSSによって擬似的に再現する方法についてですが、まずはフレームについて少し触れておきます。

以前は多く見られたフレームページですが、今ではわりと少なくなったように思います。
これにはフレームの利用に伴う弊害を嫌う傾向が強まり、その利点と比べて欠点が大きいと判断される風潮が背景にあると思います。

ですが、やはりフレームページのようにメニュー位置を固定して表示する方が閲覧しやすい場合もあります。

そこで、あくまで擬似的にですがCSSを工夫してフレームページを再現してみようと思います。

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

  1. 　・
  2. 　＜略＞
  3. 　・
  4. <body>
  5. <div id="main">
  6. <h1>擬似フレームサンプル</h1>
  7. <p>CSSで擬似フレームを再現。</p>
  8. <h2 id="menu1">メニュー１見出し</h2>
  9. <p>以下、本文続く…</p>
  10. 　・
  11. 　・
  12. 　・
  13. </div>
  14. <div id="navi">
  15. <ul>
  16. <li><a href="#menu1" title="メニュー１">メニュー１</a></li>
  17. <li><a href="#menu2" title="メニュー２">メニュー２</a></li>
  18. <li><a href="#menu3" title="メニュー３">メニュー３</a></li>
  19. </ul>
  20. </div>
  21. </body>
  22. </html>

コンテンツボックスとナビゲーションボックスにそれぞれidを付ける他は特にポイントとなる部分はありません。
各ボックスの記述順も、コンテンツが先でもナビゲーションが先でもかまいません。

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

  1. html {
  2.     _overflow:hidden;
  3. }
  5. body {
  6.     _height:100%;
  7.     _overflow:hidden;
  8. }
  10. div#main {
  11.     margin-left:200px; /* ナビゲーションボックスの幅の分マージンを取る */
  12.     height:100%;
  13.     _overflow:auto;
  14. }
  16. div#navi {
  17.     width:200px;
  18.     height:100%;
  19.     position:fixed;
  20.     _position:absolute;
  21.     top:0px;
  22.     left:0px;
  23. }

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

順序が前後しますが、まずは19行目と20行目のposition設定について。
ここが今回一番のポイントとなる部分です。

まず「position:fixed」をサポートするブラウザ向けに19行目の指定を行い、ナビゲーションボックスを固定します。
次にWinIE用にアンダースコア・ハックを利用して絶対位置でナビゲーションボックスの位置設定を行います。

さらにコンテンツボックス（div#main）に、WinIE用の「overflow:auto」を指定します。（13行目）

後はWinIE用に体裁を整えるように色々と指定してやるだけです。

2行目と7行目の「overflow:hidden」は、スクロールバーの二重表示を回避する為に指定しておきます。
（Win IEではすでに13行目に指定した「overflow:auto」でスクロールバーが表示されるようになっています）

6行目と12行目の「height:100%」は、これを指定しないとWinIEではスクロールができなくなります。（スクロールバー自体が表示されません）

以上でCSSを用いた擬似フレームは完成しますが、18行目の「height:100%」がないと、ナビゲーションボックスが画面下部まで続かず、内容に合わせた高さになってしまいますので、背景などを使ってコンテンツとナビゲーションを区別させて表示させたい時には忘れずに指定した方がいいでしょう。

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

【関連記事】
CM:5  |  TB:0  |  ▲

コメント（-5件）

定年延長と30代,40代の転職Re:Ads by GoogleCSSで擬似フレームページ

定年延長とは、就業規則などで定められている定年の年齢を引き上げることをいう http://ladys.photobycolin.com/
  • 2008/08/26(Tue) 19:46:51
  • by -- No Name -
  • URL
  • [ 編集 ]

Very nice site. I enjoy your webcam the most. Beautiful scenery! Keep up the great work.Re:Ads by GoogleCSSで擬似フレームページ

Very nice site. I enjoy your webcam the most. Beautiful scenery! Keep up the great work.
  • 2008/10/17(Fri) 05:54:22
  • by utube- No Name -
  • URL
  • [ 編集 ]

ロンバート型貸付制度で30代,40代女性の転職Re:Ads by GoogleCSSで擬似フレームページ

ロンバート型貸付制度とは、補完貸付制度のこと http://bousy.catvtestchips.com/
  • 2008/11/07(Fri) 02:15:39
  • by -- No Name -
  • URL
  • [ 編集 ]

精神保健福祉士を目指して30代,40代で転職Re:Ads by GoogleCSSで擬似フレームページ

精神保健福祉士は、精神科に入院した患者の社会復帰を支援する http://rollaway.catvtestchips.com/
  • 2008/11/08(Sat) 01:06:41
  • by -- No Name -
  • URL
  • [ 編集 ]

紫イモと美肌とダイエットRe:Ads by GoogleCSSで擬似フレームページ

紫イモはサツマイモの仲間ですが、イモの中まで紫色をしているのが特徴です http://mahout5.victoriaclippermagazine.com/
  • 2008/11/28(Fri) 00:49:56
  • by -- No Name -
  • URL
  • [ 編集 ]

コメント投稿

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

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

トラックバック（-0件）


<< アンダースコア・ハック(Underscore Hack)

垂直マージンの相殺 >>