今回は文字の背景色を変える方法を紹介します。


・文字の背景色を変える

背景色の変更

　上記は、以下のように記述しています。

<span style="background-color:#AACCFF;">背景色の変更</span>

　なお、文字と背景の色双方を一緒に変更することも出来ます。

文字と背景の色の変更

　上記は、以下のように記述しています。

<span style="color:#880000;background-color:#AACCFF;">文字と背景の色の変更</span>

　背景の方が広範囲の色が変わるので、文字の色を変えるよりもインパクトがあるかもしれません。

文字と背景の色の変更

　上記の指定は、下記のようにしています。

<font size="+2"><b><span style="color:#880000;background-color:#FFCCEE;">文字と背景の色の変更</span></b></font>

　ちなみに、「<font size="+2">」や「<b>」はフォントを大きくしたり太字にするもので、直接は関係ありません。

　上記の場合、何だか周囲に余裕がなくて、少々狭苦しい感じがします。そこで、上下に余白を持たせてみました。

文字と背景の色の変更

　上記は、下記のように指定しています（サイズと太字に関する部分は除外）。

<span style="color:#880000;background-color:#FFCCEE;padding-top:5px;padding-bottom:5px;">文字と背景の色の変更</span>

　「padding-top:5px;」「padding-bottom:5px;」がそれぞれ上と下の余白設定です。「5px」は5ピクセル分ですので、10や20などもっと広くすることも出来ます。
　左右も欲しい場合は全体の指定を使います。

文字と背景の色の変更

　上記は、下記のように指定しています（サイズと太字に関する部分は除外）。

<span style="color:#880000;background-color:#FFCCEE;padding:5px;">文字と背景の色の変更</span>

　「padding:5px;」が全体への指定です。

　このようにすれば、ゆとりを持ったレイアウトにできます。


・リンクの背景色を変える場合の注意点

　背景の色をリンクの色と近いものにしてしまうと、見えにくくなります。以下に例を示します。

活動報告での事例紹介

　上記のリンクを既読にすると紫色になり、非常に見づらくなると思います。
　リンクの色は、パソコンで見た場合とスマホで見た場合で異なります。以下に例を示します。

・パソコン（未読リンク）
　■■■(#3366AA)
・パソコン（既読リンク）
　■■■(#885577)
・パソコン（リンクにカーソルを重ねているとき）
　■■■(#339933)

・スマホ（未読リンク）
　■■■(#00AA77)
・スマホ（既読リンク）
　■■■(#885577)

　括弧の中は、それぞれのカラーコードです。
　リンクに背景色を設定する場合は、これらと区別の付く色にした方が無難です。具体的には、なるべく白（#FFFFFF）に近い薄い色にすると良いと思います。
　文字と背景の色の変更の背景の薄桃色（#FFCCEE）は赤が「FF」、緑が「CC」、青が「EE」で構成されています。それぞれは十六進数ですので最も明るいのが「FF」で、最も暗いのが「00」となります。


・検索機能と活動報告の活用
活動報告での事例紹介


・活動報告で使えるHTMLタグについて

☆１回目☆　リンクや色、サイズについて。
☆２回目☆　色と太字について。
☆３回目☆　色について補足（カラーコード）。
☆４回目☆　画像の掲載。
☆５回目☆　背景色の変更。《本稿》
☆６回目☆　下線、訂正線、上付き文字、下付き文字、「<」「>」の記述。


・活動報告のテキスト配置について

☆１回目☆　中央寄せ。
☆２回目☆　枠の形式。