dlタグにマーカーを表示!displayプロパティにlist-itemを指定しよう!【CSSテクニック】

fa5ecbff9acd5c19a67e91c6f9b882a9_m-1024x683

やぁ、簿記検定2級持っているけどあまり活用していないユトピ(@yutopi60pa)だよ。

今日はdlタグのちょっとしたテクニックのご紹介。
リストタグでもあるdlタグなのですが、ulタグやolタグのようにマーカーが付きません。

type属性やCSSプロパティ「list-style」を指定することもできないんです。

でもリストタグとして使うならやっぱりマーカーは欲しいですよね。

なので今回はdlタグにマーカーを表示させるCSSテクニックをご紹介します!

display: list-itemを使うのだ!

早速答えが出ましたが、要するにCSSプロパティ「display」で値を「list-item」にすればOK。それをdlタグ内のdtタグに指定しましょう。

それでは早速やってみましょう!
まずは普通のdlタグから。


dlタグはマーカーが無いよ!

ただ項目が並んで分かりにくい

コード

結果

仮面ライダークウガ
2000年~2001年放送。主演はオダギリジョー。
仮面ライダーアギト
2001年~2002年放送。主演は賀集利樹。
仮面ライダー龍騎
2002年~2003年放送。主演は須賀貴匡。
仮面ライダー555
2003年~2004年放送。主演は半田健人。
仮面ライダー剣
2006年~2005年放送。主演は椿隆之。

このようにタグではdtやddタグで分けているのに、表示結果では分かりにくい。せめてマーカーが欲しいところですよね。

そんな悩みを解決するのが今から紹介するコードです。
早速やっていきましょう!

dlタグはマーカーが無いよ!

ただ項目が並んで分かりにくい

コード

結果

仮面ライダークウガ
2000年~2001年放送。主演はオダギリジョー。
仮面ライダーアギト
2001年~2002年放送。主演は賀集利樹。
仮面ライダー龍騎
2002年~2003年放送。主演は須賀貴匡。
仮面ライダー555
2003年~2004年放送。主演は半田健人。
仮面ライダー剣
2006年~2005年放送。主演は椿隆之。

ほらね!表示されたよ!
displayプロパティでitem-listを指定すれば、指定されたdtタグがリスト要素になります。そうすると「list-style」関連のプロパティが使えるようになります!

これはdlタグを使うような場面は結構多く、見やすさもアップしますので、これはどんどん活用していきましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です