ページレイアウトに使えるCSSプロパティ

クロスブラウザなレイアウトデザインテクニック 第6回

絶対配置の例

　次に、「絶対配置」の実際のサンプルを見てみましょう。

［リスト8］XHTMLソース／04.html

<h1>position: absolute</h1>
<h2>絶対配置</h2>
<p>「position:absolute」は、親ボックスの位置が基準になります。</p>

　h2に「position: absolute」を適用し、絶対配置を指定します。さらに、「top」「left」プロパティに、それぞれ100pxを指定します。この場合、h2要素は包含ブロックの上辺から100px、左辺から100pxの位置に配置されます。また、絶対配置であるため、後に続くp要素の配置には影響しません。

［リスト9］CSSソース：相対配置の例／04.css

body, h1, h2, p {
  margin: 0;
  padding: 0;
}
h1 {
  color: blue;
  font-size: 50px;
}
h2 {
  position: absolute; /* 絶対配置 */
  top: 100px;
  left: 100px;
  background-color: black;
  color: white;
}

図8：絶対配置の例（左：適用前、右：適用後）

　「position:absolute」の基準位置と配置を示したものが、次の図9になります。

図9：「position:absolute」の基準位置と配置

　このサンプルでは、基準となる位置が分かりやすいように、body、h1、h2、pの各要素に「marign：0」「padding:0」を指定し、ブラウザのデフォルトスタイルをリセットしています。相対配置の場合と同様に、必要に応じて、margin、padding、width、height、line-heightなどの各プロパティを指定すると良いでしょう。

固定配置の例

　最後に、「固定配置」の例を見ていきましょう。

［リスト10］XHTMLソース／05.html

<h1>position: fixed</h1>
<h2>固定配置</h2>
<p>「position:fixed」は、「position:absolute」と同様、親ボックスの位置が基準となります</p>
<p>以下は、スクロールさせるためのサンプルテキストです。～略～</p>

　h2に「position: fixed」を適用し、固定配置を指定します。さらに、「top」「left」プロパティに、それぞれ100pxを指定します。この場合、先の「absolute」の例と同様、h2要素は包含ブロックの上辺から100px、左辺から100pxの位置に配置され、後に続くp要素の配置にも影響しません。ただし、スクロールしても常に一定の位置に固定的に配置されます。

［リスト11］CSSソース：固定配置の例／05.css

body, h1, h2, p {
  margin: 0;
  padding: 0;
}
h1 {
  color: blue;
  font-size: 50px;
}
h2 {
  position: fixed; /* 固定配置 */
  top: 100px;
  left: 100px;
  background-color: black;
  color: white;
}

図10：固定配置の例（左：適用前、右：適用後）

　positionプロパティでは、基準となる位置を押さえておくことがポイントになります。次の表は、それぞれの配置方法の特徴をまとめたものです。

positionプロパティの値と説明

値	説明
static	初期値。特に配置方法を指定しない通常の状態にする。top、right、bottom、leftプロパティを指定しても無効となる。
relative	相対配置。要素本来の位置が基準になる。この後に続くボックスは、このボックスが通常通りに配置されている場合の位置に配置される。
absolute	絶対配置。親ボックス（この要素の親要素以上の上位要素で「static」以外が指定されている要素のうち、最も近い階層の要素。ない場合には、body要素）を基準として配置される。後に続く要素の配置には影響を与えない。
fixed	固定配置。「absolute」同様、親ボックスが基準となる。他の要素の配置には影響を与えない。さらに、スクロールに対しても固定的に配置される。

まとめ

　以上、見てきたように、floatプロパティは、比較的簡単に配置をコントロールすることができるのが特徴です。ただし、positionプロパティのように、細かい位置指定をすることはできません。

　逆に、positionプロパティでは、top、right、bottom、leftの各プロパティと合わせて指定することで、細かい位置調整が可能になるものの、その仕様がやや複雑であったり、ブラウザによって実装方法が異なったりするため、制作者の意図した表示結果にならないといった問題も起こりがちです。

　両方の特徴を踏まえ、単純なレイアウトであれば、floatで、複雑なレイアウトであればpotisionプロパティで、というように、使い分けの工夫をすると良いでしょう。

　さて次回は、本連載のまとめとして、今回紹介したプロパティを活用して、段組レイアウト（マルチカラムレイアウト）を実装していきます。同時に、起こりがちな問題と、その対処方法についても触れる予定です。