センタリングさせるデザインで「absolute」が使えない【CSS】

2010/07/31

1年以上前の記事です。内容が古い可能性があります。

先日、CSSでセンタリングさせる方法を説明しました。
実は、この記事は今回の記事のための布石に過ぎなかったりします。

「absolute」（絶対位置指定）はデザインをする上で非常に便利です。
好きな場所にオブジェクト（タグ）を移動させることができますものね。
ただ、センタリングさせたデザインで、その配下にあるオブジェクト（タグ）に対して「absolute」（絶対位置指定）をするとHTML全体を基準にしてしまうため、画面を大きくしたときにレイアウトに崩れが起きてしまうことがあります。
今回説明するのはこれを解決させるための方法。

なんとも過去にはこんな記事も書いてました。
□プルダウンメニューを全体的にセンタリングさせる方法
これも、これから紹介する方法を使えばCSSだけで解決させることができます。

WEB02

さっそく前回のソースを活用してHTMLを作ってみましょう。

まずは、前回のソースをひとつにまとめてHTMLにしてみます。
CSSをリンクファイルでなくHEAD部に書き写せばOK。
ID等が微妙に違っちゃってるのはお許しください。
なお、実際はリンクファイルでも問題ありません。分かりやすくするためにまとめています。
こんな感じ。

つぎに、最上位DIVの配下にDIVを配置し「absolute」で絶対位置指定をします。
なお、今回は簡略化したかったので配下のDIVにID指定はしていません。
こんな感じ。

↑↑ここから上省略↑↑ <title>センタリング＋絶対位置指定</title> <style type="text/css">  </style> </head> <body> <div id="test"> <div>ここがabsolute</div> </div> </body> </html>

この状態でソース上は完成しているように感じます。
が、しかし実際見てみると

□ 上記ソースのHTML
変なところに下位オブジェクトが表示されちゃってるし、ウインドウの広さを変えるとレイアウトにズレが生じてしまいます。

どうすればこの問題が解決するか？
さっそく解答。こんな感じ。

↑↑ここから上省略↑↑ <title>センタリング＋絶対位置指定</title> <style type="text/css">  </style> </head> <body> <div id="test"> <div>absolute</div> </div> </body> </html>

どこが違うか分かりましたか？（太字にしています）
実は「absolute」を入れたDIVではなくその上位に位置するDIV（今回は「ID=”test”」のDIV）に「position: relative」を入れてあげればOK。
これは、上位オブジェクトのpositionをしっかり指定してあげないと。「absolute」がどこを基準にしていいか分からなくなってしまうからのようです。

□ 上記ソースのHTML
覚えておきましょう。

- デザイン, 覚え書き