cssで蛍光ペン風のマーカーをテキストにつける方法

更新:2018.11.1

目次

はじめに

CSSを使うことでテキストに蛍光ペン風のマーカーを簡単につけることができます。 テキストを強調するときに文字を大きくしたり、太字にしたり斜体にしたりできますが、蛍光ペン風マーカーをつけると身近な感じがしますね。

基本的な使い方

基本的な使い方を説明します。

background: linear-gradient(transparent 太さ, 色 グラデーション);

太さ:0%~100%まで指定可能で、数字が大きいほど太くなります。

色:#ffff00のような形式でカラーコードを指定できます。yellowやredも指定可能です。

グラデーション:0%~100%まで指定可能で、数字が大きいほどグラデーションが大きくなります。

蛍光ペン風マーカを付けてみる

.marker {
    background: linear-gradient(transparent 0%, #ffff00 0%);
}

マーカーの太さを変えてみる

.marker {
    background: linear-gradient(transparent 50%, #ffff00 0%);
}

マーカーの色を変えてみる

.marker {
    background: linear-gradient(transparent 50%, #ff00ff 0%);
}
HTMLとCSS関連記事





これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]