REDLINE MAGAZINE | 変な定義リストをスッキリさせたい

変な定義リストをスッキリさせたい

随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl（定義リスト）が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった。今日はそれを書いてみる。

何に違和感があったのか

私が違和感を感じたのはこういうソース。（内容は架空のものに差し替えてます）

<dl>
<dt>開催日時</dt>
<dd>2007年8月18日</dd>
</dl>
<dl>
<dt>開催場所</dt>
<dd>日本のどこかの県のどこかの市</dd>
</dl>
<dl>
<dt>参加費用</dt>
<dd>1,000円くらい</dd>
</dl>

何が違和感かって、定義リストで同じグループのものって普通1つのdlの中にdtとddを並べれば済むんじゃないの？と。そのマークアッパーさんは各項目ごとにdlの中にdt、ddを入れてる。これって何か特別な意図があるんだろうかと不思議に思ったわけです。

見た目とCSSはこうなってた。

各dtとddの左にボーダーを入れる。dtとddの間はマージンを取らずに、左側の縦ボーダーがピタっとくっついて１本の線になるように。各dlの下部にもボーダーで点線を。よく見かけそうな感じのデザイン。

CSSソース（いらない部分はカットしてこの状態にしている部分のみを取り出しました）

dl {
	border-bottom:1px dotted #999;
	padding: 5px 0 5px 0;
	}
dl dt {
	color:#900;
	border-left: solid 4px #900;
	padding: 0 0 0 10px;
	font-weight: bold;
	}
dl dd {
	border-left: solid 4px #900;
	padding: 0 0 0 10px;
	}

分離されている各dlを1つにまとめてみることに

そういうことで、とりあえず各dlを1つのdlにまとめました。

<dl>
<dt>開催日時</dt>
<dd>2007年8月18日</dd>
<dt>開催場所</dt>
<dd>日本のどこかの県のどこかの市</dd>
<dt>参加費用</dt>
<dd>1,000円くらい</dd>
</dl>

すると見た目がこんな感じに（左上図）なりました。各dtとddのセットの間の隙間がなくなったのと、セットごとの下線がなくなったので、それを補うためにCSSをいじってみました。

とりあえず単純にdlについてる下線を削除して、dtに上マージンを、ddに下線を加えました。するとこうなりました。（左下図）一見うまく元の見た目どおりになったと思いきや、よく見るとdd下線の位置が1つ1つdlに分離していた時と違うんですね。（どこが違うか分からない方は下の図を参考に。）

ddに下paddingを加えたところで、その値に伴って左の縦ラインも伸びるので、なんかいろいろいじってみたんですが、CSSだけで下線（点線）と縦ラインの間にスペースがすんなりとれなかったです。（もしかしたら見落としている方法があるかも、なんですが）

サイトを見る人間からしてみれば、ここの隙間があろうがなかろうが記載してある情報は理解できるので何の問題もないんですが、もしかしたらもしかして、このマークアッパーはそこに隙間をあけたいがためにdlを各dt、ddごとに分けたんじゃなかろうかとか思ったり思わなかったり。たまに組んでるデザイナのデザインを忠実に守りすぎようとして余計なdiv増やしまくったり、ちょっと変じゃないの？というようなマークアップをされるマークアッパーさんがいらっしゃるので、そんな予想をしてみました。

1つのdlにまとめても見た目を再現できる解決方法

ちょっと考えてみたんだけど、これ、ソースを1つのdlにまとめても同じ見た目にする方法ある。画像を1つ用意する必要があるんだけど、各dt、ddのセットを1つずつdlに分離するよりソースはスッキリすると思う。

用意した画像はこれ。
>>ddの左用の画像
左のボーダーと同じ色同じ幅（ここでは4px）の画像で。背景色と同化してて分かりにくいと思うけど、一番下に透明で5ピクセルの余白をとっています。またddの内容量が多くなって複数行になっても対応できるように高さは長めにしました。

dl dt{
	color:#900;
	border-left: solid 4px #900;
	font-weight: bold;
	padding: 0 0 0 10px;
	margin: 5px 0 0;
	}
dl dd{
	background: url(xxx.gif) no-repeat left bottom;
	border-bottom: 1px dotted #999;
	padding: 0 0 5px 10px;
	}

>>このCSSを適応させたサンプルページ

ポイントはddにさっき用意した画像を「left bottom」の位置に背景画像として表示させる点。上にも書いたように下の5ピクセル透明のスペースいれてるので、そこが隙間のように見えてくれる。複数行になっても画像の上は長めにとってあるので勝手に伸びてくれる。

これでちゃんと再現できるんじゃないかな。
とか言いつつ、1つ1つdlに分離してる理由がちゃんとあるならホントごめんなさい、なんだけど。dlを1つ1つ分離しようがしまいが、文法的に何か問題あるわけでもないし、人の考え方はそれぞれだと思うんだけど、私は1つにまとめたい派なので。タグ辞典とかのサンプルにはたいがい1つの定義グループの内容は1つのdlの中にdt、ddが続けて入ってるからそれが当たり前だと思ってたけどなんか違うのかな。よーわからん。

2007年08月18日 16:19 | Red | パーマリンク