- ベストアンサー
ボックスについて質問
aky_nilの回答
- aky_nil
- ベストアンサー率46% (94/203)
どちらも書かれている通りで正解です。 恐らくその解釈で誤解は無いと思います。 何かの試験をやるのではないなら、感覚で理解してしまってもいいと思います。 ページを作るときには、そこまで厳密に「ボックスモデルがどうこう・・・」なんて考えたりはしませんから。 ボックスは箱本体（背景指定で可視）、コンテンツはそこに入れる文字や写真など、ボーダーは外枠（表示も可能）、 パッティングはコンテンツと枠との余白、マージンは隣のボックスやページの端との間隔。 これだけわかれば十分です。
関連するQ&A
- imgの下に余白が出来てしまう
1週間位悩んでいますが、わかりません。 どなたか助けてください。 下のようなHTMLを書いています。 <table border="0" cellspacing="0" cellpadding="0"> <tr><td><img src="img/head.bmp" border="0"></td></tr> </table> で、画像の上下左右に余白が出来ると困るのですが、 下側だけに3～4dot程度の余白が出来てしまいます。 ちなみに、画像のサイズは762x63dotです。 試しに <tr height="90"><th valign="bottom"> <img border="1" ... とやると、画像がテーブルの中で下の方に配置されますが、やっぱり下に3～4dot程度の余白ができます。 また、余白はimgのborderの外側にあります。 どうか、宜しくお願いいたします。
- ベストアンサー
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSで画像の横に余計な余白が・・・
質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
- 締切済み
- HTML
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- divで作成したボックスに背景画像がうまく適用させられない。余計な余白ができてしまう。
divで作成したボックスに背景画像がうまく適用させられません。余計な余白ができてしまいます。 例えば、以下のサイトの左側のメニュー欄「資料請求・お見積もり」のような枠をボックスに付けたいのです。 http://www.dai-ichi-life.co.jp/examine/search/index.html それには、 <div>○○</div>上用 <div>○○</div>真ん中用 <div>○○</div>下用 のようにボックスを三つに分け、それぞれ上用の背景画像、真ん中用の背景画像、下用の背景画像を適用して作成しました。 しかし、一番上のdivだけ画像を適用すると、必ず下に数ピクセルの余白ができてしまうのです。 .box-top { height: 7px;←画像の高さ width: 200px;←画像の幅 background-image: url(images/r-menu-box-top.jpg); background-repeat: no-repeat; margin: 0px; padding: 0px; } このようにマージンとパディングをゼロにしても数ピクセル余白が下に出ます。 なぜでしょう。
- ベストアンサー
- HTML
- 画像をボックスの中心に位置付けたい…
ネットで調べていくつかのパターンを試してみましたが、 vertical-align:middle;が全然かかりません。。。 同じボックスをいくつも作ってその中に様々なサイズの画像を配置したいのです。 .bb_box{ width:210px; height:90px; display:table-cell; text-align:center; vertical-align:middle; layout-grid-line:90px; } .b_img{ vertical-align:middle; } <div class="bb_box"><img src="○○○" alt="○○" width="91" height="33" border="0" class="b_img" /></div> 間違い箇所がたくさんあるかと思いますがご教示ください。よろしくお願いいたします。
- ベストアンサー
- CSS
- CSS 入れ子になった子要素のmargin-top
添付画像の上図のように、入れ子になっている子要素のmargin-topを指定すると、下図のように親ボックスも一緒に指定したpx分動いてしまうのは「上下マージンの相殺」になるのでしょうか？ この場合どのmarginとどのmarginが相殺されてこうなるのか初心者にわかりやすく教えていただけないでしょうか？？ 外側のボックスにpadding又はborderを設定する必要があるみたいですが、いまいち理解できません。 どうかよろしくお願い致します。
- 締切済み
- CSS
- CSSでテーブルとボックスをセンタリング出来ない
現在、ホームページを試験的に、試しています。 ページについて、お聞きしたいと思います。 (1)このページの上部にある、「 シルバー背景色のテーブル 」 と、最下部にある、「 ボックス 」 だけ、何故か、センタリング出来ません。 (2)最下部にある「 ボックス 」 の中に、width="780"height="300"のimgを入れてみましたが、CSSで、下記のように、 div#box1{ background-color:#c0c0c0; border:green 5px inset; width:780px; height:300px; margin:100px ; padding:0px 0px 0px 0px; } と記載したにもかかわらず、ボックス内に収まりそうなIMGが、添付画像のように、何故か下にずれてしまっています。 これをぴったり収めることは、可能なのでしょうか？ 詳しい方がいましたら、どこが原因なのか、教えていただきたいと思います。 よろしくお願いいたします。
- ベストアンサー
- ブラウザ
- テーブル内に画像を表示したい。
テーブル内に画像を1枚表示したいです。 下記のようにIMGタグを用いると、画像が表示されますが、 横幅が100％の時の大きさで枠が表示 されます。横に余白があります。 この余白を無くして、テーブルの枠線が画像をピッタリ 囲む様にしたいです。 どなたか、ご教授願います。初心者なので詳しくお願い します。 ---------------------------------------------- <table border=1> <tr> <td > <img src='./test_size/image2.jpg' width='50%' > </td> </tr> </table>
- ベストアンサー
- HTML
- 外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい 添付画像のようなコンテンツを作成しています。 外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。 このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？ 高さをautoですとただの棒のようになってしまい、ダメでした。 どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML