UserCSS:箇条書きのビュレットにFontAwesomeを使う
CSS変数定義
CSSカスタムプロパティ
カラーセット 1
code:stylexx.css
:root {
--li-color-0: #EEE;
--li-color-1: #FE0;
--li-color-2: #F0F;
--li-color-3: #0FF;
--li-color-4: #F00;
--li-color-5: #0F0;
}
カラーセット 2
code:stylexx.css
:root {
--li-color-0: #E0E0E0;
--li-color-1: #EDAD0B;
--li-color-2: #C7243A;
--li-color-3: #932674;
--li-color-4: #3261AB;
--li-color-5: #009F8C;
}
カラーセット 3
code:style.css
:root {
--li-color-0: #E0E0E0;
--li-color-1: hsla(288,100%,40%,0.6);
--li-color-2: hsla(216,100%,40%,0.6);
--li-color-3: hsla(144,100%,40%,0.6);
--li-color-4: hsla(72,100%,40%,0.6);
--li-color-5: hsla(0,100%,40%,0.6);
}
番号なしリスト
1
2
3
4
5
6
7
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 6px;
/* content: '\f00c'; /* チェックマーク */
/* content: '\f068'; /* マイナス記号 */
/* content: '\f10c'; /* まる */
/* content: '\f111'; /* まる */
/* content: '\f0c8'; /* 四角 */
/* content: '\f096'; /* 四角 */
content: '\f140'; /* 二重丸　*/
/* content: '\f1fd'; /* バースデーケーキ　*/
color: var(--li-color-0);
}
.line .indent-mark .dot {
background-color: transparent;
}
フォントサイズ
code:style.css
.line .indent-mark .c-0 + .dot::before {
font-size: 16px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 14px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 12px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 8px;
}
色の指定
code:style.css
.indent-markstyle*="width: 1.5em" .dot::before,
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.indent-markstyle*="width: 3em" .dot::before,
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.indent-markstyle*="width: 4.5em" .dot::before,
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.indent-markstyle*="width: 6em" .dot::before,
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.indent-markstyle*="width: 7.5em" .dot::before,
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}
番号つきリスト
1. 層
2. 層
3. 層
4. 層
5. 層
6. 層
7. 層
ビュレットを表示する
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
content: '\f292'; /* # */
/* content: '\f2dc'; /* 雪 */
}
フォントサイズの指定
code:style.css
.line.number-list .c-0 + .dot::before {
font-size: 11px;
}
.line.number-list .c-1 + .dot::before {
font-size: 10px;
}
.line.number-list .c-2 + .dot::before {
font-size: 9px;
}
.line.number-list .c-3 + .dot::before {
font-size: 8px;
}
.line.number-list .c-4 + .dot::before {
font-size: 7px;
}
UserCSS:箇条書き
FontAwesome
ビュレット
箇条書き
UserCSS.icon
https://img.shields.io/badge/UserCSS-箇条書きのビュレットにFontAwesomeを使う-1572B6.svg?logo=css3&style=for-the-badge