WEB制作 シュマリ管理人 景品表示法に基づく表記：当サイトのコンテンツには商品プロモーションが含まれています。

【html・cssコピペ】テキストを蛍光ペンで引いたようなラインマーカーで強調する方法【文字下線】

蛍光ペンマーカーのように文字を強調

実はhtmlのタグではラインマーカーはありません。

しかし、CSSで簡単に装飾できます。

ラインマーカーで文字を強調するサンプルコード

CSS

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff33 60%);
}

クラスを「.marker-yellow」にしています。

クラスって何？という方は、こちらを使ってください。

html

<span style=”background: linear-gradient(transparent 60%, #ffff33 60%);”>文字文字文字</span>

強調したい文字をこちらのspanタグで囲うだけです。コピペしてください。

太字にしたい場合

<span style=”font-weight:bold;background: linear-gradient(transparent 60%, #ffff33 60%);”>文字文字文字</span>

こちらをコピペしてください。

色を変えたい場合

「#ffff33」の部分を別の色コードに変えてください。

色コードって何？という人は、こちらを見れば大丈夫です。
https://www.colordic.org/

駿河屋スタッフ募集中

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

幼少期、絵描きになりたくて毎日絵を描く。地元の写生大会で金賞受賞。
高校生の頃からバンドを組み、作詞・作曲・編曲・映像を担当。ライブで知り合ったバンドマンとは今でも仲良し。

25歳から独学でデザイン・ウェブ制作を0から学習し、ウェブデザイナーとして中途入社。自分だけの武器を探し、デザイン、マークアップ、企画、マーケティング、SNS、広告など片っ端から勉強。
今はその知識を活かしてPdMを担当。

その傍ら数々の副業（イラスト制作、アフィリエイト、古着転売、ハンドメイド、作曲）をして、現在30代に突入。

東海在住。
運営ブログ「シュマリ」は月間3万PV。
読んだ漫画は4万冊。

NEW POSTこのライターの最新記事