リスト(ul、li)のマークはCSSで変更(HTMLソースの話)

Blog Admin
Blog Admin

CSSの疑似クラス(:before)を利用して、リストの先頭マークを調整します。
文字として使えるものは、たいがい指定できます。

CSS

リストのマーク
CSSの疑似クラスで指定

もともとデフォルト値やオプション値があるというのに、わざわざ別の文字を指定したいわけです。
個性を出したいということですね!
必要なことだと思います。

投稿に実装しているコードも書きます。

liのマークは消して自分で指定

プログラム

全体的な考え方を確認しておきます。
そもそも、マーク付きリストはulliで書きます。

付けられるマークは決まっていて、利用できるオプションは黒丸(disc)、白丸(circle)、四角(square)のみです。
これら以外のマークを付けたいときには、以下の考え方でCSSを設定します。

  1. マークなしにする
  2. 左のマージンも消す
  3. リスト描画前に好きなマークを書く(適度なスペースも自分で入れる)

id属性やclass属性をulに指定して、その配下のリストに設定を適用させます。
マークやスペースはUnicodeで書いていますが、ブラウザーに認識されればなんでも大丈夫です。
環境によるので、より確実そうな方法で書いているというだけです。

ありそうなマークで実装

そのままコピペすれば使えるようなかたちで書いておければと思いまして。
もちろん設定名やらマークやらも変えて、いい具合にアレンジして使えばよいと思います。

この投稿にも独自CSSで適用しています。

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/2em
  • U+2003: 1em
  • U+2004: 1/3em
  • U+2005: 1/4em
  • U+2006: 1/6em

参考リンクもどうぞ。

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました