ｃｓｓでボックス内にテーブルのような要素を・・・

質問

こんにちは。はじめまして。
CSS超初心者なのですが、バックグラウンド画像を使用して、例えば
外枠を影付き角丸ボックスを作り、さらにそのボックスの中に、
左側に写真、右側に小見出し＆説明文の欄を作りたいのですが、
どうやればいいのか、困っています。（ボックスのサイズは幅500高さ
150くらいのと幅220高さ150くらいの２種類作りたいのです。

cssを１から作成する能力はないので、cssテンプレートサイトなどか
ら、角丸ボックステンプレをダウンロードして使用させてもらって、そ
のボックスの中に無理矢理（？）dl,dt,ddで左右横並びテーブルのよう
なものを作ってみたのですが、ボックスの角丸枠とテーブルの間にもの
すごい余白ができてしまったり、テキストが変に回り込んだりと、思う
ようにレイアウトできません。
なにしろ、様々なcssタグの説明やhtmlタグの説明ホームページなどか
ら、サンプルなどを引用させてもらっているので、当然なのかもしれま
せんが(;_;)すみません・・・。

目標にしている数々のHPを閲覧していると、div要素ですべて配列して
いるものもあって、、やはり自分のしているのは邪道なのかなぁと凹ん
でいます。
外枠ボックスとテーブル（？）の間の余白が調整できないばかりでなく
ボックス内のレイアウトがうまくできなくて困っています。
しかし、どれにしろcssの作成ができないので、途方に暮れています。。。
そんなこんなで、もう数週間パソコンにかじりついて、タグの勉強HPを
見ているんですが、なかなかわかりつらくて。

どうか助けてください。よろしくお願いします。
こんな感じのボックスが作りたい！というのは、あるんですが、他所様
のHPのURLを勝手に記載していいのやらで、わかりづらい文章ですみま
せん。
（記載してもよろしければ、URL書かせていただきます）

回答No.4

abril

ANo.2-3です。補足及びURLの内容を拝見しました。
色々試行錯誤をされた様ですが、とりあえず私のサンプルをベースにされたというサンプル3のみ、検証させて頂きます。

(1)
> <dt><h6>セラピーカード・リーディング</h6></dt>

文法違反がありますね。dtの子要素にh6（ブロック要素）は持てません。また、論理的（意味的）に見ても、dtというのは定義リストの「テーマ」部分を示すものであり、これ自体がいわば後に続くdd（定義リストの「説明」部分）の見出しの様な役割をしているので、ここに更に「見出し」の意味を持つh6が入ってはおかしいです。
おそらく、現在h6に与えられているのと同じ見栄えにしたくてh6を入れてしまったのだと思いますが、であればこの場合は、ここのdtのスタイル自体にh6と同じ見栄えになる様に追加してやればいいだけです。

質問者様のCSS内でのh6のスタイルを追って行くと（…継承が結構入り組んでますね）、最終的にこの箇所で適用されるスタイルとは：

dt {
clear: both;
margin: 0;
padding: 0 15px 15px 15px;
line-height: 1;
background: url(img/h_line.gif) bottom left no-repeat;
font-family: Verdana,"Hiragino Maru Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 100%;
color: #9e4242;
}

となります。が、この中からせっかくの角丸背景ボックスのスタイルを崩してしまう様な指定は取り除いておかねばなりません。
clear、margin、paddingなどについては本来この定義リストで予定しているスタイルの方を優先しなければならいので、残りはフォント・色・背景画像という事になります。ただし、背景画像については既にこのdtには角丸ボックスの上部の画像を割り当ててしまっているので、二重に指定する事はできません。その為に、このh_line.gifという見出しの下に引く飾り罫の様な画像を、どこかbackgroundプロパティがまだ指定されておらず且つ見栄えをそれらしくできる要素に（dtの代わりに）適用してやる工夫が出てきます。それはサンプルCSS内で補足します。

それから、この飾り罫h_line.gifの長さは、480pxだとボックスの実際の描画領域の大きさ一杯なので、見かけ上の描画領域（角丸ボックス画像の内側、480px－左右の余白15px×2＝450px）をはみ出してしまいますので、これは左右を短く450pxにした別の飾り罫画像を用意するべきでしょう。仮にそれを、h_line2.gifとしました。

(2)
> 画像位置を記述した数値を「-10px」にしています。左に寄せたかったからです。これは邪道ですか？

必要に応じてleftプロパティなどにマイナス値を与える事はありますのでその事自体は邪道ではありませんが、今回の場合「画像の位置を0にしているにも関わらず左に余白が多くとられている」様に見えたのは、CSS内で先立つ指定に：

img {
margin: 0 0 0 30px;
vertical-align:bottom;
}

…という、”imgでマークアップした部分全部に対するスタイル指定”がされてしまっており、そのままではこの定義リスト内の画像にもこのスタイルが適用されてしまい、常に左からの余白が30px多くなってしまう為です。ここではこの値をリセットしてやる事が必要です。

(3)
実際のご希望のレイアウトを見ると、テーマ（セミコール見出し）「セラピーカード・リーディング」はレイアウト上も一番上に来て、画像や説明文はその下に続く…という事でしたから、コーディングの順番＝レイアウトの順番、とできるので、ANo.2でのサンプルの様にdd.photoの位置をabsoltueで（コーディングの順番上は先になる）dtより先に持ってくる必要はなくなります。

また、ANo.2でのサンプルの様にスタイルの違うddを2つ持つ必要もなくなりましたので、ddのclassセレクタも不要になります。

駆け足でざっと説明しましたが、以上の点などを踏まえて改良したものが下記になります。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<h3>サンプル3　改良版</h3>

<div class="hoge_parent">
<dl class="hoge_child">
<dt>セラピーカード・リーディング</dt>
<dd>
<img src="img/card_11.gif" width="100" height="114" border="0" alt="セラピーカード" />
<p>ビジョン心理学の第一人者チャック・スペザーノ博士による<strong>セルフセラピーカード</strong>をリーディング。</p>
<p>潜在意識が引き寄せるカードの言葉に「怖いくらい当たる!」「カードに見透かされているようです」と大反響を呼んでいます。</p>
</dd>
</dl>
</div>

※XHTMLではbは非推奨、「強調」するならstrongやemが妥当です。
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
（省略）
div.hoge_parent {
width: 480px;
margin: 15px 35px;
padding-bottom: 15px;
background: url(img/box_bottom.gif) no-repeat left bottom;
}
dl.hoge_child,
dl.hoge_child dt,
dl.hoge_child dd {
margin: 0;
padding: 0;
line-height: 1;※←追加。任意で調整を
}
dl.hoge_child {
width: 480px;
min-height: 150px;
_height: 150px;
background: url(img/box_side.gif) repeat-y;
}
dl.hoge_child dt {
position: relative;※←重ね合わせ（z-index）を併用する為に指定
padding: 15px 15px 0 15px;
background: url(img/box_top.gif) no-repeat left top;
border-bottom: 0;
font-family: Verdana,"Hiragino Maru Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
font-size: 100%;
font-weight: bold;
color: #9e4242;
z-index: 1;※←重ね合わせの順番はこちらが上（ブラウザ側で文字サイズを変更した時などに背景画像h_line2.gifに隠れてしまわない様に）
}
dl.hoge_child dd {
position: relative;※←重ね合わせ（z-index）を併用する為に指定
zoom: 100%;※←clearfix用の指定
margin: -10px 15px 0 15px;※←上部マージンがマイナス値になっているのは、飾り罫h_line2.gifとdtのテキスト「セラピーカード・リーディング」の間を詰める為
padding-top: 30px;※←dd内のテキストが重ならない様に飾り罫h_line2.gifの高さ分の余白をとる
background: url(img/h_line2.gif) top left no-repeat;※←飾り罫h_line2.gif
z-index: 0;※←重ね合わせの順番はこちらが下（背景画像h_line2.gifの上に文字が被さる）
}
dl.hoge_child dd:after {※←clearfix用の指定（子要素imgをフロートさせたので）
height: 0;
visibility: hidden;
content: "";
display: block;
clear: left;
}
dl.hoge_child dd p {※←テキスト部分は子要素pでマークアップ
margin: 0 0 0 120px;※←画像の幅＋余白分、左からのマージンを設定
line-height: 1.4;※←任意で調整を
}
dl.hoge_child dd img {
float: left;
margin: 0;※←説明の(2)を参照、ここでマージンを0にリセット
}
（省略）
----------------------------------------------------------------------

いかがでしょうか？不具合などありましたらおって補足して下さい。

補足

丁寧な回答、本当にありがとうございます。

ご指摘を受けた500px幅の飾り罫を450pxのものに作り変えました。
こちらではWindowsでのＩＥ6.0でしか確認できないのですが
今回は見出しの位置がずれていて、見出し用の飾り罫画像が
反映されません。。。
http://homepage3.nifty.com/kimura/menu/menu.html

目標にしたい画像のURLもページに貼り付けました。
何度も本当にお手数かけます。
お時間の都合のつくときで結構ですので、よろしくお願いします。