【テクニック】CSSで蛍光ペン風のマーカーを作る方法
こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。
WWEBサイト作成時に情報を強調するための方法は多岐にわたります。訪問者の注意を引きつけ、情報伝達を効果的にするための手法がいくつか考えられます。主な方法としては、色のコントラストを利用すること、テキストの大きさやフォントを変更すること、アニメーションやホバーエフェクトを追加することなどが挙げられます。
でもこれだけだと少しバリエーションが少なく、単調な印象にしかし、これだけの方法ではバリエーションが限られてしまい、やや単調に感じるかもしれません。そこで、今回はCSSを用いてテキストを蛍光ペンのようにハイライトする表現方法をご紹介したいと思います。多くの学生が、教科書の重要な箇所やテスト範囲とされる部分を蛍光ペンでマーキングした経験があるでしょう。その手法をWEB上で再現します。さて、その実装方法を一緒に見ていきましょう。
この記事の目次を表示
HTMLの基本形
まず、この解説の中で参考として使うHTMLのコードを示します。<span></span>でタグで囲まれた部分が、蛍光ペンのマーカーで強調される箇所となります。
<p>テキストに<span>蛍光ペンマーカー</span>を引く方法</p>文字全体に蛍光ペンマーカーを引く方法
最初にご紹介する方法は、文字全体を覆うように蛍光ペンマーカーを引く手法です。<span>タグに対してbackground属性を指定するだけで、蛍光ペンマーカーのような表現を実現できます。
span{
background: #e8c72e;
}非常に簡単ですね。これだけで文章中の強調したい部分が、ひと目で明確にわかるようになりましたね。
次に、文字の下部のみに蛍光ペンマーカーを引く方法について解説します。
文字の一部にかかるように蛍光ペンマーカーを引く方法【backgroundを使う】
次に、文字の一部だけをハイライトする蛍光ペンマーカーの引き方をご紹介します。この表現方法にはいくつかの手法が考えられますが、まずはbackgroundを利用する方法から解説いたします。
それでは、まずはCSSのソースコードを確認してみましょう。
span{
background:linear-gradient(transparent 50%, #ff0 50%);
}文字の一部を蛍光ペンマーカーで強調する場合、backgroundのlinear-gradientを活用します。
linear-gradient(transparent 色の割合, 蛍光ペンの色 色の割合);transparentは透明を意味します。この場合、60%までが透明で、60%以降が蛍光ペンの色となります。
蛍光ペンマーカーの太さを変えてみる
蛍光ペンマーカーの太さを調整したい場合、linear-gradientでで指定した色の割合を変更することで対応できます。たとえば、より太いマーカーの線を引きたい時は、最初のtransparentの割合を少なくし、蛍光ペンの色の割合を増やしてください。
太い蛍光ペンマーカー
background: linear-gradient(transparent 30%, #ff0 70%);細い蛍光ペンマーカー
background: linear-gradient(transparent 70%, #ff0 30%);蛍光ペンマーカーをグラデーションにしてみる
次に、蛍光ペンマーカーをグラデーション風にする手法を解説いたします。
span{
background: linear-gradient(transparent 40%, #ff0,#0ff);
}この方法では、2色目の部分にグラデーションとして使用したい色を複数指定します。これにより、指定された色調でグラデーションの蛍光ペンマーカー表現が可能となります。
文字の一部にかかるように蛍光ペンマーカーを引く方法【擬似要素を使う】
文字の下部だけに蛍光ペンマーカーを引く方法について解説します。CSSの擬似要素、:beforeや:afterを利用して、蛍光ペンマーカーの表現を実現します。
それでは、まずCSSのソースコードを確認してみましょう。
span{
position: relative;
z-index: 1;
}
span::before{
content: "";
width: 100%;
height: 30%;
background: #ff0;
position: absolute;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}この方法ではCSSのコード量が増えてきましたね。このCSSを適用すると、特定の蛍光ペンマーカーのスタイルが実現できます。マーカーの太さを調整したい場合は、heightの値を変更してください。値を増やせばマーカーが太く、減らせば細くなります。
メリット
この方法の最大の利点は、蛍光ペンマーカーの位置を自由に調整できる点にあります。backgroundを利用した手法では、マーカーの位置の制約があるのに対し、擬似要素を使用することでより柔軟な配置が可能となります。この点が、この方法の大きなメリットといえるでしょう。
以下は、テキストの上部と下部にそれぞれマーカーを配置したサンプルとなります。
注意点
次に、擬似要素を使用する際の注意点について確認していきましょう。
注意点1
擬似要素のz-indexは-1に設定し、<span>のz-indexは1にします。擬似要素のz-indexを-1にしない場合、擬似要素がテキストの上に重なってしまう可能性があります。もし、ブロックの背景色が特に指定されていなければ、これだけで問題ありません。しかし、ブロックの背景色が指定されている場合、z-index:-1;の親要素には正のz-index値を設定しないと、ブロックの背景色の下に配置されてしまい、結果として蛍光ペンマーカーが表示されなくなることがあります。
以下は、z-indexを設定しなかった際のサンプルとなります。
以下は、親要素に正のz-index値を設定しなかった際のサンプルとなります。
注意点2
注意点の2つ目は特に重要な点として挙げられます。それは、蛍光ペンマーカーの箇所が改行された場合、マーカーが表示されなくなってしまうという問題です。このため、改行が入る箇所での使用は避けるべきです。
この注意点が致命的なため基本的に蛍光ペンマーカーの表現をする場合、一つ目でご紹介したbackgroundを使用した方法をお勧めします。
様々な蛍光ペンマーカーのサンプル集
最この問題は非常に重要なため、基本的に蛍光ペンマーカーの表現を行う際は、最初にご紹介したbackgroundを使用した方法を推奨いたします。
色別マーカーサンプル集
蛍光イエロー
蛍光ピンク
蛍光ブルー
蛍光グリーン
蛍光パープル
蛍光オレンジ
太さ別マーカーサンプル集
太さ100%
太さ80%
太さ60%
太さ40%
太さ20%
まとめ
この記事では、蛍光ペンマーカーの実装方法を2種類紹介しました。それぞれには得意な点と注意点が存在し、デザインの要件に合わせて最適な手法を選択することが重要です。文章内で重要な部分を蛍光ペンマーカーの装飾で強調することにより、注目ポイントが明確になり、サイトのデザインも一層魅力的になります。しかし、この装飾を過度に使用すると、どの部分が真に強調されるべきかが不明確になる可能性があるため、適切な使用頻度を心がけることが求められます。
