やぁ、簿記検定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タグを使うような場面は結構多く、見やすさもアップしますので、これはどんどん活用していきましょう!