• HOME > 
  • CSS > 
  • CSSで蛍光ペン風のマーカー線を引く方法【初心者にもわかりや...

CSSで蛍光ペン風のマーカー線を引く方法【初心者にもわかりやすく解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2022年01月15日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

蛍光ペン風マーカー線とは?

「印刷物の重要な箇所に対して、蛍光ペンで線を引いて見やすく強調する」

これと同じことをWEBサイト上でもできれば、読み手によりわかりやすく文章を伝えることができます。

このページでは、CSSを使って蛍光ペンでマーカーを引いたような文字装飾を表現する方法を説明します。

マーカー線の効果

私たちは教科書など紙での印刷物において蛍光ペンでマーカーを引いた箇所は重要であるという下地が刷り込まれています。

他にもテキスト装飾の方法はいくつもありますが、印刷物で慣れ親しんだマーカー線を使うことで、WEBサイト上でも重要な箇所や強調したい箇所をわかりやすく印象付けることができます。

しかしページ内でやたらと使いすぎると見づらくなり逆効果になってしまいます

重要度を意識してマーカー線を引くようにしてください。

CSSの記述方法

テキストに線を引くというと、「text-decoration」プロパティが思い浮かぶと思います。

確かにtext-decorationでもアンダーラインは引けます

text-decorationによる下線

今回実現したい蛍光ペン風マーカー線とは少しイメージが異なります。

マーカーで引いたような装飾を行うためには、「background」プロパティを利用します。

backgroundを使用してマーカー線を引く

文字全体にマーカーを引きたい場合は、対象の文字をspanで囲みbackgroundプロパティで好きな色を指定します。

CSS

.sample span{
    background:#df2353;
}

HTML

<p class="sample"><span>background</span>による蛍光ペン風マーカー線</p>

プレビュー

backgroundによるマーカー線

少し下にずらしたマーカー線を引く

アンダーラインとの中間のような、文字の下の部分にだけかかるようなマーカー線も表現可能です。

CSS

.sample span{
    background:linear-gradient(transparent 50%, #df2353 50%);
}

HTML

<p class="sample"><span>background</span>による蛍光ペン風マーカー線</p>

プレビュー

backgroundによるマーカー線2

マーカー線の幅は「%」の数値によって任意に変更できます。

「linear-gradient」を指定するとbackgroundを複数の色でグラデーション化できます。

これを利用して文字の一部分は透明になるようにしてマーカー線を表現しています。

まとめ

とても簡単に利用できますので、文字装飾のアイデアの一つとして活用してみて下さい。

広告
広告

関連する記事

サムネイル

CSSの疑似クラスnth-childとnth-of-type……

2024年11月07日
疑似クラスnth-childとnth-of-typeについて CSSの疑似クラス「:nth-child」と「:nth-of-type」はどちらも何番目の要素とい […]
サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。