ul や ol を利用したリストタグに任意の文字列をマーカーとして使用する方法を紹介します。
具体的には liタグのbefore疑似要素で好きな文字をマーカーとして設定し、リスト全体をずらして、リストタグっぽさを損なわないようにします。
コードはこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="custommarker01"> <li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li> <li>2番目のリスト</li> <li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li> <li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li> </ul> <ul class="custommarker02"> <li>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト<br>1番目のリスト1番目のリスト</li> <li>2番目のリスト</li> <li>3番目のリスト3番目のリスト3番目のリスト3番目のリスト</li> <li>4番目のリスト4番目のリスト4番目のリスト<br>4番目のリスト4番目のリスト4番目のリスト</li> </ul> |
こんな風に普通にリストをHTMLで記述します。
お次はCSSで以下のように書きます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
body { font: 14px sans-serif; line-height:1.5; padding:10px; } ul { margin-bottom:2em; } ul.custommarker01 { list-style-type: none; margin-left:14px;/* マーカーを1文字寄せた分、ULにマージンを設定*/ } ul.custommarker01 li:before { content: '※'; /* ←ここにリストマーカーにしたい文字列を設定 */ margin-left:-14px; /* 1文字分、左に寄せる */ } ul.custommarker02 { list-style-type: none; margin-left:42px; /* マーカーを3文字寄せた分、ULにマージンを設定*/ } ul.custommarker02 li:before { content: '●▲■'; /* ←ここにリストマーカーにしたい文字列を設定 */ margin-left:-42px; /* 3文字分、左に寄せる */ } |
スポンサーリンク
今回の例では「※」という文字と「●▲■」という3文字の記号をそれぞれリストマーカーとしたサンプルを公開します。ポイントはli:beforeの contentプロパティにリストマーカーとして使用した文字を記述する点です。こうすることによって、ul li を書いたHTMLタグにリストマーカーとして使いたい文字列をいちいち記入しなくても、自動的にマーカーが表示されるようになります。
ここから先はお好みですが、設定した文字列の文字数×フォントサイズ分だけmargin-leftにマイナスのマージンを設定します。そうするとリストマーカーだけが、左に移動します。そして親要素のulタグに対して、左に寄せた分だけmargin-leftでプラスのマージンを設定します。そうすると一つのli要素のリストが複数行になった場合、2行目以降がマーカーにぶら下がったように表示させることができます。
See the Pen
ul liリストに好きな文字列をマーカーとして使用する方法 by jugedred (@jugedred)
on CodePen.
以上です。
ここで使われたCSSを応用すれば、ネストされたリストに対し、階層ごとに別の文字列をマーカーとして使用するというCSSの書き方もできますね。お気に召したら、いろいろ実験してみてくださいね。