新・元地方の中規模印刷会社で苦悩する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つの記事から2つ以上のお店にトラックバックが送れた

1年以上前の記事です。内容が古い可能性があります。先日、「思い出しレビューその4 …

スワイプやピンチアウトってどんな操作?【iPhone操作一覧】

1年以上前の記事です。内容が古い可能性があります。iPhone(アイフォーン)を …

no image
フォトショップが立ち上がらなくなったときの対処法

1年以上前の記事です。内容が古い可能性があります。最近、自宅でフォトショップを開 …

「Windows 7(64bit)」に「Photoshop Elements 2.0」をインストールする方法

1年以上前の記事です。内容が古い可能性があります。生徒さんがパソコンを買い換えま …

SNS(ソーシャルネットワークサービス)のプロフィール写真の服は赤がモテる

1年以上前の記事です。内容が古い可能性があります。青い色は信頼、誠実を感じる。赤 …

WordPress(ワードプレス)で半角スペース付きのタグが使えるようになっていた

1年以上前の記事です。内容が古い可能性があります。これ、ちょっと嬉しいです。 い …

iPhone用ツイッタークライアント「TwitBird」に関して注意すること (6/26追記)

1年以上前の記事です。内容が古い可能性があります。最終的にこれに決まりそうなiP …

「梅雨入り」と「入梅」は違う。入梅は毎年決まってた

1年以上前の記事です。内容が古い可能性があります。これ、知らんかったです。 朝、 …

no image
ウェブ魚拓を拒否する方法

1年以上前の記事です。内容が古い可能性があります。ウェブ魚拓とはサイト情報をキャ …

くの字型の鍵穴でギザギザのある鍵(ディスクシリンダー)が一番ピッキング被害に弱く、板状の金具に凹凸のある鍵(ティンプルシリンダー)が一番強い

1年以上前の記事です。内容が古い可能性があります。ピッキング被害に弱い鍵、強い鍵 …

血液型オヤジ