HTML/CSS

【HTML】文字にマーカーを引く方法

NOBU
NOBU
ブログやサイトのページを作るとき、
文字にマーカーをつけることで、文章を目立たせることができ、
読み手にも大事な部分をわかりやすく伝えることができます。
今回は文字にマーカーを引く方法(HTML)をご紹介します。

文字にマーカーを引くHTMLタグをおぼえよう

「テキストモード」でページを作成をするとき、
文章に以下のHTMLタグの記述を加えます。

<span style=”background-color: #ffff00;”>マーカーを引きたい文字</span>

これが基本のHTMLタグとなるので、よく使う場合はパソコンの辞書登録をしておくとよいかもしれませんね。

実用例をみてみよう

では実際に例をあげてみます。
仮に「ぼくは100万円を当てた!」という文章を書くとします。
「100万円」という文字の部分に黄色のマーカーを引いてみることにします。

(例)黄色のマーカー・・・カラーコードは「#ffff00
ぼくは100万円を当てた!

(実際のテキストページでの入力)

ぼくは<span style=”background-color: #ffff00;”>100万円</span>を当てた!

と、こんな感じですね。

他にもマーカーの色を変えてみよう

ちなみに今回は黄色のマーカーでしたが、
他の色に変えたければ、コードの部分だけを変えればOKです。

(例)パールグリーンのマーカー・・・カラーコードは「#ccffcc
ぼくは100万円を当てた!
ぼくは<span style=”background-color: #ccffcc;”>100万円</span>を当てた!

(例)ピンクのマーカー・・・カラーコードは「#ff99cc

ぼくは100万円を当てた!

ぼくは<span style=”background-color: #ff99cc;”>100万円</span>を当てた!

まとめ

NOBU
NOBU
いかがでしょうか。
私はマーカータグを単語登録しています。
使いたいときに「あれ、たしか何だっけ・・・」と考える時間がもったいないですし、どこかのサイトを検索するのも時間のロスです。

辞書登録を1回済ませておけば「マーカー」と変換すれば、ぽんっと
「<span style=”background-color: #ffff00;”>マーカー</span>」
と出てくるのでサクっと作業ができちゃいます。

あなたもぜひお試ししてみてはいかがでしょうか。
ブログを書く時間を節約できると思いますよ。