No.1ベストアンサー
- 回答日時:
IEを度外視して良く、且つ定義が1つしかないなら、table-cellを使う事で簡単に実現できるのですが。
まあIEの件はともかく、質問文のサンプルからして定義リストの内容(dtとddのセット)は複数あるのですよね、おそらく。
であれば、ちょっとごまかしてますがこういう方法はいかがですか?
---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<dl class="hoge">
<dt>場所</dt>
<dd>あいうえお市かきくけ町<br />
さしすせ公園<br />
長文~~~~~~…
</dd>
<dt>場所</dt>
<dd>短文~~~~~~…</dd>
</dl>
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
dl.hoge {
zoom: 100%;
width: 200px;
margin: 0;
padding: 0;
background: #fcc;
}
dl.hoge:after {
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: left;
}
dl.hoge dt,
dl.hoge dd {
float: left;
margin: 0;
padding: 0;
border-top: solid 5px #fff;
}
dl.hoge dt {
width: 50px;
}
dl.hoge dd {
width: 150px;
background: #ccf;
}
---------------------------------------------------------------------
dtの高さをddに合わせて成り行きにする、というのはtable-cellを使う以外の方法では実現できないんじゃないかと思います。
ですので、dtの背景色と見せかけてdtの方には背景色を指定せず、替わりにその色(#fcc)をdlの背景色として指定します。そうすると、ddの描画領域以外のところに#fccが背景色として描画されるので、見た目的にはdtの部分が#fccで塗られている様になります。
ただし、dtとddのセットが複数あると考えた場合、(テーブルの行の様に)1セット毎に何らかの区切りが表示されているのが普通かと思います。通常であればmargin-bottomで余白を作りたいところですが、dtとddの高さが実は違っていることがそれによってわかってしまいます。
なので、これもごまかしなんですが、余白を作る替わりにdtとddにベースの背景色と同じ(この場合は背景色が白#fffであると仮定しています)色のボーダーを引いてやる事で、いかにも余白が出来ているかの様に見せます。ただ、ボーダーもdtとddの下に引いてしまうと余白と同じで高さの違いがわかってしまいますので、上に引きます。上の描画開始位置は、下と違ってセットのdtとddは必ず同じになるからです。
これで、見た目的にはdtには#fcc、ddには#ccfが塗られ1セット毎に5pxの余白が出来ている、という状態になります。
不具合や意図したものと違うところがある様であれば具体的に補足して下さい。
お返事遅くなってしまってごめんなさい。
>dtの背景色と見せかけてdtの方には背景色を指定せず、替わりにその色(#fcc)をdlの背景色として指定します。
こちらを参考にさせて頂きました。
>ただ、ボーダーもdtとddの下に引いてしまうと余白と同じで高さの違いがわかってしまいますので、上に引きます。
こちらも使わせて頂きました。どうもありがとうございました。
No.2
- 回答日時:
「dt」と「dd」をfloatで横並びにすると言うことは、予めそれぞれの横サイズが指定されていないと表示が崩れる場合がありますので、例えばで回答させていただきますね。
ここで問題と思われるのは、この場合「dt」と「dd」はブロック要素になるので、それぞれに「height」指定しないと、横並びでも頭は面がそろいますが、高さはバラバラなので、「dt」の背景の色と「dd」の背景の色を見れば、高さが異なるので、当然、高さが揃わない事になります。
では、「dl」に「dt」と同じ背景色を付ければ、論理的に大丈夫のように感じますが、「dt」と「dd」がfloatしてるので、「dl」に背景色を付けたにも関わらず、背景色がつかない現象がおきます。たぶん^_^;
ですので、「dt」と「dd」の後に「dl」内でfloatを解除する必要があります。ただ、「dl」内には「dt」と「dd」以外は使えないので、「dl」に「dt」と同じ背景色を付けるのではなく、「dl」をくくる親の「div」を設け、その「div」に「dt」と同じ背景色を付けて、「div」内の「dl」ブロック後に「<br>」にfloatをクリアさせれば、見た目は問題なく表示されると思うのですが。。。
実際やってみていないので、嘘言ってましたらごめんなさいm(_ _)m
▼CSS記述
.clearBoth {
clear:both;
}
.addlist {
background-color:#FF0000; /*dtに付けたい背景色*/
width:400px;
}
.addlist dt {
width:100px;
float:left;
}
.addlist dd {
background-color:#FF00FF;
width:300px;
float:left;
}
▼HTML
<div class="addlist">
<dl>
<dt>場所</dt>
<dd>あいうえお市かきくけこ町<br />さしすせ公園<br />長文******</dd>
</dl>
<br class="clearBoth" />
</div>
てな感じですが。。。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLのdlとul どちらが正しいと思いますか 3 2023/02/23 11:20
- PHP PHP MySql 画像を取得 1 2022/06/04 14:05
- PHP PHP MySQLに画像を直接保存 2 2022/06/05 11:50
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- 数学 dl と 、 Δl はどのように違いますか? 2 2022/11/30 15:48
- C言語・C++・C# クラスのメンバ変数を基準に並べ替えをしたい 5 2022/12/25 17:40
- 数学 初歩がわからない 分数の計算 1 2022/03/26 11:47
- 物理学 誘導起電力について 誘導起電力Vはファラデーの法則より、φを回路を貫く磁束として、 V=-(dφ)/ 1 2023/03/01 05:13
- 数学 x=r・cosθの2回微分 θ=ωtとすると? 5 2022/05/10 23:53
- その他(プログラミング・Web制作) 物理の斜方投射のシミュレーションにおける位置や速度の単位について 4 2023/05/31 09:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
Firefoxでの型崩れについて
-
W3Cのソースコードの検証サービ...
-
背景が下まで表示されないんです。
-
インラインフレーム内の表示位...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
【HTML&CSS】フッター下部の余...
-
背景画像をセットしたh1にmargi...
-
FC2ショッピングカート 写真の...
-
画像イメージの上下左右、欲し...
-
CSS3で角丸写真にシャドーを付...
-
firefoxのみテーブルのborderが...
-
widthやheightの数値に単位(px...
-
Media Queries 4 で 非推奨とな...
-
ページを拡大縮小でborderが消...
-
z-indexで上になっている要素だ...
-
Tableレイアウトで寸分の狂い無...
-
CSS、width100%でもできる余白
-
表示倍率を変えるとレイアウト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
【CSS】ヘッダーの高さが不明の...
-
CSSでボックスのheightが0になる
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
Media Queries 4 で 非推奨とな...
-
【HTML&CSS】フッター下部の余...
-
初心者html・CSS ウィンドウを...
おすすめ情報