定義リストDLを装飾するレスポンシブOKなCSSデザイン5種

定義リストDLタグは、言葉を定義したり説明したりするときに使う論理タグです。セマンティックなマークアップが求められるにつれ活用の機会が増えました。

ただし基本のマージンなどにやや癖があるので、CSSで装飾するときは注意します。

よく見る定義リスト DL/DT/DD 向けのデザインサンプルはスマホで見ると崩れるものも多いんですが、なるべく幅は可変になるように書きました。レスポンシブでもコピペでいけるんじゃないかと思います。

定義リストとは

主な用途は用語集や注意書きでしょうか。以前はdefinition list（定義リスト）と呼ばれましたが最近ではdescription list（説明リスト）となり、少し言葉の印象が柔らかくなりました。何かを列記するときに便利なタグだと思います。

DL DT DD タグ基本の使い方

基本のマークアップはこんな感じ。

【HTML】
<dl>
  <dt>定義リストとは</dt>
  <dd>言葉を定義したり説明したりするときに使うタグです。</dd>
  <dt>DLタグ</dt>
  <dd>ある単語と、それを説明する一連のリストをDLタグで囲みます。</dd>
  <dt>DTタグ</dt>
  <dd>DTタグには定義される単語を入力します。</dd>
  <dt>DDタグ</dt>
  <dd>DDタグには直前のDTに入れた言葉についての説明文を入れます。</dd>
  <dd>DDタグは複数もうけても構いません。</dd>
</dl>


これが標準状態では以下のように表示されます。

定義リストのデモ

定義リストとは

言葉を定義したり説明したりするときに使うタグです。

DLタグ

ある単語と、それを説明する一連のリストをDLタグで囲みます。

DTタグ

DTタグには定義される単語を入力します。

DDタグ

DDタグには直前のDTに入れた言葉についての説明文を入れます。

DDタグは複数もうけても構いません。

方針

見出し的な要素を持つDTに対して、説明用のDDが少しインデントされる形ですね。この動作を元に、希望の形に変形していきます。

要素を横並びにした定義リスト

汎用性の高い横並びリストです。何となく3点リーダー入れてみました。

06:30

起床

07:00

朝食

12:30

昼食

21:00

夕食

テレビ視聴

25:30

就寝

【CSS】
#test01 dt {
  clear: left;
  float: left;
  width: 20%;
  font-weight: bold;
}
#test01 dd { margin: 0 0 0 20%; }
#test01 dd:before { content: '……　'; }


float してる割に block 指定してないのは、dlがそもそも基本属性としてblock要素を持ってるからです。

また、回り込みの解除はDTで行います。DDで解除指定すると複数のDDを記載したときに段組が狂うためですね。

スクロールする定義リスト

DTがブロック要素であることを生かして、サイズ決め打ちのお知らせ風にしても使い勝手が良さそうです。

いいから走れよメロス

私は、今宵、殺される。殺される為に走るのだ。身代りの友を救う為に走るのだ。

間もなく床に倒れ伏し、呼吸もせぬくらいの深い眠りに落ちてしまった。

王とのあの約束をさえ忘れていた。祝宴は、夜に入っていよいよ乱れ華やかになり、人々は、外の豪雨を全く気にしなくなった。メロスは、一生このままここにいたい、と思った。

そんなに急ぐ必要も無い。ゆっくり歩こう、と持ちまえの呑気のんきさを取り返し、好きな小歌をいい声で歌い出した。

私は、これほど努力したのだ。約束を破る心は、みじんも無かった。神も照覧、私は精一ぱいに努めて来たのだ。動けなくなるまで走って来たのだ。私は不信の徒では無い。

セリヌンティウス、私は走ったのだ。君を欺くつもりは、みじんも無かった。信じてくれ！　私は急ぎに急いでここまで来たのだ。

私だから、出来たのだよ。

ああ、何もかも、ばかばかしい。私は、醜い裏切り者だ。どうとも、勝手にするがよい。やんぬる哉かな。――四肢を投げ出して、うとうと、まどろんでしまった。

【CSS】
#test02 {
  font-size: .8em;
  height: 16em;
  overflow:auto;
  border: 2px solid #777;
  background-color: #f9f9f9;
}
#test02 dt {
  padding: 0 1em;
  font-weight: bold;
  color: #FFF;
  background-color: #777;
}
#test02 dd {
  line-height: 1.2em;
  margin: .8em 1em;
}


テーブル風の定義リスト

横並び型の応用です。個人的にはTABLEでも良いんじゃないかなーと思いますが、メディアクエリで条件分けすることを考えるとレスポンシブでこそ便利な使い方かも知れない。

やまちゃん

03-xxxx-xxxx

あやちゃん

(携帯)090-xxxx-xxxx

(緊急)050-xxxx-xxxx

ゲンさん

090-xxxx-xxxx

【CSS】
#test03 { border: 1px solid #CCC; }
#test03 dd {
  display: block;
  margin: 0 0 0 25%;
  padding: 0 1%;
  font-size: .9em;
  line-heitht: 1.1em;
  border-top: 1px solid #CCC;
  border-left: 1px solid #CCC;
}
#test03 dt:first-child,
#test03 dd:first-of-type { border-top: 0 none transparent; }


見出し要素を強調した定義リスト

オーソドックスなトップのお知らせも、spanとpタグを入れ子にして指定するよりは意味的に綺麗になると思います。

2015/08/24

メロンソーダ半額だよ

2015/08/23

本日の炭焼き職人風パスタは本当の炭焼き職人が作るよ

シェフの気まぐれサラダを本当に気まぐれに作る予定だよ

2015/08/22

冷やし中華終わりました

【CSS】
#test04 dt {
  margin-top: 1em;
  padding: 0 2em;
  color: #FFF;
  text-shadow: 1px 1px rgba(0,0,0,.4);
  background-color: #de8a9d;
}
#test04 dd {
padding: 0 1em;
  margin-left: 0;
  font-size: .8em;
  border-width: 0 1px 1px;
  border-style: none solid solid;
  border-color: #de8a9d;
}


小さな定義リストをたくさん並べてみる

ちょっと変わり種として、小さいボックスをカタログ風に並べるパターンをご紹介します。これで図鑑風のサイトを作る人もいますね。

ボックスの一つ一つが DL で定義されています。

【CSS】
#test05 {
  float: left;
  width: 20%;
  height: 4em;
  padding: 1%;
  margin: .4em 1%;
  text-align: center;
  background-color: #dfefff;
  border: 2px solid #069;
  border-radius: 3px;
}
#test05 dt { border-bottom: 1px dotted #069; }
#test05 dd {
  margin-left: 0;
  font-size: .8em;
}


おわりに

リスト系のタグは基本指定としてマージンなどが複雑に入ります。そのためゼロリセットして組み直しをする人も少なくありません。

ただし important を避けて無駄のないコーディングをするという意味では normalize.css などで元の指定を活かしつつ、事実上の見た目コールは一度だけって方がスマートだと思います。

幅を可変にすると1ドット単位の制御が難しくなるので、現状のソースには多少不満もあるんですけど、まずはメモ代わりに公開してみました。

何か良いアイディアがあったら教えて下さい。