UserCSS:箇条書きをウザくする
君たち、そんなに箇条書きの中点（・）が嫌いかい？
ウザくするといっても限度がある
わかりにくくするのが目的ではない
箇条書きと認識されなければ意味がない
以下のような場合は、箇条書きを表す記号と認識されない 派手すぎる
大きすぎる
場違い
実装してみてわかったこと
ビュレットの色は、テキストの色と分けたほうがよい
番号なしリストと番号つきリストでビュレットの形で表現したほうがよい
階層の深さは色分けで表現する
TL;DR
番号なしリスト
1階層
2階層
3階層
4階層
5階層
6階層
7階層
番号つきリスト
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: 8px;
/*content: '\f004'; /* ハート */
/*content: '\f08a'; /* ハート */
/*content: '\f005'; /* スター */
/*content: '\f006'; /* スター */
/*content: '\f10c'; /* まる */
/*content: '\f111'; /* まる */
/*content: '\f096'; /* 四角 */
/*content: '\f0c8'; /* 四角 */
/*content: '\f1bb'; /* 木 */
/*content: '\f186'; /* 月 */
/*content: '\f001'; /* 音符 */
/*content: '\f1b0'; /* 足跡 */
/*content: '\f219'; /* ダイアモンド */
/*content: '\f069'; /* アスタリスク */
/*content: '\f2dc'; /* 雪の結晶 */
/*content: '\f0e9'; /* 雨傘 */
/*content: '\f0c6'; /* クリップ */
/*content: '\f1d8'; /* 紙ヒコーキ */
/*content: '\f0eb'; /* 電球 */
/*content: '\f094'; /* レモン */
/*content: '\f000'; /* グラス */
/*content: '\f0f4'; /* コーヒーカップ */
/*content: '\f058'; /* チェックマーク */
content: '\f00c'; /* チェックマーク */
}
.line .indent-mark .dot {
background-color: transparent;
}
アイコンの指定
階層ごとにアイコンのデザインを変える
ごちゃごちゃした印象になる
色との組み合わせも重要
アイコンの指定（交互に繰り返す用）
code:stylexx.css
.line .indent-mark .dot:nth-child(odd)::before {
/*content: '\f08a'; /* ハート */
content: '\f14a'; /* チェックマーク */
}
アイコンの指定1
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
content: '\f004'; /* ハート */
/*content: '\f08a'; /* ハート */
/*content: '\f005'; /* スター */
/*content: '\f006'; /* スター */
/*content: '\f10c'; /* まる */
/*content: '\f096'; /* 四角 */
/*content: '\f1bb'; /* 木 */
/*content: '\f186'; /* 月 */
/*content: '\f001'; /* 音符 */
/*content: '\f1b0'; /* 足跡 */
/*content: '\f219'; /* ダイアモンド */
/*content: '\f069'; /* アスタリスク */
}
.line .indent-mark .c-1 + .dot::before {
content: '\f08a'; /* ハート */
}
.line .indent-mark .c-2 + .dot::before {
content: '\f005'; /* スター */
}
.line .indent-mark .c-3 + .dot::before {
content: '\f006'; /* スター */
}
.line .indent-mark .c-4 + .dot::before {
content: '\f10c'; /* まる */
}
アイコンの指定（その2）、こうやってアイコンの集合を定義すればいいのか。
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
content: '\f005'; /* スター */
}
.line .indent-mark .c-1 + .dot::before {
content: '\f004'; /* ハート */
}
.line .indent-mark .c-2 + .dot::before {
content: '\f043'; /* 水滴 */
}
.line .indent-mark .c-3 + .dot::before {
/*content: '\f06d'; /* 火 */
content: '\f185'; /* 太陽 */
/*content: '\f069'; /* アスタリスク */
}
.line .indent-mark .c-4 + .dot::before {
content: '\f299'; /* 木の葉 */
}
フォントサイズの指定
基本的に、下の階層のフォントサイズは小さくする
もしくは、フォントサイズは変更しない
その場合は、別の方法で階層を知らせる
フォントサイズの指定1
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
font-size: 21px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 18px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 15px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 12px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 9px;
}
フォントサイズの指定 2
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;
}
フォントサイズの指定 3
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
font-size: 11px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 10px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 8px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 7px;
}
フォントサイズの指定 4
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
font-size: 24px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 17px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 12px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 9px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 7px;
}
色の指定
色の変化により階層を知らせる
色の濃淡（グラデーション）による変化は、理屈としては合理的だが、視覚効果としてはいまいち
他の要素に重複しない色を選ぶ（ブルーはリンク色として、すでに使われている） 色の指定（色変化版）
code:style.css
.line .indent-mark .c-0 + .dot::before {
}
.line .indent-mark .c-1 + .dot::before {
}
.line .indent-mark .c-2 + .dot::before {
}
.line .indent-mark .c-3 + .dot::before {
}
.line .indent-mark .c-4 + .dot::before {
}
色の指定（グラデーション版）
code:stylexx.css
.line .indent-mark .c-0 + .dot::before {
}
.line .indent-mark .c-1 + .dot::before {
}
.line .indent-mark .c-2 + .dot::before {
}
.line .indent-mark .c-3 + .dot::before {
}
.line .indent-mark .c-4 + .dot::before {
}
番号つきリストの設定
code:style.css
.line.number-list .dot {
/*display: block !important; /* 表示する */
display: list-item; /* 表示する */
/* display: none; /* 表示しない */
}
アイコンの指定
番号なしリストと明確に区別がつくアイコンを指定する code:style.css
.line.number-list .dot::before {
/*content: '\f08a'; /* ハート */
/*content: '\f198'; /* # */
content: '\f292'; /* # */
}
色の指定
番号なしリストと合わせたほうがいいと思う
何も指定しなければ番号なしリストと同じ
code:stylexx.css
.line.number-list .c-0 + .dot::before {
}
.line.number-list .c-1 + .dot::before {
}
.line.number-list .c-2 + .dot::before {
}
.line.number-list .c-3 + .dot::before {
}
.line.number-list .c-4 + .dot::before {
}
フォントサイズの指定
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.icon
https://img.shields.io/badge/UserCSS-箇条書きをウザくする-1572B6.svg?logo=css3&style=for-the-badge