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

スポンサーリンク

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

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%;
}
タイトルとURLをコピーしました