CSSの疑似クラス(:before
)を利用して、リストの先頭マークを調整します。
文字として使えるものは、たいがい指定できます。
リストのマーク
CSSの疑似クラスで指定
もともとデフォルト値やオプション値があるというのに、わざわざ別の文字を指定したいわけです。
個性を出したいということですね!
必要なことだと思います。
投稿に実装しているコードも書きます。
liのマークは消して自分で指定
全体的な考え方を確認しておきます。
そもそも、マーク付きリストはul
とli
で書きます。
付けられるマークは決まっていて、利用できるオプションは黒丸(disc)、白丸(circle)、四角(square)のみです。
これら以外のマークを付けたいときには、以下の考え方でCSSを設定します。
- マークなしにする
- 左のマージンも消す
- リスト描画前に好きなマークを書く(適度なスペースも自分で入れる)
id属性やclass属性をulに指定して、その配下のリストに設定を適用させます。
マークやスペースはUnicodeで書いていますが、ブラウザーに認識されればなんでも大丈夫です。
環境によるので、より確実そうな方法で書いているというだけです。
ありそうなマークで実装
そのままコピペすれば使えるようなかたちで書いておければと思いまして。
もちろん設定名やらマークやらも変えて、いい具合にアレンジして使えばよいと思います。
この投稿にも独自CSSで適用しています。
HTMLは、クラス名が違うだけです。
他には変化をつけていません。
CSSは、クラス名と指定文字が違うだけです。
とはいえ、セットで指定するものなので記録です。
矢印
矢印だけでもかなり種類がありますので。
適当にググって、よさそうなものを見つけてみるのもよろしいかと。
見た目
- 矢印は
- かなりの種類が
- 用意されています
HTML
<ul class="arrow-list">
<li>矢印は</li>
<li>かなりの種類が</li>
<li>用意されいます</li>
</ul>
CSS
.arrow-list {
padding-left: 0px;
}
.arrow-list li {
list-style: none;
}
.arrow-list li:before {
content: '\1F862\2004';
}
1F800~ 矢印です。たくさん用意されています。
「Unicode 矢印」とかでググってください。
ちなみに、\1F862
は「WIDE-HEADED RIGHTWARDS LIGHT BARB ARROW」という名前です。
チェックマーク
チェックマークは複数種類ありますが、矢印ほど多くありません。
似たようなマークもあるので、好きなものを選べばよいのですよ。
見た目
- チェックマークの
- 種類は
- そこまで多くないです
HTML
<ul class="check-list">
<li>チェックマークの</li>
<li>種類は</li>
<li>そこまで多くないです</li>
</ul>
CSS
.check-list {
padding-left: 0px;
}
.check-list li {
list-style: none;
}
.check-list li:before {
content: '\2714\2004';
}
\2714
は「HEAVY CHECK MARK」です。
太くなっていないチェックマークは\2713
です。
ハイフン
ダッシュなどの記号も含めると、案外種類が多いです。
半角マイナスだけではないのです。
見た目
- マイナス記号だけでも
- 案外種類が多いのに
- ダッシュや罫線もあるなんて
HTML
<ul class="minus-list">
<li>マイナス記号だけでも</li>
<li>案外種類が多いのに</li>
<li>ダッシュや罫線もあるなんて</li>
</ul>
CSS
.minus-list {
padding-left: 0px;
}
.minus-list li {
list-style: none;
}
.minus-list li:before {
content: '\002D\2004';
}
\002D
が半角マイナス記号です。
ASCII領域ですね!
ダイヤモンド
いろいろとある記号の中から、黒ダイヤマークに白バッテンというものを選んでみました。
ハートマークとかでもよかったのかと思いつつ。。
見た目
- 記号はいろいろあるのに
- どうしてこれを
- 選んだのでしょう?w
HTML
<ul class="dmnd-list">
<li>記号はいろいろあるのに</li>
<li>どうしてこれを</li>
<li>選んだのでしょう?w</li>
</ul>
CSS
.dmnd-list {
padding-left: 0px;
}
.dmnd-list li {
list-style: none;
}
.dmnd-list li:before {
content: '\2756\2004';
}
\2756
には「BLACK DIAMOND MINUS WHITE X」という名前が付けられています。
スペース幅もたくさんあります
Unicodeでスペースを指定しております。
今回使っているのは1/4emになるU+2005
というものです。
これ以外にもたくさんあります。
おそらく、必要な幅は確保できると思います。
組み合わせも可能ですし。
いろいろと試してみればよいのですよ。
U+2002
: 1/2emU+2003
: 1emU+2004
: 1/3emU+2005
: 1/4emU+2006
: 1/6em
参考リンクもどうぞ。
ご意見やご感想などお聞かせください! コメント機能です。