【コピペでOK】文字をマーカー線で強調する方法を解説!

f:id:nekokunkun:20210920234541j:plain

今回の問題は?

文字をマーカー線で強調すると、伝えたいポイントをわかりやすく表現できます。

今回は、コピペOKのHTMLで文章にマーカー線をひく方法を書いていきます。

マーカーサンプル

太めのマーカー

<span style="background: linear-gradient(transparent 50%, #ffff00 0%);">太めのマーカー</span>

 

細めのマーカー

<span style="background: linear-gradient(transparent 70%, #ffff00 0%);">細めのマーカー</span>

 

極細のマーカー

<span style="background: linear-gradient(transparent 85%, #ffff00 0%);">極細のマーカー</span>

色コード(16進数)のサンプル一覧表

マーカーの色は、「#××××××」で変えることができます。

コード一覧表を記載します。

色一覧表
色名 色コード
色名
色コード
  white #ffffff   green #008000
  silver #c0c0c0   aqua #00ffff
  gray #808080   teal #008080
  black #000000   blue #0000ff
  red #ff0000   navy #000080
  maroon #800000   fuchsia #ff00ff
  yellow #ffff00   purple #800080
  olive #808000   orange #ffa500
  lime #00ff00      

まとめ

文章の中で「ポイント」を伝えたい場合は、マーカー線で強調することで簡単にアピールすることができます。文章のアクセントにもなりますので効果的に利用してみてください。