CSS｜dlリストのdtタグ・ddタグをヨコに並べる方法

下記の記事でもご紹介したように、dtリストというのは「キーワード」とその「意味・説明」などを記載したいときに使うタグです。

2017.09.22

定義リストというのは、「言葉」とその「説明」が一覧になったリストを作成したいときに活用できるタグです。例えばこんな感じで使います。 See the Pen definition-list by kenichi (@ken81) on CodePen....

でも、dtは初期設定では下記のようにdtタグとddタグとの間に改行が入ってしまいます。

ボタンで表示を切り替えてご覧ください。

HTML

<dl>
  <dt>キーワード１</dt><dd>説明文、説明文、説明文。</dd>
  <dt>キーワード２</dt><dd>説明文、説明文、説明文。</dd>
  <dt>キーワード３</dt><dd>説明文、説明文、説明文。</dd>
</dl>

でも、場合によってはキーワードの部分と説明文を改行させずに横に配置したいときってありますよね。始めはそういう場合は、テーブル使わないとダメだと思っていましたが、スタイルシートで簡単にできることが分かったのでご紹介します。

dtタグddタグをヨコに並べる方法

CSS

dt{
  float: left;
}
dd{
  padding-left: 5em;
}
dl{
  clear: both;
}

やり方はシンプルです。dtタグに対してfloat: left;を効かせてddタグを横に並べるだけです。ただし、このままだとdtタグとddタグの間隔が詰まってしまうので、ddタグにpadding-leftを使って余白を空けます。このときのpadding-leftは、dtタグとの距離ではなく、親要素の左端との距離なので気をつけて下さい。

dl{clear: both;}は、効かせたfloatを解除するためのおまじないです。実際、この例の場合、これを効かせなくても問題はなかったのですが、clearしておかないと気持ちが悪いので入れておきました。

dtタグddタグをヨコに並べて横線を入れる方法

CSS

dl{
  line-height: 2.5em;
  clear: both;
  margin-bottom: 2em;
  position: relative;
}
dt{
  float: left;
  padding-left: .5em;
}
dd{
  padding-left: 7em;
  position: relative;
}
dd:before,
dd:last-child:after{
  content: "";
  position: absolute;
  width: calc(100% + 5em);
  border-top: 1px solid #DDD;
  left: -5em;
}
dd:last-child:after{
  bottom: 0;
}
dd + dd:before{
  border-top: none;
}

今度は、dtタグとddタグのセットごとに境界線を入れてみました。普通にborderを入れようとするとデザインが崩れてしまうので、疑似要素を使って表示させています。

dtタグddタグをヨコに並べてdtタグに背景色を入れる方法

CSS

dl{
  line-height: 2.5em;
  clear: both;
  margin-bottom: 2em;
  position: relative;
}
dl:before{
  content: "";
  width: 7em;
  height: 100%;
  background: #C2E5FC;
  position: absolute;
  top: 0;
  z-index: -1;
}
dt{
  float: left;
  padding-left: .5em;
}
dd{
  padding-left: 7em;
  position: relative;
}
dd:before,
dd:last-child:after{
  content: "";
  position: absolute;
  width: calc(100% + 5em);
  border-top: 1px solid #FFF;
  left: -5em;
}
dd:last-child:after{
  bottom: 0;
}
dd + dd:before{
  border-top: none;
}

今度は、dt要素に背景色を入れました。実際には、dt要素にはこのようにキレイに背景を入れることができないので、dl要素に擬似要素を追加して、それを下に重ねています。

以上がdlリストのdtタグ・ddタグをヨコに並べる方法でした。floatプロパティについて詳しく知りたい方は下記の記事もご参照ください。

2017.11.16

写真とテキストを横に並べたいfloatプロパティの方法

ここでは、floatプロパティの使い方についてお話していきます。このページを読み終わるころには、写真とテキストを横に配置したこんなレイアウトが完成できるようになります。こんな形でテキストと画像を横並び...

WordPressとデザインが学べるWebメディア