にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

ページ上部からの指定位置に絶対配置するCSS [テーブル,]

HTMLに記述した内容は、基本的には上から下に向かって順番に表示されます。段組レイアウトを作れば横方向に並べることもできますが、それでも全体としては「上から下へ順番に表示」される点に変わりはありません。

しかし、スタイルシートを使えば、ある特定のボックスを「通常の表示位置」から完全に分離して、望みのままの位置に(浮かせて)表示させることもできます。例えば、今見ているこのページでもその「絶対配置」の装飾を使って、(PC環境などの広い画面で閲覧した場合に限りますが)ページの右上に検索ボックスを表示させています。ページ右上の検索ボックスは、かなり「ページ上部」に表示されてはいますが、HTMLソースではかなり下の方に記述されています。

この「絶対配置」の活用方法としては……

  • あまり重要ではない項目をページの上部などに配置したい場合
  • 複雑なレイアウトを作らずに、何かを特定の位置に配置したい場合

……などが考えられるでしょう。
「検索ボックス」とか「アクセスカウンタ」とか「ただの飾り」のように、「コンテンツの重要度は低い」ものの「配置は上部にしたい」ものの表示などに適している気がします。

特定の要素を、絶対的な位置に表示させるには

さて、あるボックスをページ上の任意の位置に絶対配置するには、例えば以下のようにCSSソースを記述します。

div.fbox {
   position: absolute;
   top: 10px;
   right: 30px;
}

上記のスタイルシートを使うと、class名が「fbox」のdiv要素全体が、(本来表示される位置から離れて)ページの右上に表示されます。具体的な位置は、ウェブページ自体の上端から10ピクセル・右端から30ピクセルの位置です。

上記のようにpositionプロパティに値「absolute」を指定すると、その要素は本来表示される位置から離れて、任意の位置に表示できるようになります。具体的な表示位置は、top・right・bottom・left各プロパティを組み合わせて指定します。説明するまでもないかも知れませんが、それぞれは以下の意味です。

  • topプロパティ: 上端からの距離を指定
  • bottomプロパティ: 下端からの距離を指定
  • leftプロパティ: 左端からの距離を指定
  • rightプロパティ: 右端からの距離を指定

この4つのプロパティのうち2つを使って、左上・右上・左下・右下からの距離を指定できます。先ほどの例では、topプロパティとrightプロパティを使っているので、「右上」からの距離を指定したことになります。

なお、「右上」や「右下」に配置する場合は、ボックスの中身も「右寄せ」にしておく方が良いかも知れません。その場合は、先ほどのスタイルにtext-alignプロパティを加えると良いでしょう。例えば、以下のように。

div.fbox {
   position: absolute;
   top: 10px;
   right: 30px;
   text-align: right;
}

text-alignプロパティは、1行内の文字列の配置を指定するプロパティです。値「right」を指定すると「右寄せ」で表示されます。(※値が「left」なら左寄せ、「center」なら中央寄せになります。)
これで、このボックス(div要素)自体がページの右上に配置され、その中身も右寄せで表示されます。

上から重なる点に注意(※下にあるものが見えなくなる可能性もある)

positionプロパティに値「absolute」を指定して任意の位置に移動させた場合、移動先の位置に元々文字や画像などが存在した場合は、それらに重なって表示されます。floatプロパティなどで左右に寄せた場合とは異なり、元々ある文字が避けて回り込んだりはせず、そのまま重なって表示されます。場合によっては、そこにあった文字が読めなくなることもありますので、配置には注意が必要です。

なお、元々(positionプロパティに値「absolute」を指定しなかった場合に)表示されるハズだった位置には何も表示されません。元々確保されるはずだった空間は確保されず、後続の要素が詰めて表示されます。

ページの端が基準になる……とは限らない

上記の説明では「ウェブページ自体の端」を基準にして配置されると述べましたが、これは必ずしも正確ではありません。なぜなら、positionプロパティに値「absolute」が指定されているブロック(※1)の中で、さらにpositionプロパティに値「absolute」を指定したブロックを作ると、そのブロックは「ページの端」ではなく「外側のブロックの端」を基準にして配置されるからです。

外側にpositionプロパティが指定された要素(※2)が1つも存在しない場合は、html要素が基準になります。それはつまり「ページの端が基準」ということと同じですから、「ページの端からの指定距離」に配置されることになるわけです。

※1:positionプロパティの値に「absolute」が指定されている場合以外でも、positionプロパティの値に「relative」や「fixed」が指定されている場合でも同様。positionプロパティの各値に関しては別の機会に解説します。
※2:positionプロパティの値が「static」なものは除きます。(※値「static」はpositionプロパティのデフォルト値で、本来の位置に表示させる指定です。)

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---