第13回　文書構造にとらわれない「position」によるレイアウト

「float プロパティ」を使ったレイアウトをCSSレイアウトの基本とするならば、今回はCSSレイアウトのもうひとつの方法である「positionプロパティ」を紹介します。floatプロパティが文書構造の順番を利用しながらブロックを右へ左へと移動するのに対し、このpositionプロパティは文書構造の順番にとらわれない自由なレイアウトがしやすいのが特徴です。
（公開日：2010年2月5日　解説：こもりまさあき）

positionプロパティを使ったレイアウトとは

position プロパティは、HTML文書の情報構造を無視して自由自在に要素のブロックを配置するのに向いています。floatプロパティは文書構造の順番にしたがって、文書内の要素のボックスを右へ左へと移動してレイアウトするスタイルでした。しかし、HTMLの文書構造は必ずしもデザインラフを表現しやすい順番であるとは限りません。ある要素はHTML文書内での重要度が低く一番下に位置しているにも関わらず、デザイナーの仕上げたラフではページ上部に配置されることも考えられます。このようなfloatプロパティだけでのデザインの実装が困難なときに、このpositionプロパティの力が発揮されるのです。

▲floatは文書構造順に積み木を組み立てるようなレイアウト（図左）。positionの場合は、文書構造順を無視して要素の位置をコントロールしやすい（図右）

position を使ったレイアウトはpositionプロパティ自身の取る値と、配置場所を指定するための「top」または「bottom」、「left」または「right」のプロパティの組み合わせによって実現されます。positionプロパティの取る値は、「relative」、「absolute」、「fixed」、「static」の4つが存在します。positionプロパティを使ってレイアウトするためには、この4つの値の特徴をきちんとおさえておきましょう。

positionプロパティの特徴をおさえよう

positionプロパティは、その指定する値によって挙動が変わってきます。この値による違いをきちんとおさえておくことが非常に大事です。以下のソースを用意して値による違いを検証します。

（▼下の画像はクリックすると大きく表示されます。）

▲id「boxA」とid「boxB」を割り当てたdiv要素を用意した

id「boxA」のdiv要素に対し「position: relative」を指定します。あわせて「top: 20px」と「left: 20px」を指定してみましょう。

（▼下の画像はクリックすると大きく表示されます。）

▲セレクタ「div#boxA」に「position: relative;」、「top: 20px;」、「left: 20px;」を追加した

では、id「boxA」のdiv要素を「position: absolute」に変更します。

（▼下の画像はクリックすると大きく表示されます。）

▲セレクタ「div#boxA」を「position: absolute;」に変更した

「position: absolute;」を指定すると、保持されていたboxAのdiv要素のボックスがなくなり、後に続くboxBのdiv要素のブロックがスライドします。つまり、「position: absolute」を指定した場合は、指定した要素が保持していたボックスの大きさが無視されて、あとに続くほかの要素が上にスライドするのです。

positionプロパティによるレイアウトを思い通りに行うには、この「relative」と「absolute」の挙動の違いをしっかり覚えておきましょう。

positionプロパティは、この「relative」と「absolute」以外に「fixed」と「static」の値を取りますが、CSSレイアウトにおいては双方を利用する機会は多くありません。fixedはその名の通り「固定する」という意味で、「absolute」と同じように元々のボックスの大きさが無視されて後の要素がスライドします。このfixedは、top（またはbottom）、left（またはright）プロパティを使って、ブラウザウィンドウ内の特定の位置にボックスを固定します。もうひとつのstaticは「静止する」という意味です。staticは、positionプロパティを指定していないのと同じで何も変化は起きません。

positionプロパティを使うときの注意

ボックスの大きさが保持される「position: relative」とボックスの大きさが無視される「position: absolute」の2つに加えて、top（またはbottom）、left（またはright）プロパティでボックスの表示位置を指定し、サイズやマージンなどを調整することでWebページのレイアウトを行うことは可能です。しかし、これはあまり現実的ではありません。

位置を自由に指定できる点のは都合がよいのですが、使い方を間違えるとかえって意図したレイアウトがしにくくなるという弱点をもっています。例えば、以下のソースを見てみましょう。

（▼下の画像はクリックすると大きく表示されます。）

▲boxAとboxBを内包するid「wrapper」のdiv要素を追加したソース。セレクタ「div#wrapper」には「width: 640px」として横幅の指定だけを行う

boxAとboxBの親要素にあたるid「wrapper」のdiv要素をWebページの外枠と考えてみます。Webページに含まれるコンテンツは必ずしも高さが固定である場合ばかりではありません。positionプロパティは、topやleftといった表示位置のコントロールのためのプロパティを指定した場合、親要素のpositionプロパティの存在を確認します。つまり、ここではid「wrapper」が親に当たるわけですが、ここには何も指定されていないため、さらにその親であるbody要素を基準として要素の位置を決定するため、上図のようなレイアウトになってしまいます。

では、ここで親要素であるid「wrapper」にpositionを指定しましょう。

（▼下の画像はクリックすると大きく表示されます。）

▲セレクタ「div#wrapper」に対して「position: relative」を指定

親要素に「static」以外のpositionプロパティが指定されることで、内包される要素の位置は親要素のボックスを基準に考えられるようになります。これは実際にCSSレイアウトを行う際にもよく利用するテクニックのひとつですが、ここでboxBに対して「position: absolute」を指定した場合に状況は一変します。

（▼下の画像はクリックすると大きく表示されます。）

▲セレクタ「div#boxB」に対して「position: absolute;」を指定

absoluteを指定することで、boxAとboxBがそれまで保持していたボックスの高さがなくなってしまうため、高さの指定のされていないid「wrapper」のボックスの大きさが確保されなくなってしまいます。

このようにpositionのみでレイアウトを行う場合には、指定の仕方を間違えた途端にレイアウトが崩壊するといったことが起こりがちです。ボックスの位置を自由自在に操れるという利点はありますが、positionプロパティにこだわりすぎるのはあまりよくありません。特定のボックスの高さを保持したい場合などは、マージンや余白といったプロパティを駆使した方がよいでしょう。

効果的なpositionプロパティの使い方

前述したようにpositionプロパティは指定を間違えるとレイアウトの崩壊を招きかねません。positionは全体のレイアウトを行うというよりは、個別の要素を任意の位置に移動するといった使い方に適しています。つまり、全体のレイアウトはfloatプロパティを中心に考え、文書構造の順番上どうしても配置のコントロールがしにくい場合などに利用するのがよいでしょう。

以下のソース中にあるid「nav」のul要素は、このままでは必ずページの一番下に表示されてしまいます。

（▼下の画像はクリックすると大きく表示されます。）

▲文書構造順で一番最後に記述されているid「nav」のul要素は、当然ページの最下部に配置される

このul要素を親要素のid「wrapper」のボックス内の右上の位置に配置してみましょう。右上に配置したいと考えた場合に最も適しているのがpositionプロパティです。セレクタ「div#wrapper」にpositionプロパティを指定して基準のボックスとし、セレクタ「ul#nav」に対して、「position: absolute;」とtop、rightのプロパティを指定します。

（▼下の画像はクリックすると大きく表示されます。）

▲セレクタ「div#wrapper」にpositionを指定することにより、内包されているul要素の配置位置の基準となる。「ul#nav」のブロックはボックスの大きさが不要なので、ここでは「position: absolute;」とする。最後に、topとrightプロパティで表示位置をコントロールしている

このように親要素のボックスにpositionを指定して基準となるボックスを決定し、内包される要素に対してpositionで任意の位置に配置するのに適しているのです。top（bottom）やleft（right）のプロパティには、マイナスの値を指定することもできるため、親要素の枠から飛び出したような表現を行うこともできるため表現の幅が広がるでしょう。

positionプロパティは、頭で考えるよりはいろいろ値を変えながら試してみるのがマスターへの近道です。relativeとabsoluteによる挙動の違いをしっかりと覚えて、top（bottom）とleft（right）で要素の位置をコントロールしてみましょう。

Point
・「relative」と「absolute」の違いをしっかりと把握
・「position」だけでのレイアウトは避ける
・どの要素のボックスを基準にするかを考える

（次回につづく）

■バックナンバー
第12回　floatレイアウトのバリエーション
第11回　floatを使った段組レイアウト（3段組）
第10回　floatを使った段組レイアウト（2段組）

こもりまさあき●1972年生まれ。フリーランス。現在は、Webサイト構築関連業務やネットワーク関連業務の傍ら、テクニカルライティング、時にはアーティストのライブ撮影まで本業がわからない感じでの活動が主。近著に「XHTML+CSSデザイン 基本原則、これだけ。」など多数。