下線を蛍光ペンみたいにする方法 HTML,CSS復習⑧
こんにちは、ぼちぼちの更新ですがもうHTML,CSS復習の8回目ですね。
今回は下線を蛍光ペンみたいにする方法です。
今までに復習したものを使っているので、少しずつ実践的になってきてうれしいです。
下線を蛍光ペンみたいにする方法
下線を蛍光ペンみたいにするには
ただの下線をつけるCSS（今回はspanタグのredbottomクラスにしてみましたが、クラス名は何でも大丈夫です）。
span.redbottom{
border-bottom: 1px solid red;
}
とは違ってbackground 背景を使います。
(spanタグは段落タグpよりも小さい単位みたいに考えて使ってます。)
文字全体に背景を入れる場合は
background: pink;
でいいですが、下線だけに背景をいれて蛍光ペンにするには
グラデーションタグの
background: linear-gradient;
を使います。
今回は透明→ピンクのグラデーションにしてみます。
透明はtransparent ピンクはpinkなので
background: linear-gradient(transparent 70%, pink 70%);
となります。
70とかの数字は大きくなればマーカーの線が細くなります。
実際にスタイルシートには次のように記述します。
span.pinkkeikou{
background: linear-gradient(transparent 70%, pink 70%);
}
記事中には次のように記述します。
<span class="pinkkeikou">ここに蛍光マーカーを引く</span>
すると次のようになります。
ここに蛍光マーカーを引く
いい感じですね！
そろそろ文字だけのページに、フリー素材を使ってアイコン画像みたいなのもいれてより実戦で使える形にしていきたいです。
♯HTMLタグ
♯CSS
HTML、CSSの復習１０回目に来たら、自分へのご褒美でお弁当の出前を頼もうかなと思ってます。
