absolute だけでCSSレイアウト可能？

Question

最近CSSを勉強し始めました！絶対配置のabsoluteに感動です！
あれさえあれば、margin・padding・floatとかいらない気がしました。z-indexを使えば、レイヤーも意識できるし、イラレやフォトショで作る複雑なビジュアルもできそうな気がしてます。なのに、何でやはり主体はmargin・padding・floatでレイアウトを組むのでしょうか？

また、marginで余白を開けて位置を設定するのと、
相対配置のrelativeで位置設定するのとの違いも、よくわかりません。

いろいろググってみたのですが、各々のプロパティーの機能は理解できても、使い分けの部分で、よくわからないままだったりします。

誰か、教えて頂けないでしょうか？
CSS始めて、自分と同じ事思ってる人もいなくはないと感じてて…

noname#66720 · Accepted Answer

私もあまりposition:absolute;だけでは組みたくないですね。
例えば絶対配置の最大のデメリットは幅を固定しないといけないことなので、ブラウザを最大化せずにウインドウで開いてる時などにスクロールバーが出てきます。
あと、absoluteを使いすぎるとページが重くなりがちです。

私が絶対配置を使うときは、通常のフローから取り除いて要素を重ねるときか、htmlの下のほうにマークアップしたナビゲーションを上に配置するとき、あとはポップアップのときぐらいですね。

＞marginで余白を開けて位置を設定するのと、
相対配置のrelativeで位置設定するのとの違い
marginは周りの要素の影響を受けたり、逆に与えたりします。
よくあるのはマージンの相殺で、普通の文章の見栄えを整えるときに融通がききます。
positionは配置、marginは余白が目的なので、お互いに同じような動作をすることもありますが基本的には全く別物です。
この手の違いはデザインを形にしていく段階でわかってくると思いますよ。

今のところ基本的なレイアウトは、htmlのマークアップ順とfloatで作るほうが安定していると思いますよ。

tenderfeel · Answer

>あれさえあれば、margin・padding・floatとかいらない気がしました。z-indexを使えば、レイヤーも意識できるし、イラレやフォトショで作る複雑なビジュアルもできそうな気がしてます。

これが簡単に出来るのがホームページビルダーの「どこでも配置モード」
IE以外で見ると崩壊する（重なりまくってる）サイトは大抵これです。
positionプロパティは一見簡単そうに見えて、色々なブラウザに対応させようとすると途端に難しくなります。
でも上手く使うことが出来れば大変便利なプロパティです。

>何でmargin・padding・floatでレイアウトを組むの?

どんな環境で見てもだいたい同じように見えるようにするため、です。
Webサイト最大の目的は「コンテンツを見てもらう」ことなので、
作る段階で人を選ぶのは、自らアクセス数を削ってるのと同じことです。

steel_gray · Answer

#3です。
＞文字量は内容量に応じて、下に伸びてってくれたりとかはしなかったかな
確かに高さを指定しなければそのブロック自身は自動で下に伸びます。
しかし、その下に配置された他のブロックがあれば重なってしまうので、再配置が必要になってきます。

taloo · Answer

floatは、ウインドウサイズの幅が狭いときには縦に並べ、広いときは横に並べて、余白を有効に使えるようにするためのものです。 position:absolute、relativeは、 positionを使わない要素との配置関係をブラウザに任せると言うことができません。本文の文字数、行数が不明な場合、内容に合わせて自由にheightが変化し、フッタなどもそれに合わせて上下するようなレイアウトでは、floatでないと作れないと思います。ですが、フルFlashサイトのようなレイアウト、たとえばブラウザウインドウのスクロールバーを使わず、要素ごとにスクロールする

のような表示にして、その下にフッタを表示するなどなら、 position:absoluteで問題はないと思います。こういうレイアウトはかなり個性が出ますので、一般的なデザインサンプルを参考にして作ることはできないと思います。また、個性のあるデザインは、時として嫌われる原因にもなり得ると思います。 position:absoluteでなければできない文書構造とレイアウトもありますので、ある程度作っていけば、何ができて何ができないか、メリットデメリットもわかってくると思います。

steel_gray · Answer

absoluteだけで作成可能かといえば可能です。
ただ、absoluteでガチガチにレイアウトしてしまうと、文章量の変更でCSSまで更新する必要がでてくるのでやりません。

oka5130 · Answer

個人的な意見ですが、absolute と z-index だけでレイアウトを組むなんて
面倒なことはやりたくないですね。

一度、absolute と z-index だけでページを作成してみてはいかがでしょうか？

snowize · Answer

いらなくないからそれぞれ別に用意されてる、と言ってしまえばおしまいなんですけれどもね。
詳しく説明しても構いませんが、質問を読む限りだと本当に初歩の初歩という段階だと思いますので、(X)HTMLと併せてCSSのことをもっと勉強して、それでも納得いかなければ聞いてみればいいんじゃないかなとも思います。どのくらい理解しているのか分かりませんので、下手なことを言って混乱させるのもなんですから。
ささやかなアドバイスとしては、marginやpaddingが分からないと言っている間は、下手にabsoluteだのfloatだのに手を出さない方が理解が早いと思いますよ。

absolute だけでCSSレイアウト可能？

私もあまりposition:absolute;だけでは組みたくないですね。

>あれさえあれば、margin・padding・floatとかいらない気がしました。

#3です。

floatは、ウインドウサイズの幅が狭いときには縦に並べ、広いときは横に並べて、

absoluteだけで作成可能かといえば可能です。

個人的な意見ですが、absolute と z-index だけでレイアウトを組むなんて

いらなくないからそれぞれ別に用意されてる、と言ってしまえばおしまいなんですけれどもね。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング