センタリングさせるデザインで「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
覚えておきましょう。

- デザイン, 覚え書き

Message コメントをキャンセル

: はてブ（はてなブックマーク）ボタンが新しくなった

1年以上前の記事です。内容が古い可能性があります。どなたかのツイートで知ったので …

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

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

: Windowsキー（Windowsロゴキー）を使った便利なショートカット

1年以上前の記事です。内容が古い可能性があります。先日書いた記事「左下クイック起 …

: 殆どのスマホユーザーの個人情報はFacebookに握られている

そう、それがシャドープロファイルと言われているものです。
そして怖いのはこのシャドープロファイル、Facebookアカウントを作ったことのない人のものまで作られているとのことです。

あるFacebookユーザーの連絡先にあなたの個人情報が書かれていたら注意。
その方がFacebookに連絡先へのアクセスを許可していたらあなたがFacebookをやっていなくてもアウトです。

ではどうやったら防げるのか？
最近ではFacebookアプリがプリインストールされているスマホ（スマートフォン）も多いのでほぼ防ぐことは不可能でしょうね。

つまり、

過去にFacebookのアカウントを作ったことがなく、Facebookを利用している人とアドレスなどの交換をしていないという場合のみ「あなたのシャドープロファイルは作られていません」

とのこと。
Facebookのアカウントを作ったことがない人は結構いるんじゃないかと思います。
ただ、Facebookを利用している人とアドレス交換をしていない人なんて殆どいないんじゃないでしょうか？
そもそも、その人がFacebookをやっているのかどうか調べてアドレス交換するなんてことできないでしょうし。。

これから、こういった情報が一般的になってくると、自分のようにFacebookやってる感を前面に出している人なんかは逆に、嫌厭されてしまうような時代がきてしまうのかもしれません。
でもね。
結局は架空請求や先日被害にあった債権回収詐欺等、それを使う悪いやつがいなければ別に個人情報何ら問題ないんですよね。
だって、かつては電話帳（ハローページ）に普通に電話番号が載っていた時代があるんですから。
嫌な時代になっちゃいましたねぇ。。

あとはFacebookの技術を信じて、そういった悪い輩に個人情報が流れないようにしてもらうしかないですね。
よく、「あとは神のみぞ知る」なんてこと言うことがありますが、Facebookもそういう意味では神の領域に入りつつあるのでしょうか？
人間が神の領域に足を踏み入れるとどうなってしまうのか？　注目して行きましょう。

: 知らん間に圧縮形式LZH（LHA）が使っちゃいけないことになっていた

1年以上前の記事です。内容が古い可能性があります。今となってはZIPがスタンダー …

: livedoor Readerで購読のRSSを「Byline」で読む方法

1年以上前の記事です。内容が古い可能性があります。ツイッターで以下のようにつぶや …

: 広告サイズによるAdsense及びAmazonアフィリエイト収益の考察【最終章】

1年以上前の記事です。内容が古い可能性があります。今まで何度か検証してきた広告サ …

: Adsenseの効果と料金

1年以上前の記事です。内容が古い可能性があります。個人でAdsense広告を出し …

: 殆どフィッシング詐欺のアドセンス（アドワーズ）広告は非表示にしてしまおう。その方法（手順）

1年以上前の記事です。内容が古い可能性があります。まずはこちらのサイトを見てみて …

: アメブロ（アメーバブログ）にzenbackを導入する方法

1年以上前の記事です。内容が古い可能性があります。zenbackに関してはソース …

PREV: 2010熊谷うちわ祭まとめ #2
NEXT: 2010年7月のヒットキーワードとヒットページ

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

アドセンス広告メイン

Message コメントをキャンセル

関連記事

はてブ（はてなブックマーク）ボタンが新しくなった

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

Windowsキー（Windowsロゴキー）を使った便利なショートカット

殆どのスマホユーザーの個人情報はFacebookに握られている

知らん間に圧縮形式LZH（LHA）が使っちゃいけないことになっていた

livedoor Readerで購読のRSSを「Byline」で読む方法

広告サイズによるAdsense及びAmazonアフィリエイト収益の考察【最終章】

Adsenseの効果と料金

殆どフィッシング詐欺のアドセンス（アドワーズ）広告は非表示にしてしまおう。その方法（手順）

アメブロ（アメーバブログ）にzenbackを導入する方法