問題

3
HTML

dl・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を使って説明リスト作ろう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用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)= 説明文

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する
学習の事・キャリアの事、何でもOK!無料相談に申し込む