- ベストアンサー
positionについての質問
- positionについての質問です。box内にbox2を配置する際、子要素のboxにはrelativeかabsoluteを指定するのが良いでしょうか？
- relativeを指定した場合とabsoluteを指定した場合、表示にどのような違いがあるのか教えてください。
- positionに関する質問です。box内の配置について詳しく知りたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTML次第・・ 例えば、本文中にサブ項目があるような場合 <body> <header><h1>見出し</h1></header> <section> <h2>本文</h2> <section><h3>項目</h3></section> <nav></nav> </section> <footer><h2>文書情報</h2></footer> HTML4.01だと <body> <div class="header"><h1>見出し</h1></div> <div class="section"> <h2>本文</h2> <div class="section"><h3>項目</h3></div> <div class="nav"></div> </div> <div class="footer"><h2>文書情報</h2></div> のようになっているとします。 ・DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) ・HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) この時に relativeは、それに含まれるブロックに対しての位置や配置の基準とされます。言い換えると、それに含まれる要素はstatic以外の直近の先祖であるブロックの内辺を参照します。 [HTML5] section{ width:80%;margin:0 auto; min-height:300px; background-color:yellow; position:relative; /* この有無で次の位置が変わる */ } section nav{ position:absolute; top:0;left:0;height:100%;width:20%; background-color:lime; } section section, section h2{ margin:0 0 0 20%;width:auto; min-height:0; } [HTML4] div.section{ width:80%;margin:0 auto; background-color:yellow; min-height:300px; position:relative; /* この有無で次の位置が変わる */ } div.section div.nav{ position:absolute; top:0;left:0;height:100%;width:20%; background-color:lime; } div.section div.section, div.section h2{ margin:0 0 0 20%;width:auto; min-height:0; } absoluteだと、その要素は存在しなかったように扱われて続く要素が配置されます。 relativeだと、元の位置に存在したままのように後続の要素が扱われます。 staticではないですから、それに含まれる要素はその位置やサイズを基準にします。 どれを使うかは、どのようにデザインするかで決定します。HTMLには本来文書構造しか書かれていないので、スタイルシートでデザインを変える時にどちらを使うかを都度考慮すれば良いです。複数の代替スタイルシートを使用する場合とか、印刷用スタイルシートと違うとか・・ 上記のnav(ナビゲーション)の配置の場合、sectionの位置を基準にしたければsectionにrelativeを指定しますし、ウィンドを基準にする場合は指定しない(staticにする)。 ※余計なことかもしれませんが、#box1とかのclass,id名じゃ、スタイルシートを書くときや将来のメンテナンスで困りますよ。section nav{}だと、HTML見なくてもsection(本文)中のnav(ナビゲーション)だと分かるので、HTML見なくてもスタイルシートかけますし、スタイルシートに関係なく本文の記事の修正ができる。 ※positionの扱いはここで説明しきれる量ではありません。仕様書を確認しましょう。詳しく正確にすべて書かれています。
その他の回答 (2)
- play_with_you
- ベストアンサー率37% (112/301)
#1です。 提示したURLのサイトは見てくれてますか？ ＞親box内で自由に配置したいです 「自由に配置」するだけならどちらでもできます。「本来の位置」を基準にするのがrelativeで「親要素の左上」を基準にするのがabsoluteですから、状況に応じて使い分けてください。 難しいなら、リンク先で言う「relative(absolute)とabsoluteの組み合わせ」パターンを使うといいです。外側のボックスの左上が基準点になるので調整がしやすいと思います。 ＞実際にやってみたら、位置は同じように見えましたが ＞relativeとabsoluteでは位置が違ってくるかもしれないと思い それはたまたまです。これもリンク先サイトにありますが、relativeでは「本来配置されるスペース」がキープされます。だから親要素や前後の要素のスタイルによっては同じになりません。 繰り返しになりますが、どちらを使用するかの基準は「あなたがどうしたいか」です。 上記で説明した「基準点」「本来のスペース」の違いを理解したうえで、想定どおりのレイアウトになるほうを使ってください。 ＞どうゆうIDの書き方がわかりやすいでしょうか？ ×ゆう ○いう #2の方とは違い、本来はこんなIDじゃないというのは分かってます。 ただ、文章内で「box」という言葉を使うのなら例のソースで「box」というIDを使うと紛らわしいよ、ということです。 「out」「in」にするとか、それこそ「box1」「box2」でもいいので、紛らわしくなければなんでもかまいません。 ちなみに、#2の回答は長いしごちゃごちゃ理屈っぽいけど、言ってることは正しいので、ちゃんと読んだほうがいいですよ。
お礼
回答ありがとうございます さらに実験してみました。すると他の要素がある場合に違いが理解できました 「box1」「box2」今度からわかりやすく書くようにします。
- play_with_you
- ベストアンサー率37% (112/301)
「子要素のbox」ってのは#box2の事ですか？紛らわしいのでそういうIDはたとえ例でもやめてほしかった。 ＞どちらがいいですか？ 「どうしたいか」によるのでそれだけでは答えられません。 ＞表示の違いはありますか? positionプロパティ以外をどうするかによるのでそれだけでは答えられません。基本的には違いは当然あります。 http://www.acky.info/tips/css/00013.html
お礼
>「子要素のbox」ってのは#box2の事ですか？ そうです >「どうしたいか」によるのでそれだけでは答えられません。 親box内で自由に配置したいです 表示の違いは実際にやってみたら、位置は同じように見えましたがもし、親boxの中にこれ以外の他のbox要素がある場合、relativeとabsoluteでは位置が違ってくるかもしれないと思い、質問しました
補足
わかりにくくてすいません どうゆうIDの書き方がわかりやすいでしょうか？
お礼
くわしい回答ありがとうございます。理解できました IE8以下が、がんばってるのでしばらくはHTML4.01で行こうと思います class,id名はわかりやすいものを書くようにします（反省）