CSS

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

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

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

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

See the Pen dt_side by kenichi (@ken81) on CodePen.

HTML

<dl>
  <dt>キーワード1</dt><dd>説明文、説明文、説明文。</dd>
  <dt>キーワード2</dt><dd>説明文、説明文、説明文。</dd>
  <dt>キーワード3</dt><dd>説明文、説明文、説明文。</dd>
</dl>

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

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

See the Pen dt_side02 by kenichi (@ken81) on CodePen.

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タグをヨコに並べて横線を入れる方法

See the Pen
dt_side03
by kenichi (@ken81)
on CodePen.

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タグに背景色を入れる方法

See the Pen
dt_side04
by kenichi (@ken81)
on CodePen.

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プロパティについて詳しく知りたい方は下記の記事もご参照ください。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
PAGE TOP