REDLINE MAGAZINE | CSSビギナー向け 陥りがちな罠Vol.01REDLINE MAGAZINEトップページへ

すべてのエントリを見る

CSSビギナー向け 陥りがちな罠Vol.01

position:absolute; の位置が合わない!編

『絶対配置うまくいかなーーーい!何よ、コレ。』という方向けのネタ。

個人的な意見だが、フルCSSでのレイアウトをこれから実践しようかという際、大枠のレイアウトやある部分だけのレイアウト問わず、まずはfloatでの左右に分けたコンテンツ配置をしようって人が多いように思う。んでもって少し慣れてきた頃に絶対配置でもそろそろやってみようかって流れになる。(あくまで予想)

そんな際、陥りやすいのが「position:absolute;って絶対的な位置を決めるはずなのになんかうまくいかない」みたいな罠。

左揃えのレイアウトの際はあまり気づかない事も多いのだが、全体を中央揃えのレイアウトにしていると、ページ左上を基点としての位置指定になるのでおかしな表示になったり。 思い通りの位置になる予定がどうにもこうにも狂ってるんですけどーという場合のお話。

結論から言うとそれはabsoluteの「基点」を設定していないからうまくいかないだけ。「基点」=「その絶対配置の基準となる位置」

>>どんな感じかっていうサンプル

CSSを部分的に覚えたりしていると少し足らずの部分が出てくる。
positionプロパティを使いたい場合は必ずrelativeとabsoluteはセットで覚えた方がいい。なぜならよっぽどシンプルな作りでない限り、absoluteはrelativeを必要とするからである。

<< 初心者向けの新カテゴリ作りました。 | 構造文書の大切さ >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/96

コメント (2)

こんばんわ。
こういうお話待ってました!

CSSのレイアウトっていろいろなパターンがあるけど、僕はフロートしかやった事がありません。相対配置とか絶対配置も使えるようになればもっといろんな事ができるんだろうなーと思ってます。この機会にやってみようかな。もっと勉強しなきゃいけないことがたくさんありすぎてなかなか追いつきませんけど(汗)

>ごうさん、こんばんわ。

絶対配置はいろいろと便利ですよー。
複雑なデザインをコーディングする時とかに重宝しています。是非是非やってみてくださいませ(w




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。