dtとddの間で改行しないコピペで使えるHTML+CSS

用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。

dtとddの間で改行しない
1. float:leftを使う方法
2. floatとclearについて
dt,dd要素の概要
CSSプロパティ
説明リストのデザイン

dtとddの間で改行しない

float:leftを使う方法

<dt>はブロックレベル要素ですから、原則として横並びにはできません。そこで、float:leftを使って<dd>と横並びできるように調整します。

<dd>のmargin-leftは<dt>と同じ始点です。下記のHTMLであればLからの距離ではありません。この仕様のおかげで、<dd>の始点を統一できるわけです。marginを小さくすると<dt><dd>が繋がることはありますが、重なることはありません。

HTML: マークアップ言語です
CSS: 装飾するための仕様です

style属性で記述

<dl>
  <dt style="float: left;">HTML</dt>
  <dd style="margin-left:60px;">マークアップ言語です</dd>
  <dt style="float: left;">CSS</dt>
  <dd style="margin-left:60px;">装飾するための仕様です</dd>
</dl>

スタイルシートで記述

<dl class="dl-this-style">
  <dt>HTML</dt>
  <dd>マークアップ言語です</dd>
  <dt>CSS</dt>
  <dd>装飾するための仕様です</dd>
</dl>

.dl-this-style dt{
    float: left;
}
.dl-this-style dd{
    margin-left:60px;
}

floatとclearについて

float:leftによって続く要素は右に回り込むこととなります。これを解除するものがclearです。ですから、<dt>にclear:leftを入れる必要があるかのように見えます。しかし、float:leftの本来の意味は左寄せにすることです。ですからclear:leftを含んでいることになります。float指定をするならclearをわざわざ書く必要はないということです。float指定をせず、通常の要素として配置したい（続く要素について右に回り込ませる必要がない）ときであれば、clearを指定します。

dt,dd要素の概要

dl dt dd 説明リストコピペで使えるHTML+CSS

特定の語句に対応する説明文などを表記するdl、dd、dt要素について解説。

CSSプロパティ

float ボックスの回り込みコピペで使えるHTML+CSS

画像img要素やボックスの回り込みについて指定するfloatプロパティのleft、rightなどについて実例をあげながら解説します。

説明リストのデザイン

HTML: マークアップ言語です。ホームページの作成において利用されます。
CSS: 装飾するための仕様です。

style属性で記述

<dl>
  <dt style="display: inline-block; background-color: #45a7e0; padding: 1px 5px; border: 1px solid #444444;">HTML</dt>
  <dd style="padding-left: 30px; margin-left: 30px; margin-top: -17px; border: 2px solid #444444; width: 50%;">マークアップ言語です。ホームページの作成において利用されます。</dd>
  <dt style="display: inline-block; background-color: #45a7e0; padding: 1px 5px; border: 1px solid #444444; margin-top: 5px;">CSS</dt>
  <dd style="padding-left: 30px; margin-left: 30px; margin-top: -17px; border: 2px solid #444444; width: 50%;">装飾するための仕様です。</dd>
</dl>

スタイルシートで記述

<dl class="dl-design-style">
  <dt>HTML</dt>
  <dd>マークアップ言語です。ホームページの作成において利用されます。</dd>
  <dt style="margin-top: 5px;">CSS</dt>
  <dd>装飾するための仕様です。</dd>
</dl>

.dl-this-style dt{
  display: inline-block; /* inline-blockによって幅を可変にします*/
  background-color: #45a7e0; 
  padding: 1px 5px; 
  border: 1px solid #444444;
}
.dl-this-style dd{
  padding-left: 30px;
  margin-left: 30px; 
  margin-top: -17px; 
  border: 2px solid #444444; 
  width: 50%;
}