mark 背景色を消しアンダーラインを引く コピペで使えるHTML+CSS

スポンサーリンク

mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。更に、linear-gradient関数を用いて、よりリアルなアンダーラインを実現します。

スポンサーリンク

背景色を消し、ピンクのアンダーラインを引く

text-decorationを使用

text-decoration: underline solid 10px #ff42ad; として3pxの高さのアンダーラインを引く。

今食べたいと思っている食べ物はラーメンであって蕎麦ではありません。
style属性で記述
今食べたいと思っている食べ物は<mark style="text-decoration: underline solid 3px #ff42ad; background: none;">ラーメン</mark>であって蕎麦ではありません。
スタイルシートで記述
今食べたいと思っている食べ物は<mark class="mark-underline">ラーメン</mark>であって蕎麦ではありません。
.mark-underline{
    background: none;
    text-decoration: underline solid 3px #ff42ad;
}

linear-gradient関数を使用

backgroundに対してlinear-gradient関数を用いて調整する。この方法では下、または上からしかスタートさせることができない。途中から引くリアルな引き方は下記。

text-decorationを使用せず、バックグラウンドで描写します。

style属性で記述
text-decorationを使用せず、<mark style="background: linear-gradient(to bottom,transparent 50%, #ff66bb 55%);">バックグラウンド</mark>で描写します。
スタイルシートで記述
text-decorationを使用せず、<mark class"mark-underline-gradient">バックグラウンド</mark>で描写します。
.mark-underline-gradient{
    background: linear-gradient(to bottom,transparent 50%, #ff66bb 55%);
}

蛍光マーカーの色

このピンクの蛍光マーカーは、#ff66bbです。

このイエローの蛍光マーカーは、#F8FE52です。

このブルーの蛍光マーカーは、#00B0F0です。

このグリーンの蛍光マーカーは、#22F302です。

もっとリアルな蛍光マーカーを引く

リアルな蛍光マーカーを引く コピペで使えるHTML+CSS
文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現!

対象要素の概要

mark要素

mark テキストのハイライト コピペで使えるHTML+CSS
文章の中で目立たせたいテキストをマークするmark要素についての解説。mark要素は単なるマークであって重要と言う意味では用いません。

使用するCSSの概要

text-decoration

text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。

linear-gradient関数

linear-gradient 線形グラデーション コピペで使えるHTML+CSS
CSSのlinear-gradient()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。