蛍光マーカーをテキスト上に設置する方法
今回はテキスト上にマーカーを表示させる方法を解説します。
文字を装飾 or 強調したいときに簡単な方法として以下の方法が挙げられます。
- 文字を太くする
- 文字色を変える
- 下線を引く
ただ、「もっと強調したい時」や「違うデザインにしたい時」もあるかと思います。
そんな時に役に立つのが今回ご紹介する「蛍光マーカー」です。シンプルなコードなのですぐ慣れると思います。
では早速設置方法を見ていきましょう。
HTML
<p>これは<span>蛍光ペンでラインマーカーを引いた</span>イメージのサンプルです</p>
文章の大枠は<p>~</p>で囲みます。
次に、マーカーを引きたい箇所を<span>~</span>で囲みます。
HTMLはこれで完成です。
CSS
span {
background-color: #ff9;
}
次にCSSです。
上記のCSSは、【spanに対してbackground-color（背景）を設置した】という意味を表します。
つまり、この場合だと【<span>~</span>に#ff9（黄色）が引かれた】ということになります。
以下が設置結果です。
See the Pen
黄色100％マーカー by 鳥内俊汰 (@kurosiro430)
on CodePen.
蛍光マーカーを細くしたり色を変えたりしてみよう
次に蛍光マーカー自体のデザインを少し変えてみます。
HTMLはそのままで、CSSをいじるだけでデザインを変えることが出来ます。
span {
background:linear-gradient(transparent 60%（透明の割合）, #ff6 60%（グラデーションの割合）);
}
蛍光マーカーの太さやグラデーション
蛍光マーカーを「linear-gradient」を使って表現しています。
今回はグラデーションする方向を指示する文字が抜けているので、デフォルトの上から下で変化します。
まず設置結果を見てみましょう。
See the Pen
yLYGKEV by 鳥内俊汰 (@kurosiro430)
on CodePen.
transparentは透明を意味し、今回であれば文字の高さの上から下へ60％まで透明になり、それ以下には蛍光マーカーが引かれます。このように蛍光マーカーの太さを決めることが出来ます。
他にもグラデーションのかけ方は変えられるので詳しくはコチラを参考にしてみてください。
蛍光マーカーの色
蛍光マーカーの色は、#○○○のコードを変えるだけです。色のコードはコチラを参考にしてください。
蛍光マーカーのサンプル
最後に蛍光マーカーのサンプルを用意しました。
%の部分や色コードを変えてみて、サイトに合ったマーカを作ってみてください。
オレンジ色マーカー
See the Pen
オレンジ色100%マーカー by 鳥内俊汰 (@kurosiro430)
on CodePen.
ピンク色マーカー
See the Pen
ピンクマーカー by 鳥内俊汰 (@kurosiro430)
on CodePen.
青色マーカー
See the Pen
青色マーカー by 鳥内俊汰 (@kurosiro430)
on CodePen.
緑色マーカー
See the Pen
緑マーカー by 鳥内俊汰 (@kurosiro430)
on CodePen.
まとめ
蛍光マーカーをテキスト上に設置する方法はいかがでしたでしょうか。
マーカーの幅を気にしないのであれば、background-colorのみでマーカーが引けるのでとても実装しやすいと思います。
ただ、使い過ぎも良くないのでサイトの雰囲気に合わせて使っていくことが大切です。
