![見出し画像](https://assets.st-note.com/production/uploads/images/99481866/rectangle_large_type_2_431d97f304ce205e0d90472e71f033e2.png?width=1200)
Photo by
ykyk8887
【勉強メモ】HTML dl dt ddタグ
基本
HTML5においては
「description list(dl)= 説明リスト」
「description term(dt)= 説明する言葉」
「definition / description(dd)= 定義分もしくは説明文」
という形でdt要素をdd要素で説明する「記述リスト」に変更されました。
※以前は「定義リスト」だった。
使い方
<dl>
<dt> ソフトドリンク</dt>
<dd>一般の飲料</dd>
<dt> お酒</dt>
<dd>アルコール入り飲料</dd>
</dl>
引用:https://ferret-plus.com/5063
dlが親でdtとddが子。dlで括ってdt(用語)とdd(説明)が交互にくる。
dtとddは必ず一対一でなくて良い。
dlの中にdlを入れられる。
ddに画像を入れて良い。 出典:https://ferret-plus.com/5063
定義要素として使用する時
dl要素を定義リストとして利用する場合は、dt要素にdfn要素を内包させます。
一般的なブラウザでは定義する用語はイタリックになります。
<dl>
<dt><dfn>定義する用語</dfn></dt>
<dd>用語の定義</dd>
</dl>
引用:https://ferret-plus.com/5063?page=4
レイアウト CSS
dtとddの一対は横並び、複数のdt・ddが縦に並ぶようにする。
dt{
display: flex; dt、ddを横並びにする
flex-wrap: wrap; dtとddが100%になったら、横並びを折り返す
}
dt {width: 25%;}
dd { width: 75%;}
dtとddに計100%になるようにwidthをつけることで折り返しされ、縦に整列する。
この記事が気に入ったらサポートをしてみませんか?