HTML_CSS
Googleでログイン
問題9：dl,dt,ddタグを使って説明リストを作ろう
コーポレートサイトを作成する際の「会社概要」欄などでよく見かけるdl,dt,ddについて学びましょう。
見本参考にしてください。
見本参考にしてください。
期待する画面
解答ソースコード
<section>
<dl>
<dt>屋号</dt>
<dd>忍者CODE</dd>
<dt>住所</dt>
<dd>滋賀県甲賀市甲賀の里</dd>
<dt>資本金</dt>
<dd>100円</dd>
<dt>事業</dt>
<dd>
<ul>
<li>手裏剣を使用して悪を討つ</li>
<li>剣術の練習をして果物切る</li>
<li>影分身の術を使用して2人分のバイト代を受給</li>
<li>火遁の術でキャンプファイヤー</li>
</ul>
</dd>
</dl>
</section>
¥HTML¥
dt{
float: left;
}
dd{
width: 400px;
margin: 0 0 16px 100px;
border-bottom: 1px dotted;
}
ul,li {
list-style: none;
padding: 0;
}
li::before {
content: "■";
}
¥CSS¥
補足
dl,dt,ddはそれぞれ以下の意味と役割を持っています。
・dl(definition list):説明リストのことでグループ化をする役割。
・dt(definition term):「term」は英語で「用語」。ddタグで説明する対象の言葉。
・dd(definition description):説明文のことでdtについて説明する役割
「dlの中で、dtの内容をddで説明している」というような形になっていれば問題ありません。
・dl(definition list):説明リストのことでグループ化をする役割。
・dt(definition term):「term」は英語で「用語」。ddタグで説明する対象の言葉。
・dd(definition description):説明文のことでdtについて説明する役割
「dlの中で、dtの内容をddで説明している」というような形になっていれば問題ありません。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
dtに対して float: left;を使用します。
dtとddの間を開ける
上下の感覚を空けたい場合はddに対してstyleを当てます。borderも同じです。
また、dt,ddは複数行でも崩れることはありませんし忍者CODEがやっているようにul/liなど別のタグを入れることも可能です。