UserCSS:墨塗り記法
(たぶん)同様のコンセプト
/customize/Scrapboxで暗記シートを作る
/customize/Scrapboxで暗記シートを作る (CSSだけ使ったバージョン)
墨塗り記法
文字色と背景色を同じ色にして見えなくする
HTMLでよくある 手法
完全に 隠す わけではない
読みにくくする程度
マウスを hover すると見える
テスト テスト 、 テスト
安直な方法
strike要素を継承してしまうので、打ち消し線を消せない
strike要素を書き換えて、打ち消し線を消している(ちと乱暴)
HTML5:strike要素
code:stylexx.css
.deco-\- {
color: black; /* */
background-color: black; /* */
}
.deco-\-:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
strike {
text-decoration-line: none;
}
これでいいのか。
strike要素を書き換えるだけ(strikeは他では使っていないだろう)
code:stylexx.css
strike {
color: black; /* */
background-color: black; /* */
text-decoration-line: none;
}
strike:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
code:style.css
.line span.deco strike {
color: black; /* 表示色 */
background-color: black; /* 背景色(表示色に合わせる) */
text-decoration: none; /* 取り消し線をキャンセル */
}
.line span.deco strike:hover {
color: inherit; /* 表示色を元に戻す */
background-color: inherit; /* 背景色を元に戻す */
/*text-decoration: underline solid red; /* アンダーライン(お好みで) */
}
code:stylexx.css
.line:not(.cursor-line) a.page-link:not(:hover) {
color: black;
background-color: black;
}
暗記シート
UserCSS:もんたメソッド
UserCSS:文字装飾記法
UserCSS.icon
https://img.shields.io/badge/UserCSS-墨塗り記法-1572B6.svg?logo=css3&style=for-the-badge