定義リストの<dl>タグ <dt>タグ <dd>タグとは

定義リストの<dl>タグは 定義<dt>に対してその内容を説明する<dd>がセットになっているリストを意味します。セットで使うタグなので、セットで覚えると良いです。

<dl>タグについて

情報がセットになったリスト<dl>〜</dl>(英語:description list)
<dt>タグと<dd>タグをセットにまとめて一つのリストをつくります。

<dt>タグについて

項目名<dt>〜<dt> (英語:description term)
<dd>タグで説明する用語や文章を意味します。

<dd>タグについて

内容や説明文 <dd>〜</dd> (英語:description,definition)
<dt>タグを説明する用語や文章が入ります。

<dl><dt><dd>のセットの使い方について

【HTML】

<dl>
<dt>Question1：吉田朱里の職業は？</dt>
<dd>Answer1:NMB48チームMのメンバーであり、YouTuberである。</dd>
<dt>Question2:矢吹奈子の職業は？</dt>
<dd>Answer2:HKT48チームHおよびAKB48チームBのメンバーである。</dd>
<dt>Question3:渡辺麻友の職業は？</dt>
<dd>Answer3:日本のアイドル、女優。女性アイドルグループAKB48チームBのメンバーである。</dd>
</dl>

【表示例】

Question1：吉田朱里の職業は？
Answer1:日本のアイドル、NMB48チームMのメンバーであり、YouTuberである。
Question2:矢吹奈子の職業は？
Answer2:日本のアイドル、HKT48チームHおよびAKB48チームBのメンバーである。
Question3:渡辺麻友の職業は？
Answer3:日本のアイドル、女優。女性アイドルグループAKB48チームBのメンバーである。

⬆︎<dd>タグでかこまれた答えの部分がインデント（1文字下げられ）され、質問に対する答えのリストができました。

ひとつの<dt>に対し<dd>を複数並べる

【HTML】

<dl>
  <dt>　AKB48 47th「シュートサイン」   発売日：2017/03/15</dt>
    <dd>シュートサイン</dd>
    <dd>気づかれないように… (小嶋陽菜卒業ソング)</dd>
    <dd>Vacancy (SKE48)</dd>
    <dd>真夜中の強がり (NMB48)</dd>
    <dd>止まらない観覧車 (HKT48)</dd>
  <dt>AKB48 48th「願いごとの持ち腐れ」   発売日：2017/05/31</dt>
    <dd>願いごとの持ち腐れ</dd>
	 <dd>イマパラ</dd>
    <dd>前触れ</dd>
    <dd>点滅フェロモン</dd>
    <dd>あの頃の五百円玉</dd>
</dl>

【ブラウザ表示例】

AKB48　47th「シュートサイン」　発売日：2017/03/15
シュートサイン
気づかれないように… (小嶋陽菜卒業ソング)
Vacancy (SKE48)
真夜中の強がり (NMB48)
止まらない観覧車 (HKT48)


AKB48　48th「願いごとの持ち腐れ」　発売日：2017/05/31
願いごとの持ち腐れ
イマパラ
前触れ
点滅フェロモン
あの頃の五百円玉

⬆︎このように<dt>の下に<dd>を複数入れることも可能です。

<dl>を１セットにてし繰り返す場合

【HTML】

<dl>
  <dt>◆3月</dt>
  <dt>平日　3月第3火曜日</dt>
    <dd>47th「シュートサイン」　発売</dd>
    <dd>小嶋陽菜ラストシングル</dd>
</dl>
<dl>
  <dt>◆５月</dt>
  <dt>平日　5月第4水曜日</dt>
    <dd>48th「願いごとの持ち腐れ」　発売</dd>
	<dd>第9回選抜総選挙前シングル</dd>
</dl>
<dl>
  <dt>◆8月</dt>
  <dt>平日　8月第4水曜日</dt>
    <dd>49th「＃好きなんだ」</dd>
  <dt>第9回AKB48選抜総選挙シングル</dt>
    <dd>今シングルは第9回AKB48選抜総選挙の上位16名がセンター、および選抜を務めます。</dd>
</dl>

【ブラウザ表示例】

◆3月
平日　3月第3火曜日
47th「シュートサイン」　発売
小嶋陽菜ラストシングル
◆５月
平日　5月第4水曜日
48th「願いごとの持ち腐れ」　発売
第9回選抜総選挙前シングル
◆8月
平日　8月第4水曜日
49th「＃好きなんだ」
第9回AKB48選抜総選挙シングル
今シングルは第9回AKB48選抜総選挙の上位16名がセンター、および選抜を務めます。

⬆︎一つ一つセットで表示することができます。

【応用編】<dt><dd>を横並びにし、新着情報として表示する

【HTML】

<dl>
  <dt>2015/6/30</dt>
   <dd>新しい商品を10点追加！</dd>
<dt>2015/6/21</dt>
   <dd>新商品のレビューを記載</dd>
<dt>2015/6/18</dt>
   <dd>メンテナンスのお知らせ</dd>
<dt>2015/6/13</dt>
   <dd>スーパーセールを開始！</dd>
<dt>2015/6/10</dt>
   <dd>お得なセール情</dd></dl>


【CSS】

dt{  
  background-color : #FF9654;        
  padding-top : 10px;    
  padding-bottom : 10px;
  padding-left : 10px;
  width : 150px;
/* 左寄せ */
  float : left;
/* float解除 */
  clear : both;
}
 
dd{    
  background-color : #CCFFFF;
  padding-top : 10px;
  padding-left : 10px;
  padding-right : 10px;
  padding-bottom : 10px;
  width : 400px;
/* dtの幅分の設定 */
  margin-left : 160px;
}

【ブラウザ表示例】



2017/1/30
杜王町でイベント開催！


2017/3/21
新商品のレビューを記載


2017/5/18
メンテナンスのお知らせ


2017/7/13
スーパーセールを開始！


2017/8/10
お得なセール情報

⬆︎CSSを設定することで新着情報のように配置することも可能です。

最後に・・・

このように<dl><dt><dd>を使うことで苦手なtebleを使ったようなデザインにできたり、
CSSを設定することにより新着情報やフォームなどの実装などいろいろな箇所で役立てることができます。
是非つかってみてください。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , ,