問題
3dl・dt・ddを使って説明リスト作ろう
この問題では、「質問とその回答」のように相互につながりを持ったリストの定義を行なうHTMLタグについて学習します。 3つまとめてタグを覚える必要があるので以下で説明するポイントを押さえて使えるようになりましょう。
HTMLの問題に挑戦しよう!
問題
「dl・dt・ddを使って説明リスト作ろう」
dl・dt・ddタグを使って忍者CODEの新着情報を完成させてください。
※表示している情報は一例のため正しい情報ではありません
あらかじめエディタに書くコード
2022.06.16
無料問題集「HTML_CSS」初級問題45~53問を追加しました。
2022.08.25
無料問題集「jQueryAnimation」を追加しました。
無料問題集「Vue」コースを追加しました。
2022.12.06
忍者CODE甲賀の公式サイトをリニューアルしました。
¥HTML¥
期待する画面
解答と解説(dl・dt・ddを使って説明リスト作ろう)
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
説明リストを作成するには、dl・dt・ddタグを使用します。
まずul・olタグと同様にdlタグを使ってリストを定義し、
dlタグの内側には、dtタグとddタグを使って対関係で記述していきます。
今回は日付をdtタグで囲い、記事タイトルをddタグで囲います。
dd要素はいくつあっても問題ありません。
補足
それぞれのタグは類似している為、誤って使用してしまうケースが多いです。
そのような間違いがおきないように、英単語で覚えるようにしましょう。
ポイント
dl・dt・ddとは
dl・dt・ddは、説明リストタグとも呼ばれる「見出しと説明文」や「Q&A」などで使用するためのタグです。
それぞれの「d」はdescription(説明)を意味しているため、説明リストと言われています。
使用する際は、dtに説明したいことを書き、ddでそれに対しての説明を書きます。その全体をdlで囲います。
それぞれは以下の略になります。
dl(description list)= 説明リスト
dt(description term)= 説明する言葉
dd(definition / description)= 説明文