- ベストアンサー
スタイルシートのpositionについて
- スタイルシートを使用してデザインしたブログにおいて、positionプロパティを使って要素を配置する方法について質問です。
- 文字を改行すると枠が自動的に伸びる仕組みについて、ブログで記事を表示する際にどのように設定すれば重ならないようにできるかについても知りたいです。
- スタイルシートのpositionプロパティを活用して、ブログの記事を個別に配置する方法について教えてください。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
先ほど書いたコメント ＣＳＳについて 初心者です。positionについて - 教えて！goo ( http://oshiete1.goo.ne.jp/qa4705773.html ) を参考にしてください。 ≫例えば ≫#blog{border:inset 10px #000000; ≫width:500px; height:100px; ≫・・・【中略】・・・ ≫position:absolute; ≫top:100px; left:200px; ≫} ≫こんな感じでHTMLに組み込むと横幅500px縦100pxの上から100px、左から ≫200pxの位置にある枠で囲った表が出ると思うのですが、ここまではいいのです。 違います。あくまでそのブロックの祖先(static以外)を基準にして自分自身を基準にするわけではありません。 ごく単純に ・・・・・・・・ <div class="Article" id="m09021001"> <h1>見出し(2009/02/10)</h1> <p>・・・・・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・・・・・</p> </div> <div class="Article" id="m09021101"> <h1>見出し(2009/02/11)</h1> <p>・・・・・・・・・・・・・・・・・・・・</p> <p>・・・・・・・・・・・・・・・・・・・・</p> </div> に対して div.Article{margin-bottom:100px;} で良い。 ★div.Article+ div.Article{ margin-top:100px;}がよいけど、IEに使えない。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
≫ブロックの祖先というのはどのようなものでしょうか？ たとえば、 <body> <div class="a"> <div class="b"> <div class="c"> <div class="d"> </div> <div class="e"> </div> <div class="f"> </div> </div> <div class="g"> </div> </div> </div> ある場合、ツリー構造は body |-div.a |-div.b |-div.c |-div.d |-div.e |-div.f となります。div.dにとっての祖先は順番に、c(親)、b(祖父母)、a.曾祖父母、body(高祖父母)ですね。 no.1＞そのブロックの祖先(static以外)を基準にして とは、div.dより前のstatic(デフォルト)以外の、div.dを含むブロックはありませんから、bodyを基準にします。 ＞自分自身を基準にするわけではありません。 もし、div.cが、relative,absolute,fixedのstaticで、設定されているとそれが ＞そのブロックの祖先(static以外) となりますから、div.cを基準にして絶対配置されます。 【そのとき、それに続くdiv.eゃdiv.gは、あたかもdiv.dが存在しないように配置されます。】 同様に、div.bにstatic以外が設定してあると、それが基準になります。 ですから、absoluteは無用だと・・言うことです。単純に div.Article{margin-bottom:100px;} だけで済む話・・・
補足
祖先については大体理解できたかと思います。 最終的にはbodyの部分が祖先ということですよね？ そして途中でabsolute等で絶対位置を決めた場合にはそこから祖先として扱うということでしょうか？ また「親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります」 と書いてあるのですが、これもちょっとわからず・・・ (参考URL)http://www.css-lecture.com/log/css/037.html 親ボックスというのは例のように一つ前のことでしょうか (blog.html) <DIV id="a"><A href="略">a </A></DIV> <DIV id="b"><A href="略">b </A></DIV> <DIV id="c"><A href="略">c </A></DIV> <DIV id="d"><A href="略">d </A></DIV> <DIV id="e"><A href="略">e </A></DIV> <DIV id="f"><A href="略">f </A></DIV> <DIV id="g"><A href="略">g </A></DIV> <DIV class="Article" id="blog"> おやすみ </DIV> <DIV class="Article" id="blog2"> おやすみなさい </DIV> (blog.css) .Article{margin-bottom:100px;} #blog{ border:ridge 3px #000000; width:600px; height:100px; padding: 100px 15px 50px; position:absolute; top:160px; left:220px } #blog2{ border:ridge 3px #000000; width:600px; height:100px; padding: 100px 15px 50px; } #blogはabsoluteで設定しているのでおきたい場所に置くことが出来るのですがabsoluteが無用ということがいまいちピンと来ないのです・・・ #blog2は位置を設定していないので左上に来てしまいます。 また上のサンプルでの#blogの親がよくわかりません・・・ 別のスタイルシートでid="a"からid="g"は記しています。 >>もし、div.cが、relative,absolute,fixedのstaticで、設定されているとそれが そのブロックの祖先(static以外) となりますから、div.cを基準にして絶対配置されます。 とのことなのですがabsoluteのstaticやrelativeのstaticのstaticの部分がわかりません。 staticは標準値だったかと思うのですが少し理解力が乏しく。。 >>【そのとき、それに続くdiv.eゃdiv.gは、あたかもdiv.dが存在しないように配置されます。】 というのはdiv.dの配置を無視して後続のdiv.eやdiv.gが配置されるということでしょうか？ 何度も申し訳ないのですがご回答よろしくお願いします
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
補足
ありがとうございます。 初歩的なのですがブロックの祖先というのはどのようなものでしょうか？一番外枠ということでしょうか？ 自分自身というのはabsoluteで設定した位置の事ですよね？ サンプルを試してみたのですが反応がありませんでした。 というのは記述方法がabsoluteでやるのか他のpositionの種類で書くのかよくわからなかったからです。 absoluteでやると、結局マージンの効果が意味がないと思うので違うと思うのですが・・・ (blog.css) #blog{ border:ridge 3px #000000; width:600px; height:100px; 【略】 position:absolute; top:160px; left:220px; } #blog2{ border:ridge 3px #000000; width:600px; height:100px; 【略】 position:absolute; top:650px; left:220px; } (blog.html) <HTML> (略) <HEAD> </HEAD> <BODY> <div class="Article" id="blog"> <h1>見出し(2009/02/10)</h1> <BR> おはよう </div> <div class="Article" id="blog2"> <h1>見出し(2009/02/11)</h1> <BR> おはようございます </div> </BODY> </HTML> 記述方法が違うのでしょうか・・・