新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

LINE(ライン)で友だちをブロック、及び非表示にする方法

1年以上前の記事です。内容が古い可能性があります。こちらの記事の改訂版です。今ま …

金持ちになる考え方をしても何もしなければ金持ちにはなれない

1年以上前の記事です。内容が古い可能性があります。「金持ちになる考え方、貧乏にな …

ツイッター(Twitter)でツイートを読まれたくなければ鍵かけて(ロックして)ブロック

1年以上前の記事です。内容が古い可能性があります。過去に書いた記事シリーズ。今回 …

OpenOffice「Calc」のセルの結合はメニューから

1年以上前の記事です。内容が古い可能性があります。タイトル通り。 表計算ソフト「 …

GIGAZINE(ギガジン)がトラックバックを封印

1年以上前の記事です。内容が古い可能性があります。GIGAZINE(ギガジン)さ …

楽天アフィリエイトは儲かるらしい

1年以上前の記事です。内容が古い可能性があります。アフィリエイトリンクを入れる際 …

普通郵便よりちょっと安いが「ゆうメール」は封筒では送れない

1年以上前の記事です。内容が古い可能性があります。あまり使ったことないとどうして …

ワンクリックアップデートでワードプレス終了。「更新の必要はありません この WordPress のデータベースはすでに最新のものです」と出て先へ進めなくなった時の対処法

1年以上前の記事です。内容が古い可能性があります。いや、ビックリしました。 これ …

エイサーASPIRE ONEのモニターは赤の発色が悪い

1年以上前の記事です。内容が古い可能性があります。タイトルどおりです。 ASPI …

ローリングシャッター歪み(こんにゃく現象)を解決する撮影の方法

1年以上前の記事です。内容が古い可能性があります。以前、当ブログでも紹介したスマ …

血液型オヤジ