用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。
INDEX
dtとddの間で改行しない
スマートホンで切り替える書き方について
dl dt dd の横並びと縦並び スマートフォンとPCでの表示の切り替え Prog-lab
Prog-labの趣旨は解説よりも、メモ置き場に近い情報コーナーです。タグの各意味と説明、目的dl,dt,ddを用い、tableのように横並びに表示させる。スマートフォンなどについてはdd,dtで改行させる。 dl 説明リスト dt 説明たしい用語 dd 説明用語が上揃えとなるパターン下線(border-bottom)...
programming-cafe.com
float:leftを使う方法
- <dt>はブロックレベル要素ですから、原則として横並びにはできません。そこで、float:leftを使って<dd>と横並びできるように調整します。
- <dd>のmargin-leftは<dt>と同じ始点です。下記のHTMLであればLからの距離ではありません。
- この仕様のおかげで、<dd>の始点を統一できるわけです。
- marginを小さくすると<dt><dd>が繋がることはありますが、重なることはありません。
- HTML
- マークアップ言語です
- CSS
- 装飾するための仕様です
style属性で記述
<dl> <dt style="float: left; margin-right:10px;">HTML</dt> <dd style=";">マークアップ言語です</dd> <dt style="float: left; margin-right:10px;">CSS</dt> <dd style="">装飾するための仕様です</dd> </dl>
スタイルシートで記述
<dl class="dl-this-style"> <dt>HTML</dt> <dd>マークアップ言語です</dd> <dt>CSS</dt> <dd>装飾するための仕様です</dd> </dl>
.dl-this-style dt{
float: left;
margin-right:10px;
}
floatとclearについて
- float:leftによって続く要素は右に回り込むこととなります。これを解除するものがclearです。
- ですから、<dt>にclear:leftを入れる必要があるかのように見えます。
- しかし、float:leftの本来の意味は左寄せにすることです。ですからclear:leftを含んでいることになります。
- float指定をするならclearをわざわざ書く必要はないということです。
- float指定をせず、通常の要素として配置したい（続く要素について右に回り込ませる必要がない）ときであれば、clearを指定します。
説明文の表示開始位置を揃える
- 6exと指定して左から半角6文字目から説明文を表示するように、用語の幅を6exとして指定します。
- min-widthとしている理由は6文字を超える時にも対応するためです。
- HTML
- マークアップ言語です
- CSS
- 装飾するための仕様です
style属性で記述
<dl> <dt style="float: left; min-width: 6ex;">HTML</dt> <dd>マークアップ言語です</dd> <dt style="float: left; min-width: 6ex;">CSS</dt> <dd>装飾するための仕様です</dd> </dl>
スタイルシートで記述
<dl class="dl-this-style"> <dt>HTML</dt> <dd>マークアップ言語です</dd> <dt>CSS</dt> <dd>装飾するための仕様です</dd> </dl>
.dl-this-style dt{
float: left;
min-width: 6ex;
}
dt,dd要素の概要
dl dt dd 説明リスト コピペで使えるHTML+CSS
特定の語句に対応する説明文などを表記するdl、dd、dt要素について解説。
programming-cafe.com
CSSプロパティ
float ボックスの回り込み コピペで使えるHTML+CSS
画像img要素やボックスの回り込みについて指定するfloatプロパティのleft、rightなどについて実例をあげながら解説します。
programming-cafe.com
説明リストのデザイン
- 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%;
}