HTML: dl, dt, dd タグ
概略
-
MDN: dl: 説明リスト (Description List) 要素
dt タグと dl タグのリスト全体を囲む親要素です。 -
MDN: dt: 説明用語 (Description Term) 要素
用語などの見出しなどを入れる要素です。 -
MDN: dd: 詳細説明 (Description Details) 要素
用語の説明文を入れる要素です。 - HTML: 文章レイアウト: 箇条書き、目次、表など
dl, dt, dd の display の初期値は block です
CSS の設定は div と同じように行えます。
HTML: div タグ
タグ名 CSS の display の値 ------------------------------------------ dl block dt block dd block
HTML サンプル
HTML のみのサンプル。CSS 装飾なしのときの初期表示です。
TestJS_edit_html01.html
編集シミュレーション。
CSS サンプル
文字の強調や下線など。
TestJS_edit_html01.html
編集シミュレーション。
CSS で枠線や背景色を付ける。
CSS border (枠線)
CSS でいろいろ装飾。
簡易なテキストから HTML に変換する
枠線の装飾。
CSS flex で左右に並べる
dt タグと dl タグを左右に並べる
dt タグと dl タグを左右に並べて 2列の表を作ることができます。
仕組みが分かれば table よりも簡単に作成できます。
CSS box-sizing
CSS: var 変数、calc() 関数
TestHTML_input_inline_block01.html
(参考) flex を使用しない例。b タグを inline-block にしたサンプル。
画像と説明文を左右に並べる
CSS flex で画像と説明文を左右に並べるサンプル。 画像は figure, img で固定幅、説明文は dl, dt, dd で可変幅。
figure タグ
ul,ol,li タグ
タブパネルのサンプル
JavaScript を使用しないサンプルです。 input タグのラジオボタン (type="radio") を組み合わせます。
JavaScript サンプル
- TestJS_dl_dt_dd_create02.html
JavaScript で dl, dt, dd のリストを作成する。
dl 要素をドラッグ操作で移動する。 HTML の draggable 属性のサンプル。
draggable 属性でドラッグ操作する