CSSで蛍光ペンでラインを引いたように見せる表現をするには?

Webサイトをいくつか作っていくうちに「こんな表現ができたらいいな」と思って検索したりすることでCSSをおぼえてきました。先日もあるサイトで「ここは太字とか色を付けるではなく、蛍光ペンで線を引いたように見せたい」と思うことがあり、検索したらすぐにわかりやすいサイトがあったので蛍光ペンのような表現ができました。
それを応用していろいろな太さや色のCSSが簡単にできるようにするには?ということを考えてみました。

蛍光ペンのような表現をするにはどうしればいいか、調べてみました。

CSS 蛍光ペン で検索をしてすぐにコチラのページが見つかりました

蛍光ペン風にテキスト上をマーカーするCSSを設定してみた IT便利帳

こちらの記事を読んで、CSSを使って蛍光ペンのような表現ができることがわかりました、ありがとうございます(^^)/。

CSSのクラスで利用する場合

.クラスの名前 {
background: linear-gradient(transparent 透明の縦余白%, #色名 色の縦余白%);
}

のように書くようです。

このliner-gradientというのは色の線形グラデーションを表示する属性で今回のように2つ値が指定されているときは 最初の色,最後の色 ということになります。蛍光ペンっぽくするには最初の色を透明(transparent)にしておくといい感じになるみたいです。

また、%(パーセント)は縦余白0%<一番太い縦余白100%<一番細い、というか線がなくなる、という理屈になっていました。

色と太さをいろいろ変えた蛍光ペンCSSを試してみる

理屈はわかったので色と太さをいろいろ変えた蛍光ペンCSSを試してみたいと思います。

色は蛍光ペンっぽく黄緑色(#7cfc00)にして太さは一番太く(0%)

この部分を蛍光ペンで塗ります。どんな感じですか?

色は蛍光ペンっぽく黄緑色(#7cfc00)にして太さは60%

この部分を蛍光ペンで塗ります。どんな感じですか?

色は蛍光ペンっぽく黄緑色(#7cfc00)にして太さは半分(50%)

この部分を蛍光ペンで塗ります。どんな感じですか?

transparent を40%、黄緑色の方を70%

この部分を蛍光ペンで塗ります。どんな感じですか?

透明から少しずつ黄緑色になるので、にじんだ感じに見えます。

色を変えて蛍光マーカーを引いてみると

「虹の7色はオレンジ黄色水色と考えられている」

こんな感じになりました(^^)/。いろいろ試してみたかったので直接

このようにspanで書きましたが、blogなどで繰り返し使うにはCSSをクラスにしておきたいと思います。

子テーマのstyle.cssに蛍光ペンクラスを追加する

早速、使っている子テーマのstyle.cssに蛍光ペンのクラスを追加してみます。

さきほど試してみた7色のうち、蛍光ペンに合いそうな色4色を細、太のクラスにしてみました。

これを使っている子テーマのstyle.cssに追加します。

そして

これは水色の太?

これはオレンジの細?

このようにspanにクラスを指定するだけで蛍光ペンが使えるようになりました(^^)/

おまけ:それでもちょっと面倒くさいような…

CSSのクラスを追加して少し使いやすくなりましたが、まだちょっと面倒な気がします。ショートコードにしてみたらもっと使いやすいのかな?と思うのでまた別の機会にショートコードを作ってみたいと思います。

[Amazon sponsored link] css 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る