mark要素のプロパティであるtext-decorationを修正してアンダーラインを引くようにし、蛍光マーカーを引いたようなデザインを実現します。ピンク、イエロー、ブルー、グリーンの蛍光マーカーを再現します。更に、linear-gradient関数を用いて、よりリアルなアンダーラインを実現します。
INDEX
～
ad. 価格範囲を指定して商品を探せます
背景色を消し、ピンクのアンダーラインを引く
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を使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンを再現！
programming-cafe.com
対象要素の概要
mark要素
mark テキストのハイライト コピペで使えるHTML+CSS
文章の中で目立たせたいテキストをマークするmark要素についての解説。mark要素は単なるマークであって重要と言う意味では用いません。
programming-cafe.com
使用するCSSの概要
text-decoration
text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。
programming-cafe.com
linear-gradient関数
linear-gradient 線形グラデーション コピペで使えるHTML+CSS
CSSのlinear-gradient()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。
programming-cafe.com