UserCSS:箇条書きのバレットをFontAwesomeにする
A
B
C
D
E
F
G
1. A
2. B
3. C
4. D
5. E
6. F
7. G
6色版
5色 + 1色
5階層まで色分けし、以降は同じ色になる
5色にしたのは、箇条書きを5階層以下に抑えるため
5階層で十分と考えた
色が変わると階層が深くなりすぎたと分かる
フォントの大きさを変えている
配色で見分けがつかない場合の代替手段
あまり効果はないみたい
正直な話、やり過ぎだったと思う
ためしてみてわかったこと(失敗事例)
バレットに見えない
バレットの記号のアイコンが大きすぎる
アイコンの絵が複雑すぎる
ある特定の記号と同じ(誤認する)
階層によってバレットの形を変える(ゴチャゴチャしすぎ)
配色
配色には一定のルールが必要
番号なしリスト、番号つきリストで色分けをしたら、かえって分かりにくくなった
当たり前のことだが、バレットの記号は目立ちすぎてはいけない
CSS変数定義
カラーセット 1
code:stylexx.css
:root {
}
カラーセット 2
code:stylexx.css
:root {
}
カラーセット 3
code:style.css
:root {
--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);
}
code:style.css
:root {
/* 番号なしリストのキャラクター */
/* --ul-bullet: '\f00c'; /* チェックマーク */
/* --ul-bullet: '\f068'; /* マイナス記号 */
/* --ul-bullet: '\f10c'; /* xまる */
/* --ul-bullet: '\f111'; /* まる */
/* --ul-bullet: '\f0c8'; /* 四角 */
/* --ul-bullet: '\f096'; /*x 四角 */
/* --ul-bullet: '\f580'; /* */
/* --ul-bullet: '\f140'; /* 二重丸*/
/* --ul-bullet: '\f005'; /* スター:クリスマス用 */
/* --ul-bullet: '\f1b2'; /* box */
/* --ul-bullet: '\f599'; /* 顔 */
/* --ul-bullet: '\f1b0'; /* 肉球:猫の日用 */
/* --ul-bullet: '\f6be'; /* ネコ */
--ul-bullet: '\f6d3'; /* イヌ */
/* --ul-bullet: '\f1dd'; /* パラグラフ記号 */
/* --ul-bullet: '\f683'; /* 祈り */
/* --ul-bullet: '\f5d7'; /* 骨 */
/* --ul-bullet: '\f004'; /* ハートマーク */
/* 番号つきリストのキャラクター */
/* --ol-bullet: '\f111'; /* 丸 */
/* --ol-bullet: '\f292'; /* ハッシュ記号 '#' */
/* --ol-bullet: '\f2dc'; /* 雪:クリスマス用 */
--ol-bullet: '\f6be'; /* ネコ */
}
番号なしリスト
code:style.css
.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
/* font-family: FontAwesome; /* old */
font-weight: 900;
font-size: 6px;
content: var(--ul-bullet, '\f068');
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
.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}
番号つきリスト
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
content: var(--ol-bullet, '\f292');
}
フォントサイズ
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;
}
FontAwesome.icon
UserCSS.icon