電子書籍の厳選無料作品が豊富！

スタイルシートのpositionについて

解決済

  • 質問者：dasry
  • 質問日時：
  • 回答数：2件

久しぶりの投稿となります。

まだまだ未熟なのですがスタイルシートでデザインし、それを使ってブログにする。ということを考えています

例えば
#blog{border:inset 10px #000000;
width:500px; height:100px;
background-color:#FFFFFF;
position:absolute;
top:100px; left:200px;
}

こんな感じでHTMLに組み込むと横幅500px縦100pxの上から100px、左から200pxの位置にある
枠で囲った表が出ると思うのですが、ここまではいいのです。

ここで文字を入れて過度に改行すると枠も自動的に伸びますよね？
つまり縦100pxを超える文字列を記述したときなどです。
これもいいのです。

ブログですから当然記事も2つ以上一つのページに表示することになるので
#blog2{border:inset 10px #000000;
width:500px; height:100px;
background-color:#FFFFFF;
position:absolute;
top:300px; left:200px;
}

とすれば#blogは上から100pxの高さで高さが100pxの枠が表示されると思うので#blog2は#blogの100px下に同じ条件で現れると思います。
これもいいのですが、#blogで100pxを超えて300pxの高さになる文章を書いたとします。

そうなると#blog2の上にかぶさってしまいますよね？
そうならないためにはどうしたらいいのでしょうか。。。
固定でいつも上の記事(#blog)の100px下。という感じに出来ないでしょうか？
出来るならば4つくらい記事を書いても記事と記事との間にスペースが生まれるのでいいなぁと思ったのですが。。。
こうなると#blog(記事の一番目)の100px下に#blog2(記事の二番目)、その下100pxに#blog3(記事の3番目)さらにその下に#blog4(記事の四番目)というように。

説明がよくわからないと思うのでどのようにしたいか伝わらなかった場合どんどんお申し付けください。

よろしくお願いします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

先ほど書いたコメント


ＣＳＳについて　初心者です。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に使えない。

この回答への補足

ありがとうございます。

初歩的なのですがブロックの祖先というのはどのようなものでしょうか？一番外枠ということでしょうか？
自分自身というのは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>

記述方法が違うのでしょうか・・・

補足日時：2009/02/11 02:46
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

≫ブロックの祖先というのはどのようなものでしょうか？


たとえば、
<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が配置されるということでしょうか？


何度も申し訳ないのですがご回答よろしくお願いします

補足日時：2009/02/11 17:59
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報