スポンサーサイト

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

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">メニュー1見出し</h2>
  9. <p>以下、本文続く…</p>
  10.  ・
  11.  ・
  12.  ・
  13. </div>
  14. <div id="navi">
  15. <ul>
  16. <li><a href="#menu1" title="メニュー1">メニュー1</a></li>
  17. <li><a href="#menu2" title="メニュー2">メニュー2</a></li>
  18. <li><a href="#menu3" title="メニュー3">メニュー3</a></li>
  19. </ul>
  20. </div>
  21. </body>
  22. </html>

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

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

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

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

順序が前後しますが、まずは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:0  |  TB:0  | 

コメント(-0件)

コメント投稿

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

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

トラックバック(-0件)


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

垂直マージンの相殺 >>

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