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

質問

最近CSSを勉強し始めました！絶対配置のabsoluteに感動です！
あれさえあれば、margin・padding・floatとかいらない気がしました。z-indexを使えば、レイヤーも意識できるし、イラレやフォトショで作る複雑なビジュアルもできそうな気がしてます。なのに、何でやはり主体はmargin・padding・floatでレイアウトを組むのでしょうか？

また、marginで余白を開けて位置を設定するのと、
相対配置のrelativeで位置設定するのとの違いも、よくわかりません。

いろいろググってみたのですが、各々のプロパティーの機能は理解できても、使い分けの部分で、よくわからないままだったりします。

誰か、教えて頂けないでしょうか？
CSS始めて、自分と同じ事思ってる人もいなくはないと感じてて…

回答No.5

noname#66720 · ベストアンサー

私もあまりposition:absolute;だけでは組みたくないですね。
例えば絶対配置の最大のデメリットは幅を固定しないといけないことなので、ブラウザを最大化せずにウインドウで開いてる時などにスクロールバーが出てきます。
あと、absoluteを使いすぎるとページが重くなりがちです。

私が絶対配置を使うときは、通常のフローから取り除いて要素を重ねるときか、htmlの下のほうにマークアップしたナビゲーションを上に配置するとき、あとはポップアップのときぐらいですね。

＞marginで余白を開けて位置を設定するのと、
相対配置のrelativeで位置設定するのとの違い
marginは周りの要素の影響を受けたり、逆に与えたりします。
よくあるのはマージンの相殺で、普通の文章の見栄えを整えるときに融通がききます。
positionは配置、marginは余白が目的なので、お互いに同じような動作をすることもありますが基本的には全く別物です。
この手の違いはデザインを形にしていく段階でわかってくると思いますよ。

今のところ基本的なレイアウトは、htmlのマークアップ順とfloatで作るほうが安定していると思いますよ。

お礼

とても親身でわかりやすいアドバイス本当にありがとうございます！
すごく説得力がある説明で、感動してしまう程わかりやすかったです！

＞例えば絶対配置の最大のデメリットは幅を固定しないといけないことので、ブラウザを最大化せずにウインドウで開いてる時などにスクロールバーが出てきます。

→こういうデメリットがあったのですね。最大化しないと見切れてしまう訳ですね…なるほど。ホント、実際に試さないとわからない事なんだなと思いました。いろいろ実験してみたいと思います！

＞positionは配置、marginは余白が目的なので、お互いに同じような動作をすることもありますが基本的には全く別物です。
この手の違いはデザインを形にしていく段階でわかってくると思いますよ。

→やはりコーディングしてく実践の中で、いろいろ使い分けてく内に差に気付く感じなのですね。「positionは配置、marginは余白」の違いがわかれるように、もっといろいろサイトを組んでバリバリやってこうと思いました！

回答No.7

tenderfeel

>あれさえあれば、margin・padding・floatとかいらない気がしました。z-indexを使えば、レイヤーも意識できるし、イラレやフォトショで作る複雑なビジュアルもできそうな気がしてます。

これが簡単に出来るのがホームページビルダーの「どこでも配置モード」
IE以外で見ると崩壊する（重なりまくってる）サイトは大抵これです。
positionプロパティは一見簡単そうに見えて、色々なブラウザに対応させようとすると途端に難しくなります。
でも上手く使うことが出来れば大変便利なプロパティです。

>何でmargin・padding・floatでレイアウトを組むの?

どんな環境で見てもだいたい同じように見えるようにするため、です。
Webサイト最大の目的は「コンテンツを見てもらう」ことなので、
作る段階で人を選ぶのは、自らアクセス数を削ってるのと同じことです。

お礼

ご丁寧に温かいアドバイス本当にありがとうございました！
心から疑問点が納得でき解決できました。とても参考になりました！dreamweaverやCSSの参考本じゃ学べない事だと思いました。IE以外で見ると崩壊する（重なりまくってる）というデメリットがあるのですね。今までposition全然使ったことなかったので、いろいろ実験してみます！あとホームページビルダー使ったことなかったので、「どこでも配置モード」も初めて知りました！やはりmargin・padding・floatで組む理由は「どんな環境で見てもだいたい同じように見えるようにするため」だったのですね。一行で端的に理解できちゃいました！あと個人的に「Webサイト最大の目的はコンテンツを見てもらうことなので～」の最後のアドバイスに感動しました。人を選ぶサイトより選んでもらえるサイトを作れるように私も頑張ります！

回答No.6

steel_gray

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

お礼

とてもわかりやすいご説明本当ありがとうございます！
「その下に配置された他のブロックがあれば重なってしまう」というのがデメリットな訳なんですね。実際にいろいろ組んで使い分けていかないと心から理解はできないのですが、floatでしか組めないレイアウトとpositionでしか組めないレイアウトの違いが少しわかった気がします！ありがとうございました！また何度かこの書き込みを読み替えしてソース組んでて混乱した時に参考にさせて頂きます！本当ありがとうございました！

回答No.4

神崎 渉瑠（@taloo）

floatは、ウインドウサイズの幅が狭いときには縦に並べ、広いときは横に並べて、
余白を有効に使えるようにするためのものです。

position:absolute、relativeは、
positionを使わない要素との配置関係をブラウザに任せると言うことができません。
本文の文字数、行数が不明な場合、内容に合わせて自由にheightが変化し、フッタなどもそれに合わせて上下するようなレイアウトでは、floatでないと作れないと思います。

ですが、フルFlashサイトのようなレイアウト、
たとえばブラウザウインドウのスクロールバーを使わず、
要素ごとにスクロールする<div style="height:300px;overflow:scroll">のような表示にして、
その下にフッタを表示するなどなら、
position:absoluteで問題はないと思います。

こういうレイアウトはかなり個性が出ますので、一般的なデザインサンプルを参考にして作ることはできないと思います。
また、個性のあるデザインは、時として嫌われる原因にもなり得ると思います。

position:absoluteでなければできない文書構造とレイアウトもありますので、
ある程度作っていけば、何ができて何ができないか、メリットデメリットもわかってくると思います。

回答No.3

steel_gray

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

お礼

温かいアドバイスありがとうございます！
absoluteでもwidthだけ指定して、heightを指定しなければ、
文字量は内容量に応じて、下に伸びてってくれたりとかはしなかった
かな…うーん…実験してみます。ありがとうございます！

回答No.2

oka5130

個人的な意見ですが、absolute と z-index だけでレイアウトを組むなんて
面倒なことはやりたくないですね。

一度、absolute と z-index だけでページを作成してみてはいかがでしょうか？

お礼

アドバイス、ありがとうございます！
そうですよね、まずは実験あるのみでした！スイマセン！
！試す前にデメリットを知れた上で、できたらスゴイ嬉しかった感じでした。ありがとうございます！

回答No.1

snowize

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

お礼

親身なアドバイスありがとうございます！
そうですよね、どのソースのCSS見てもmargin・padding・floatで基本組まれてて、ちょっとしたとこにposition指定がされてて、それには違いと理由が必ずあると感じてました。さらに、いろいろ調べてみます。