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

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

  関連記事

「ヒつぶやく」ボタンをTwitter公式のものに変えてみた

1年以上前の記事です。内容が古い可能性があります。当ブログタイトルのすぐ横に「ヒ …

no image
コメントに対しての当ブログの考え

1年以上前の記事です。内容が古い可能性があります。最近コメントもいただけるように …

「食べログ」有料会員の解約方法【docomoのスマホ契約後の有料サービス解約手順】

1年以上前の記事です。内容が古い可能性があります。スマホ契約時に入らされる有料サ …

「JAF(ジャフ)」のツイッターアカウントがつぶやく自動車豆知識がすごく役に立つ

1年以上前の記事です。内容が古い可能性があります。「JAF(ジャフ)」とは「JA …

ステップサーバーでOpenPNE

1年以上前の記事です。内容が古い可能性があります。過去にとんでもないトラブルもあ …

iPhoneユーザーに対してLINE(ライン)で隠しメッセージを送る方法

1年以上前の記事です。内容が古い可能性があります。送り先がiPhoneユーザー限 …

Windowsムービーメーカーで動画を編集してWebに公開 [シリーズ動画#2]

1年以上前の記事です。内容が古い可能性があります。某企業で90分程度のイメージD …

「引用」と「転載」と「無断転載」の違い

1年以上前の記事です。内容が古い可能性があります。以前、引用と転載の違いをまとめ …

no image
cgi(perl)にhtmlを読み込ませる方法

1年以上前の記事です。内容が古い可能性があります。たとえば与えられた変数によって …

no image
タスクマネージャーでプロセスを調べてみた(EeePC編)

1年以上前の記事です。内容が古い可能性があります。図に乗ってもう一つタスクマネー …

血液型オヤジ