定義リストの<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を設定することにより新着情報やフォームなどの実装などいろいろな箇所で役立てることができます。
是非つかってみてください。