Webサイトをいくつか作っていくうちに「こんな表現ができたらいいな」と思って検索したりすることでCSSをおぼえてきました。先日もあるサイトで「ここは太字とか色を付けるではなく、蛍光ペンで線を引いたように見せたい」と思うことがあり、検索したらすぐにわかりやすいサイトがあったので蛍光ペンのような表現ができました。
それを応用していろいろな太さや色のCSSが簡単にできるようにするには？ということを考えてみました。
蛍光ペンのような表現をするには
CSS 蛍光ペン で検索をしてすぐにコチラのページが見つかりました
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた IT便利帳
こちらの記事を読んで、CSSを使って蛍光ペンのような表現ができることがわかりました(^^)/。
CSSの中身は、
.クラスの名前 {
background: linear-gradient(transparent 透明の縦幅%, #色名 色の縦幅%);
}
のように書くようです。透明の縦幅%と色の縦幅%を同じ0%にして、色を赤にしてみます。慣れるまでややこしかったのですが 縦幅0％＜一番太い、縦幅100％＜一番細い、というか線がなくなる という理屈になっています。
background: linear-gradient(transparent 0%,#ff0000 0%);
色が赤で縦幅が両方とも0％←こんな感じです。真っ赤なのでちょっと見えにくいですが、縦幅は0％なので一番太い状態です。
パーセントだけ 50% に両方ともしてみます。
background: linear-gradient(transparent 50%,#ff0000 50%);
色が赤で縦幅が両方とも50％←こんな感じです。縦幅が半分になりました。
少し変化を付けてtransparent を60%にして、赤色の方を70%にします。
background: linear-gradient(transparent 60%,#7cfc00 70%);
transparent を60%にして、赤色の方を70%にすると、透明から少しずつ赤色になるので、さらにマーカーっぽくなると思います。
早速、使っている子テーマにCSSを追加してみます。
どうせなら七色の蛍光ペンを作ろうと思いました。七色は 赤、オレンジ、黄色、緑、水色、青、紫だそうです。