やぁ、やっと水泳で2km泳げるようになったユトピ(@yutopi60pa)だよ。
前回のHTMLタグリファレンスでは「リストタグ」についてみていきましたね。
ulタグやらolタグ、liタグの特徴や使いかたなんかを見ていきましたね。
・あなたは正しくできてる?「リストタグ」を使って分かりやすい箇条書きを作ろう!
実はリストタグはこれだけじゃないんです。
もう一つ大事なものがあります。
それは『dlタグ』です!
今回は『dlタグ』について解説していこうと思いますぞ!
dlタグとは?
dlタグはDefinition Listの略で、定義リストを作成する際に使用するタグです。
定義リストを作る場合はdlタグ以外にも、dtタグ、ddタグを使ってリストを作成していきます。
定義リストとはなんぞや?
確かに。難しい言葉を使うなよって感じですね。
要するにリストの項目ごとに「説明文」を追加することができるのがdlタグのいう定義リストのことです。
例えば歴史上の人物を並べたリストに、一人一人の説明を項目ごとに付け加えていくことができます。
ulタグやolタグはただ項目を並べるだけでしたよね。これがdlタグの特徴です。
使い方を説明する前に、実際に書いてみましょう!
dlタグを使ってみよう!
定義リストを作るよ!
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 |
HTML <dl> <dt>仮面ライダークウガ</dt> <dd>2000年~2001年放送。主演はオダギリジョー。</dd> <dt>仮面ライダーアギト</dt> <dd>2001年~2002年放送。主演は賀集利樹。</dd> <dt>仮面ライダー龍騎</dt> <dd>2002年~2003年放送。主演は須賀貴匡。</dd> <dt>仮面ライダー555</dt> <dd>2003年~2004年放送。主演は半田健人。</dd> <dt>仮面ライダー剣</dt> <dd>2006年~2005年放送。主演は椿隆之。</dd> </dl> |
結果
- 仮面ライダークウガ
- 2000年~2001年放送。主演はオダギリジョー。
- 仮面ライダーアギト
- 2001年~2002年放送。主演は賀集利樹。
- 仮面ライダー龍騎
- 2002年~2003年放送。主演は須賀貴匡。
- 仮面ライダー555
- 2003年~2004年放送。主演は半田健人。
- 仮面ライダー剣
- 2006年~2005年放送。主演は椿隆之。
このようにしてdlタグを使っていきます。
全体を囲むdlタグ、項目の名前を囲むdtタグ、その説明をddタグが囲っていますね。
ちなみにdlタグはulタグやolタグにあったマーカーは付きません。
ですので、type属性はもちろん、CSSプロパティの「list-style」を使っても何も表示されません。
※詳しいリストタグのマーカーについてはこちらの記事をご覧あれ → リストタグの属性とlist-styleプロパティ
ではリストタグのようにマーカーを表示したい場合はどうすればよいのでしょうかね?
それはまた次回だ!!
ちょっと待ってて!
ちなみにdlタグでは、dhタグに対して複数のddタグを付け加えることもできます。
dtタグに複数のddタグ
ddタグたくさんつけたよ!
コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
HTML <strong>アメコミのヒーローたち!</strong> <dl> <dt>アベンジャーズ</dt> <dd>キャプテン・アメリカ</dd> <dd>アイアンマン</dd> <dd>ハルク</dd> <dd>ソー</dd> <dd>ホークアイ</dd> <dd>ブラックウィドウ</dd> </dl> <dl> <dh>ジャスティスリーグ</dh> <dd>スーパーマン</dd> <dd>バットマン</dd> <dd>ワンダーウーマン</dd> <dd>アクアマン</dd> <dd>フラッシュ</dd> <dd>グリーンランタン</dd> <dd>サイボーグ</dd> </dl> |
結果
HTML
アメコミのヒーローたち!
- アベンジャーズ
- キャプテン・アメリカ
- アイアンマン
- ハルク
- ソー
- ホークアイ
- ブラックウィドウ
- スーパーマン
- バットマン
- ワンダーウーマン
- アクアマン
- フラッシュ
- グリーンランタン
- サイボーグ
こんな感じでdlタグを使うことができます!
使い勝手は非常に多いので、是非とも使っていきましょう!
まとめ
以上がdlタグの解説です。
定義リストなんて難しそうな名前でしたが、使ってみると意外と単純なことがわかりますよね。
最初のうちはulタグやolタグとの区別がつきにくいかもしれないですが、しっかりと状況に応じてこれらのリストタグを使い分けていきましょう!