リストマークというと、下記のように画像を表示させたりする方法もありますが、
- こんな感じに
- 表示されますね
(上のマークは角度調節のため、画像です)
時間のない時とか、CSSのリストマーカーの種類にはないものを表示させるのにいいな〜と思ったので、忘れないように例によって覚え書き。
画像だと調節に時間かかりますもんね。
こちらは表示例。
「しかく」で変換すると出るやつ。同じ四角でもこちらの方が若干大きい…?
もちろん三角や星など、変換がきくものならOKかと…(媒体によって表示がされないものもあるので、そこは注意!)
リストマーク(こちらでも別ページにて表示されます)
簡単なリストマークの作り方
書き方は簡単。
CSS
ul {list-style: none;}
.list ul li {
margin: 10px;
margin-left: 30px;}
.list li:before {
content: "◼︎";
color: red;
margin-right: 5px;}
最初に「list-style: none;」で、リストスタイルを無効にする。
「li:before」で、リスト前。
「content」で好みのマークを入れればOK。
marginなどの位置はお好みで。
HTML
<div class="list">
<ul>
<li>ここは「Masa-P」というサイトです</li>
</ul>
<div>
まとめ
諸事情でコーディングは大分ご無沙汰してました。
忘れないように、便利な技は覚え書きしておいた方がいいですねー。