やぁ、簿記検定2級持っているけどあまり活用していないユトピ(@yutopi60pa)だよ。
今日はdlタグのちょっとしたテクニックのご紹介。
リストタグでもあるdlタグなのですが、ulタグやolタグのようにマーカーが付きません。
type属性やCSSプロパティ「list-style」を指定することもできないんです。
でもリストタグとして使うならやっぱりマーカーは欲しいですよね。
なので今回はdlタグにマーカーを表示させるCSSテクニックをご紹介します！
display: list-itemを使うのだ！
早速答えが出ましたが、要するにCSSプロパティ「display」で値を「list-item」にすればOK。それをdlタグ内のdtタグに指定しましょう。
それでは早速やってみましょう！
まずは普通の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年放送。主演は椿隆之。
このようにタグではdtやddタグで分けているのに、表示結果では分かりにくい。せめてマーカーが欲しいところですよね。
そんな悩みを解決するのが今から紹介するコードです。
早速やっていきましょう！
dlタグはマーカーが無いよ！
ただ項目が並んで分かりにくい
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
CSS #dl1 dt{ display: list-item; list-style-type: desc; } HTML <dl id="dl1"> <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年放送。主演は椿隆之。
ほらね！表示されたよ！
displayプロパティでitem-listを指定すれば、指定されたdtタグがリスト要素になります。そうすると「list-style」関連のプロパティが使えるようになります！
これはdlタグを使うような場面は結構多く、見やすさもアップしますので、これはどんどん活用していきましょう！