こんにちは、SouDogです。
今回はCSSを使ってマーカー線を引く方法を紹介します。
Webページの文章で強調したい部分がある時、「マーカーペンで引いたようなライン」を使うことで、強調したい部分をわかりやすく表示させることができます。
もちろん、テキストを強調するには
- 太字を使う
- フォントサイズを大きくする
- フォントカラー（文字色）を変更する
という方法もありますが、マーカー線の場合は文章のレイアウトを極端に崩すことなく、馴染ませた上で強調することができます。
マーカー線を指定する<mark>要素
文章内のテキストにマーカー線引く場合、マーカー線を引きたい部分を<mark>~</mark>で囲み、CSSを使って装飾します。
もしくは<span>~</span>で囲んでCSSで装飾することも可能ですが、要素の意味が違ってくるためこの場合は<mark>要素を使うと良いでしょう。
- <mark>：テキストを目立たせる目的で使用する。
- <span>：テキストの範囲を指定する目的で使用する。（汎用的）
また、<mark>要素にクラス名を付け、それぞれ別のCSSを適用させることで、複数のバリエーションを設定することができるようになります。
マーカー線を引く時のマークアップ
マーカー線のように見せる場合はCSSの「background（背景）」プロパティに「linear-gradient（グラデーション）」を使って装飾します。
基本的なマークアップ
<!-- マーカー線のHTML -->
テキストに<mark>マーカー線</mark>を引く
/* マーカー線のデフォルトCSS */
mark {
background-color: mark;
}
テキストにマーカー線を引く
デフォルトスタイルシートでの<mark>要素はこのようにテキストの背景色をベタっと塗ったような感じになります。
クラス名を付けて複数のバリエーションを設定する場合
<!-- マーカー線のHTML -->
テキストに<mark class="marker-red">赤のマーカー線</mark>を引く。
テキストに<mark class="marker-yellow">フワッとした黄色のマーカー線</mark>を引く。
/* マーカー線のCSS */
.marker-red {
background: linear-gradient(transparent 70%, #ff0000 70%);
}
.marker-yellow {
background: linear-gradient(transparent 30%, #ffff00 100%);
}
テキストにパキっとした赤のマーカー線を引く。
テキストにフワッとした黄色のマーカー線を引く。
この場合、透明部分（transparent）と色（#ffff00）の間にグラデーションの区間（上から30％～100％の間）を設けることで、フワッとした印象のラインにすることができます。
いかがだったでしょうか？
ブログ運営にも使える簡単なCSSですので、HTML/CSSにあまり詳しくない方も使えますので、ぜひ活用してください。
※うまくマーカーが引けない場合は、記述にミスがあるか上位要素のCSSを継承している場合があるため、その場合は「!important」などを使って強制的に適用すると良いでしょう。
コメント