テキストを強調するマーカー

テキストの一部を強調表示するモジュール

タグには <mark> を使用する

CSS はグラデーション機能を用いて文字の下半分に線を引いたようなデザインにする

蛍光ペンで線を引いたような表示にする

<mark> というタグは、テキストにマーカーを塗る、ハイライトするという意味のタグ

<mark> </mark> でテキストを囲むと蛍光ペンで線を引いたような表示になる

CSS を使えばこの表示を変更できる

CSS のグラデーション機能を使って、テキストの下半分くらいに下線が引かれるような見た目にする

背景にグラデーションを適用するには

要素の背景を設定する Background プロパティの値に使用した linear-gradient() は、直線的なグラデーションを生成する

書式が複雑で多数のパターンがあるので、基本的なものを例示する

書式: linear-gradient() の書式

liner-gradient(開始色, 終了色, 変換点%)

()内で 2色を指定すると、上から下へのグラデーションが作られる

% で変換点の位置を指定することができる

透明(色なし)を指定する場合は、transparent を使う

グラデーションの CSS ソースを出力しているアプリケーションやサービス

CSS のグラデーションは機能が豊富で、その代わり書式もかなり複雑

込み入ったグラデーションを作る場合は、css のソースコードを出力してくれるアプリケーションや、Web サービスを利用する

CSS を出力するアプリケーションには、 Adobe XD などがある

Web サービスは検索すると数多く見つかる

テンプレートファイル

base.html
style.css