擬似フレームについて

  • CSS
  • 現在地

あまりに読みにくかったので、丸々書き直しました。(2011年03月15日)

せっかくこのサイト自体を擬似フレームで構築してみたので、それについての記述をしておきたいと思います。自分でも忘れそうなので。

擬似フレームとは

擬似フレームは、CSS(スタイルシート)で段組みを行い、フレームと同様のレイアウトを再現するものです。

この方法の場合、1つのHTMLファイル内で段組みして分割したように見せるため、フレームのようにコンテンツ部分のみ検索され、レイアウトが崩れたりなどはせず、キチンと1つのページとして表示されます。

ただし、1つのHTMLファイルですから、フレームのような共通メニューが使用できるわけではなく、全ページにメニューのソースが必要なため、作業効率は通常のページと同様です。(あくまで擬似的なものです。)

擬似フレームの作り方

書き直した際に要点まで削除していたので追記しました。(2011年04月12日)

ここでは、<div> を position: fixed; で固定して作成する擬似フレームの簡単な要点について記述しておきます。

  1. まずCSSで、ブラウザによって余白の扱いが違うので、HTMLの各要素に元々ある余白を取り除きます。
    • *{padding: 0; margin: 0;}
  2. 次に、html と body を overflow: hidden; に指定し、高さを 100% に指定します。
    • body,html {overflow: hidden; height: 100%;}

    overflow の値を hidden にするのは、高さや幅が 100% ピッタリに計算されていても、ブラウザによってはスクロールバーが出てしまう場合があるためです。(例えば IE7 ではスクロールできないのに表示される。)

  3. 固定する各ボックスを <div> に id属性を付けて定義して、配置方法を固定位置 (position: fixed;) とします。同じく位置情報 (top,left など) , 高さ(height)・幅(width) , ボックスからはみ出た部分の表示方法 (overflow) もそれぞれ必要に応じて指定します。

    ボックスの高さ・幅をパーセント(%)以外で指定する場合、上下に挟まれるボックスには height を、左右に挟まれるボックスは width を指定せずに、位置情報を指定して可変になるようにしましょう。

  4. 後は、HTML上の <body> の中で <div id="header"> のように各ボックスを記述して、その中に内容を書くことになります。

ただし、IE6ではCSSでの配置方法を設定する position 要素の値 fixed(固定位置)に対応していません。 この対策については、この作成方法での問題点と対処法 に記述しておきます。

それでは、ボックスの高さ・幅をパーセント以外で指定する方法での、擬似フレームのソースを例として記述しておきます。

縦3分割

ヘッダー・コンテンツ・フッターで縦分割した場合のソースです。DTDや文字コードなどの設定は、省いていますので使用する場合は追記してください。

:#header(8em), #main , #footer(45px) による縦3分割(このページのサイドバー無し版)

CSSへの記述(style.css)
  • * {padding: 0;margin: 0;}
  • body,html {overflow: hidden;height: 100%;}
  • #header {position: fixed;top: 0;left: 0;height: 8em;width: 100%;}
  • #main {position: fixed;top: 8em;bottom: 45px;width: 100%;overflow: auto;}
  • #footer {position: fixed;bottom: 0;height: 45px;width: 100%;}
HTMLへの記述
  • <!DOCTYPE>
  • <html>
    • <head>
      • <meta http-equiv="Content-Style-Type" content="text/css" />
      • <title>タイトル</title>
      • <link rel="stylesheet" href="style.css" type="text/css" />
    • </head>
    • <body>
      • <div id="header">ヘッダー</div>
      • <div id="main">本文</div>
      • <div id="footer">フッター</div>
    • </body>
  • </html>

5分割

上の縦3分割の後に、コンテンツ部分からサイドバーとして横に3分割したものです。使い勝手はあまり良くないので、右サイドは削除しつつコンテンツを広げて、4分割にした方がいいかもしれません。

:#header(8em), #main , #footer(45px) による縦3分割をした後に、#main を #contents , #box-a(200px),#box-b(200px)で横3分割したもの。(実際に使用しているものの簡易版

現在は、JavaScript によるスタイルシート切り替えとIE6用の条件付きコメントの兼ね合いから、fixed の部分を absolute で代替しています。

CSSへの記述(style.css)
  • * {padding: 0;margin: 0;}
  • body,html {overflow: hidden;height: 100%;}
  • #header {position: fixed;top: 0;left: 0;height: 8em;width: 100%;}
  • #main {position: fixed;top: 8em;bottom: 45px;width: 100%;overflow: hidden;}
  • #footer {position: fixed;bottom: 0;height: 45px;width: 100%;}
  • #contents {position: absolute;height: 100%;left: 200px;right: 200px;overflow: auto;}
  • #box-a {position: absolute;height: 100%;width: 200px;left: 0;overflow: auto;}
  • #box-b {position: absolute;height: 100%;width: 200px;right: 0;overflow: auto;}
HTMLへの記述
  • <!DOCTYPE>
  • <html>
    • <head>
      • <meta http-equiv="Content-Style-Type" content="text/css" />
      • <title>タイトル</title>
      • <link rel="stylesheet" href="style.css" type="text/css" />
    • </head>
    • <body>
      • <div id="header">ヘッダー</div>
      • <div id="main">
        • <div id="contents">本文</div>
        • <div id="box-a">左バー</div>
        • <div id="box-b">右バー</div>
      • </div>
      • <div id="footer">フッター</div>
    • </body>
  • </html>

なお、実際に使用しているものと書きましたが、私は fc2 の広告の関係から実際には、footer の高さを 20px にして使用しています。(ただこのページには fc2 の広告が表示されてなかったりします。スペースは空けてるはずなのですが。もしかしてURLに frame という文字が入ると付かない?)いつの間にか、入るようになってました。

この作成方法での問題点と対処法

IE6ではCSSの position: fixed; に対応していないため、表示が崩れる。
  1. IE6用にCSS(ie6.css)を作成し、IEの条件付きコメントを使用してIE6にのみ読み込ませるようにする。

    IEの条件付きコメント(Conditional Comments)について

  2. ie6.css にて、position の値を fixed から absolute に変更。
  3. さらにIE6ではバグにより、top を指定すると bottom が効かなくなるため 可変のボックスの高さ・幅の値に expression() 関数を使用して変更。

    擬似フレームをIE6に対応させる

画面表示分しか印刷プレビューで確認できない。
CSSの中で、@media を使用して印刷用のレイアウトを作成する。

CSSによる印刷レイアウトの変更

埋め込み動画などの Flash を使用する場合、<div> に重なったりちらついたりする。
Flash を z-index に対応させるために wmode を使用する。

Flash に重なり順を指定する

Firefox 4 でスクロール中にブロック要素が親ボックスからはみ出る。
ブロック要素の背景色に値を入れる。(これはどうしても直らない場合に行ってください。CSSの記述順次第で直る可能性があります。)

Firefox 4 でブロック要素が重なり順を無視する

大画面で閲覧すると横に長くなり表示が崩れる。
擬似フレーム自体を幅に制限を付けたボックスの中に入れる、または、固定したボックスの中に幅に制限を付けたボックスを置きそこに本文を記述。最後に幅制限のボックスを position: relative; で中央寄せする。

CSSによるボックスの中央寄せ 2

スポンサードリンク

inserted by FC2 system