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しておかないと気持ちが悪いので入れておきました。

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

最近の記事

  1. CSS

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

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

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

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

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