ログイン

問題9 dl,dt,ddをマスターしよう

HTML_CSSの問題

HTML_CSS

dl,dt,ddとは、説明リストタグといい、用語の説明やQ&Aなどでよく使われています。 説明リストタグを用いることで、検索エンジン等のプログラムがページの内容を把握しやすくなります。つまりSEO対策に有効的と言えます。

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を使用して横並びにする際は
dtに対して float: left;を使用します。

dtとddの間を開ける
上下の感覚を空けたい場合はddに対してstyleを当てます。borderも同じです。

また、dt,ddは複数行でも崩れることはありませんし忍者CODEがやっているようにul/liなど別のタグを入れることも可能です。
ログインして解答を見る
dl,dt,ddはそれぞれ以下の意味と役割を持っています。
・dl(definition list):説明リストのことでグループ化をする役割。
・dt(definition term):「term」は英語で「用語」。ddタグで説明する対象の言葉。
・dd(definition description):説明文のことでdtについて説明する役割
「dlの中で、dtの内容をddで説明している」というような形になっていれば問題ありません。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!