新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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

   

  • このエントリーをはてなブックマークに追加

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

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

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

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

WEB02

スポンサーリンク
 

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

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

↑↑ここから上省略↑↑
<title>センタリング+絶対位置指定</title>
<style type="text/css">
<!--
#test {
background-color: #6699FF;
height: 300px;
width: 300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
-->
</style>
</head>
<body>
<div id="test">ここに内容
</div>
</body>
</html>

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

↑↑ここから上省略↑↑
<title>センタリング+絶対位置指定</title>
<style type="text/css">
<!--
#test {
background-color: #6699FF;
height: 300px;
width: 300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#test div {
background-color: #FFCCCC;
margin: 0px;
padding: 0px;
height: 100px;
width: 100px;
position: absolute;
top: 50px;
right: 50px;
}
-->
</style>
</head>
<body>
<div id="test">
<div>ここがabsolute</div>
</div>
</body>
</html>

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

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

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

↑↑ここから上省略↑↑
<title>センタリング+絶対位置指定</title>
<style type="text/css">
<!--
#test {
background-color: #6699FF;
height: 300px;
width: 300px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
}
#test div {
background-color: #FFCCCC;
margin: 0px;
padding: 0px;
height: 100px;
width: 100px;
position: absolute;
top: 50px;
right: 50px;
}
-->
</style>
</head>
<body>
<div id="test">
<div>absolute</div>
</div>
</body>
</html>

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

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

 - デザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

「開く」ダイアログボックスからデスクトップが消えた!復活させる(元に戻す)方法

1年以上前の記事です。内容が古い可能性があります。「開く」ダイアログボックスや「 …

佐々木岳久展「記憶の交錯」@ギャラリーユニグラバス銀座館

1年以上前の記事です。内容が古い可能性があります。知り合いの方が個展を開くことに …

「タービン建屋」とは何のこと?

1年以上前の記事です。内容が古い可能性があります。先の震災で原発事故が起こり、一 …

Window用FTPクライアントソフト「WinSCP」で「.htaccess」を表示させる方法

1年以上前の記事です。内容が古い可能性があります。FFFTPがガンブラーの標的に …

no image
Internet Explorer 7にGoogle maps APIのバグ?

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

気をつけよう。面接官が語る印象を悪くする口癖(場合によっては一発不合格!?)

1年以上前の記事です。内容が古い可能性があります。職業訓練校で講師をやっています …

no image
客とのギャップ

1年以上前の記事です。内容が古い可能性があります。デザインで苦しんでいる。 もの …

念願の佐々木岳久さんの個展に行ってきた

1年以上前の記事です。内容が古い可能性があります。当ブログでも何度か紹介させてい …

no image
オートフィルとオートコレクトとオートコンプリート

1年以上前の記事です。内容が古い可能性があります。P検3級シリーズ。(というのが …

「インクジェット用紙」とは何を指す?

1年以上前の記事です。内容が古い可能性があります。週末行っているパソコン教室で生 …

血液型オヤジ