dlタグの上辺をそろえる

今回はdlタグを使った、テクニックを紹介します。

dlタグを普通に使うとどうしても説明文が一行分さがってしまいます。 これを無くそうというのが今回の目的です。
更新履歴を作るときなどに応用してみてください。

テクニック使用前

5/29

日記を更新しました

5/28

企画情報をアップ。

オンラインパンフがver2.0になりました。

テクニック使用後

5/29

日記を更新しました

5/28

企画情報をアップ。

オンラインパンフがver2.0になりました。

違い分かりますよね？

テクニックを使うために、スタイルシートには
dd.first{margin-top:-1.1em;}
このような記述を加えました。

さらにHTMLに
<dl>
<dt>5/29</dt>
<dd class="first">日記を更新しました</dd>

<dt>5/28</dt>
<dd class="first">企画情報をアップ。</dd>
<dd>オンラインパンフがver2.0になりました。</dd>
</dl>
とclassを追加しました。

ポイントは{margin-top:-1.1em;}とマージンに負の値を使った点と、 ddが1つのdtの中に２つ以上あるときは、一番上のddにだけclassを適用することです。 他のddにも適用してしまうと、デザインが崩れてしまいます。

---

使いこなすための＋α

dt部分とdd部分で文字の大きさが違うときは

5/29

日記を更新しました

5/28

企画情報をアップ。

オンラインパンフがver2.0になりました。

マージンが-1.1emではずれてしまいます。
実際に画面を見ながら微調整してみてください。

あと、背景を指定していると、バグって背景が表示されないことがあります。 そのような時はwidthを指定してあげてください。

---