CSSでの文字の装飾で、蛍光ペンで書いたようなマーカーを付ける方法をやってみた。
文章中の文字を強調したい時によく使われる、
蛍光ペンで書いたようなマーカーを、CSSでも簡単に
表現することが可能です。
この記事では、その方法を書いていきます。
この方法をマスターすれば、文章を強調する方法が
増えます。
文字全体を囲む感じでマーカーを書いた感じ
まずは、定番の文章全体を色付けする感じのマーカー
の場合の方法。黄色のマーカー効果。
黄色マーカーで文字を囲んだ感じ
HTML
|
1 2 3 |
<span class="yellow"> 黄色マーカーで文字を囲んだ感じ </span> |
CSS
|
1 2 3 |
.yellow { background-color: #ff9; } |
linear-gradientを使っていろんな効果が可能
次に、linear-gradientを使うと、マーカーラインのサイズ
や透明感の調整も可能なので便利です。
マーカーをつけたい文章を span で囲んで、class名に
markerを付けると、管理がやりやすくなりますよ。
黄色マーカー 細いライン
HTML
|
1 2 3 |
<span class="marker-yellow"> 黄色のマーカークラスつけ </span> |
CSS
|
1 2 3 |
.marker-yellow { background: linear-gradient(transparent 40%, #ff9 40%); } |
黄色マーカー 太いライン
HTML
|
1 2 3 |
<span class="marker-yellow-futo"> 黄色のマーカークラスつけ </span> |
CSS
|
1 2 3 |
.marker-yellow-futo { background: linear-gradient(transparent 10%, #ff9 10%); } |
ピンクマーカー 細いライン
HTML
|
1 2 3 |
<span class="marker-pink"> ピンクのマーカークラスつけ </span> |
CSS
|
1 2 3 |
.marker-pink { background: linear-gradient(transparent 80%, #ff99cc 80%); } |
ピンクマーカー 太いライン
HTML
|
1 2 3 |
<span class="marker-pink-futo"> 黄色のマーカークラスつけ </span> |
CSS
|
1 2 3 |
.marker-pink-futo { background: linear-gradient(transparent 10%, #ff99cc 10%); } |
こんな感じで、background: linear-gradient(transparent 10%, #ff99cc 10%);
でマーカーを表現することができるので使ってみてください。
参考になるカラーコード表サイトも参考に載せときます。
いろんなカラーのコードがすぐにわかります。ご使用は自己責任でお願いいたします。
CodePenで確認する
今回のコードをCodePenに残してます。
おすすめ教材
最後に、この記事見てるあなたは、独学中ですか？
私も最初は、独学でやろうとしました、プログラミング
を独学はちょっとしんどい。。。
私のだした結論は、お金出して学ぼうでした。
独学で時間かけるよりも、お金出して、早くマスター
して、早く収益を上げれるようにした方がいいと思いました。
高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】
 |
1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 |
コメント