ここから本文です

CSSの書き方について教えて下さい。

t3a3m3さん

2012/8/2416:02:57

CSSの書き方について教えて下さい。

こんにちは、CSSを取り入れたHPを作り始めたのですが、分からない事があるので教えて下さい。
例えば、
<div class="soto">
<div class="naka"></div>
<div class="naka"></div>
<div class="naka"></div>
<div class="naka"></div>
</div>
というページがあって
.soto{
width: 620px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
}
.naka{
width: 520px;
height: 50px;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-top-color: #cccccc;
border-left-color: #cccccc;
border-right-color: #cccccc;
border-bottom-color: #cccccc;
}

だったとします。
内側にある四角は何個になるか変動するので、外の高さは指定していません。
この時外枠の下の線が一番上の中枠の上に来るのですが、高さを指定しないときちんと周りを囲ってくれないものなのでしょうか?
あと、例えば図のようにしていて、③の枠が文章なので①の高さを指定していません。
すると④のdivに対するスタイルが①全体に指定されてしまいます。
①の高さを指定すれば問題ありません。
これも文章が入る高さで合わせて欲しいので、高さを指定していないのですが、これも高さを指定しないとだめなのでしょうか?

基本を理解していないので、考え方そのものがおかしいのかもしれませんが、ぜひ教えて下さい。
よろしくお願いします。

div class,naka&amp;quot,div&amp;gt,CCCCCC,soto&amp;quot,SOTO,naka

閲覧数:
155
回答数:
1
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

ycchiechieさん

2012/8/2416:30:35

質問に載っているソースと画像がかみ合っていないのでどのへんをどうわからないのかすこしわかりませんが、
.sotoが1で.nakaが2.3で横並びになっていて、4は質問にあるコードに載っていない部分ということでいいのでしょうか?

その前提で回答しますが、

>この時外枠の下の線が一番上の中枠の上に来るのですが、
一般的に何もしなければ(heightをauto以外に設定、floatを設定などをしなければ)書かれているようにはなりません。
質問に書いていない部分のHTML、CSSが重要です。
現に、質問に載せているソースであれば
>外枠の下の線が一番上の中枠の上に来るのです
はなりません。
最後の.nakaのすぐしたに.sotoのborder-bottomが表示されます。

もし、.nakaに関する部分にfloat:leftなどを使っているのであれば、.sotoにoverflow:autoを追加してください。

質問した人からのコメント

2012/8/24 17:12:27

降参 ありがとうございました!
悩み始めて随分たちますが、いつもなんとなくうまくいっているのかな、という力技でなんとかしてきました。overflow:autoを加えれば良かったのですね。質問は2つ別件でしたので分かりにくくてすみません。でも解決したので感動です。
本当にありがとうございました!!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問や知恵ノートは選択されたID/ニックネームのMy知恵袋で確認できます。