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

質問

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

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

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

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

回答No.7

abril · ベストアンサー

ANo.6の補足を拝見しました。

> 目標の形のサンプル
> この画像の左右反転が作りたいのです

…であれば、やはり最初に回答したANo.2のサンプルの方が基本形が同じ（左に画像、右に見出しと説明、見出しと説明は画像の下に回り込まない）なので、あちらの方をベースに改良するのが妥当でしょうか。ただ、ANo.2では見出しの下に飾り罫のないデザインでしたので、やはりANo.3で示したサンプルの時と同様、この見出し用の飾り罫をどこかの要素の背景画像として適用してやる必要がありますね。

適用の仕方ですが、考え方はANo.3でのサンプルと同じで、見出しのテキストをマークアップしているdtの方には既にドロップシャドウ付上部角丸画像のbox_top.gifを背景画像に割り当ててしまっているので、現在背景用のプロパティを指定していないdd.descriptionの方に飾り罫用画像のh_line.gifを、幅を適切な値に短く（理由はわかりますよね？）加工し直した上で：

・backgroundプロパティで指定。描画開始位置は左上（初期値がそうなのでこの指定は省く事も可能）、リピートせず。
・padding-topプロパティでdd内のテキストが重ならない様に飾り罫h_line.gifの高さ分の余白をとる。
・margin-topプロパティにマイナス値を与えて飾り罫h_line.gifとdtのテキスト「セラピーカード・リーディング」の間を詰める。
・position及びz-indexプロパティでdtとの重ね合わせの順番を調整する。

といった感じで修正すれば、ご希望のレイアウトになると思います。ただし、勿論ですがANo.2でのサンプルは、ANo.3のサンプルと違って実際のレイアウトの幅や使用する画像の大きさなどが異なる仮定条件で計算が合う様に作成したバージョンですから、まずはANo.2でのサンプルの各プロパティの値を実際の値に合致する様に計算をし直す方が先ですね（例：div.hoge_parentがwidth: 500px;となっているのをwidth: 480px;に修正…等々）。その再計算がちゃんと辻褄があって、表示がきちんと出来た後で、先に述べた「dd.descriptionの方に飾り罫用画像のh_line.gifを背景画像として適用」する作業を追加して下さい。

週明けまで実際のサンプルを作成して検証する事ができませんので、今回は修正作業のアドバイスのみさせて頂きました。もしそれで上手く行かない様なら、また補足して頂いてもいいのですが、レスは週明け以降になります。

※蛇足ですが、ポイントの発行は質問を締め切った時点でできる様です。下記ガイドにそう書いてありますね。
http://oshiete.goo.ne.jp/ask/guide/question/close.html

お礼

abril様

ありがとうございます。
教えていただいた上記の方法で、試行錯誤してみます。
何度も丁寧なサンプル作成と検証までしていただいて感謝してます。

回答No.6

abril

ANo.4の補足を拝見しました。

今は時間がないのでとりあえず、大きな間違いを。
CSSファイル内に私が補足として付けた、「※←～」という日本語部分は、実際のCSSファイルとして使用する時は削除しなければだめです。あそこにあの様な形で日本語の記述が入ってはいけないからです。そのせいで正しくCSSが適用されなくなっています。

お礼

ありがとうございます。
ご指摘どおり修正しましたら、綺麗になりました。
http://homepage3.nifty.com/kimura/menu/menu.html
目標のレイアウトとは少し違うのですが、
ページからリンクしているような形にするには
いただいたｃｃｓを少し変えればできるんでしょうか？
やれるのなら、自分で試行錯誤してみます。
ご丁寧な回答感謝しております。
なお、ベスト回答に対するポイントってどうやってつければいいでしょう？ＯＫＷａｖｅ初心者ですみません。

回答No.5

abril

ANo.4です。誤記があったので訂正しておきます。

【誤】dtというのは定義リストの「テーマ」部分を示すものであり、
↓
「テーマ」じゃなくて「ターム（term）」です。失礼しました。

回答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もページに貼り付けました。
何度も本当にお手数かけます。
お時間の都合のつくときで結構ですので、よろしくお願いします。

回答No.3

abril

ANo.2です。補足を拝見しました。

> 疑問点がいくつかあるのですが、重ねてご質問してもよろしいでしょうか？

勿論です。その為にも「補足して下さい」と書いています。

> 具体的で込み入った質問になってしまうので、もしよろしければご返答くだされば幸いです。

具体的であればあるほど、検証しやすいです。

> もちろん込み入った部分までお時間が取れないという場合もおありでしょうから、

本日はこのあと時間が取れないかもしれませんが、具体的に疑問点を追加しておいて下されば明日にでも再度検討させて頂きたいと想います。
※もしその間に他の回答者様から質問者さまのご希望に沿うレスが付いた様でしたらこのままスルーさせて頂きます。

補足

abrilさま
ありがとうございます。お言葉に甘えさせていただき早速質問させてください。
外枠影付き角丸ボックスの画像を作っていて時間がかかってしまいました。。。
さて。

http://homepage3.nifty.com/kimura/menu/menu.html
ここを見ていただけると、説明文をかなり書いているので大体おわかり
いただけるかと思うのですが、その上で質問です。

１）サンプル３のブロックタイトル画像（薄緑色の花柄ライン）が
ページ更新やスクロールによって消えたり表示されたりがランダム。
原因と解決法。
２）下記にいじったｃｓｓを表示しますが、画像位置を記述した数値を
「-10px」にしています。左に寄せたかったからです。
これは邪道ですか？

****************************
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;
}
dl.hoge_child {
position: relative;
width: 480px;
min-height: 150px;
_height: 150px;
background: url(img/box_side.gif) repeat-y;
}
dl.hoge_child dt {
margin-bottom: 1em;
border-bottom:0;
padding: 10px 10px 0 120px;
background: url(img/box_top.gif) no-repeat left top;
font-size: 14px;
font-weight: bold;
line-height: 140%;
}
dl.hoge_child dd.photo {
position: absolute;
top: 20px;
left: -10px;
width: 100px;
height: 114px;
}
dl.hoge_child dd.description {
width: 290px;
margin-left: 140px;
font-size: 12px;
line-height: 140%;
}

****************************
こんな感じです。どうぞよろしくお願いします。

回答No.2

abril

> 外枠を影付き角丸ボックスを作り、さらにそのボックスの中に、左側に写真、右側に小見出し＆説明文の欄を作りたい
> ボックスのサイズは幅500高さ150くらい

上記の様な感じのレイアウトであれば、

> dl,dt,ddで左右横並びテーブルのようなものを作ってみた

という考え方で基本、可能です。むしろ、

> 目標にしている数々のHPを閲覧していると、div要素ですべて配列しているものもあって

…というマークアップよりもより適切だと思います。

以下は、下記の条件で検証してみたサンプルです。

・ボックスの幅は500px、高さは最低で150px以上を確保して、内容量によって自動的に伸びる。
・ボックス内の写真及びテキストはボックスの上下左右の淵から10pxの余白をとる。
・ボックスの背景画像のドロップシャドウ付上部・下部角丸画像部分の高さは10px
・ボックスの背景画像の上部・下部角丸画像部分以外は縦方向にシームレスにリピート可能な画像とする。
・写真のサイズはW100px×H100px
・見出し及び説明文は、写真の右端から10pxの余白をとる。
・見出しと説明文の間には1行程度の余白をとる。
・見出しはボールドにして説明文より大きめのサイズにする。
・テキストは写真の下に回りこまない。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>
（前の要素、省略）

<div class="hoge_parent">
<dl class="hoge_child">
<dt>小見出し…</dt>
<dd class="photo"><img src="images/photo.jpg" alt="写真" width="100" height="100"></dd>
<dd class="description">説明文説明文…</dd>
</dl>
</div>

（後の要素、省略）
</body>
</html>
----------------------------------------------------------------------
【CSS】
・back_top.gif…ドロップシャドウ付上部角丸画像：W500px×H10px
・back_bottom.gif…ドロップシャドウ付下部角丸画像：W500px×H10px
・back.gif…ドロップシャドウ付繰り返し部分画像：W500px×H任意
----------------------------------------------------------------------
div.hoge_parent {
width: 500px;
margin: 0;
padding-bottom: 10px;
background: url(images/back_bottom.gif) no-repeat left bottom;
}
dl.hoge_child,
dl.hoge_child dt,
dl.hoge_child dd {
margin: 0;
padding: 0;
}
dl.hoge_child {
position: relative;
width: 500px;
min-height: 150px;
_height: 150px;
background: url(images/back.gif) repeat-y;
}
dl.hoge_child dt {
margin-bottom: 1em;
padding: 10px 10px 0 120px;
background: url(images/back_top.gif) no-repeat left top;
font-size: 14px;
font-weight: bold;
line-height: 140%;
}
dl.hoge_child dd.photo {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
}
dl.hoge_child dd.description {
width: 370px;
margin-left: 120px;
font-size: 12px;
line-height: 140%;
}
----------------------------------------------------------------------
IE6/7、Firefox2/3、Safari3、Opera9.61でほぼ同様の表示結果を得られております。
前後の要素（見出しや段落などのブロック）に角丸画像の上端もしくは下端を振り分けられる様な構成であれば、外側のdivは取り外す事も可能です。
また、リピートさせてよい部分がドロップシャドウ等がなくテクスチャもないプレーンな単色塗りであれば、その場合は背景色としてdlに併せて指定できるので、やはりdivで入れ子にしなくても可能になりますが。

いかがでしょうか？意図しているレイアウトと異なる様でしたら、具体的に詳細を補足して下さい。

補足

具体的かつ詳細で丁寧な回答、本当にありがとうございます。
そのままを使わせていただいたところ、少し思っているのとは
違っていたので、教えていただいたCSSを私なりに少しいじって
みましたところ、かなり近いものができあがりました。
疑問点がいくつかあるのですが、重ねてご質問してもよろしい
でしょうか？あつかましいお願いですみません。

かなり、具体的で込み入った質問になってしまうので、もし
よろしければご返答くだされば幸いです。
もちろん込み入った部分までお時間が取れないという場合もおありで
しょうから、その際は今回の質問コーナーを締め切らせていただいて
お礼のコメントを再度アップいたしますね。
本当にありがとうございます。

回答No.1

noname#83877

<div class="artWrap">
<h3>見出し</h3>
<p class="photo"><img src="image.jpg" alt=""></p>
<p>説明説明</p>
<p>説明説明</p>
<p>説明説明</p>
</div>

.artWrap {
width:500px;
height:auto !important;
height:150px;
min-height:150px;
position:relative;
background:url(bg.jpg) no-repeat 0 0; /* 背景画像 */
}

.artWrap h3, .artWrap p {
margin-left:300px; /*文章の左方向の位置 */
}

.artWrap .photo {
position:absolute; left:0; top:0; /* 写真の位置 */
}

お礼

回答ありがとうございます。
このようなド初心者にもご丁寧な回答、本当に感謝します！！
これは影付き角丸ボックスそのままの背景画像で作成するという
方法なんでしょうか？？

私の無知識のせいで、教えていただいたCSSとHTMLを試してみたので
すが、どうにもうまく表示されないようです・・・。
もう少し勉強してから、この方法を挑戦してみます。
ありがとうございました。