ul li タグのリストマーカーに好きな文字列を設定する方法

ul や ol を利用したリストタグに任意の文字列をマーカーとして使用する方法を紹介します。
具体的には liタグのbefore疑似要素で好きな文字をマーカーとして設定し、リスト全体をずらして、リストタグっぽさを損なわないようにします。

コードはこんな感じ。

こんな風に普通にリストをHTMLで記述します。

お次はCSSで以下のように書きます。

今回の例では「※」という文字と「●▲■」という3文字の記号をそれぞれリストマーカーとしたサンプルを公開します。ポイントはli:beforeの contentプロパティにリストマーカーとして使用した文字を記述する点です。こうすることによって、ul li を書いたHTMLタグにリストマーカーとして使いたい文字列をいちいち記入しなくても、自動的にマーカーが表示されるようになります。

ここから先はお好みですが、設定した文字列の文字数×フォントサイズ分だけmargin-leftにマイナスのマージンを設定します。そうするとリストマーカーだけが、左に移動します。そして親要素のulタグに対して、左に寄せた分だけmargin-leftでプラスのマージンを設定します。そうすると一つのli要素のリストが複数行になった場合、2行目以降がマーカーにぶら下がったように表示させることができます。

以上です。
ここで使われたCSSを応用すれば、ネストされたリストに対し、階層ごとに別の文字列をマーカーとして使用するというCSSの書き方もできますね。お気に召したら、いろいろ実験してみてくださいね。

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

HTML | Posted on 2014/09/06 18:03

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。