前回の「div」タグを使うと、色々な効果が楽しめます。


・ハロウィンらしくしてみる



　ちなみに、上記の枠は以下のようにしています。以下では枠と背景に関する指定のみ緑色にしています。

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px solid #FF6600;padding:8px;">　どうでしょう、ハロウィンっぽく感じませんか？
　背景の黄色は濃くすると文字が見えなくなってしまいます。ですので薄めが良いでしょう。
　<b>または、こうやって太字にするのも良いかもしれません。</b>
</div>

　活動報告の最初から最後までを囲んでしまえば、とてもハロウィンな感じです。

　「background-color:#FFE070;」は枠の中の色指定です。「#FFE070」で黄色です。
　「border:20px solid #FF6600;」は枠の太さと線の種別、色の指定です。「20px」が枠線が20ポイント分、「solid」が実線、「#FF6600」でオレンジです。
　「padding:8px;」は、枠と内側の文字の間の距離を空ける指定です。「8px」で枠線と中の文字の間を8ポイント分だけ空けています。


・枠線を立体的にしてみる



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

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px outset #FF6600;padding:8px;">　立体的に隆起したように表示
</div>

　「border:20px outset #FF6600;」の「outset」が枠線の形式についての指定です。




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

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px inset #FF6600;padding:8px;">　立体的に窪んだように表示
</div>

　「border:20px inset #FF6600;」の「inset」が枠線の形式についての指定です。




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

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px ridge #FF6600;padding:8px;">　立体的に隆起した線で表示
</div>

　「border:20px ridge #FF6600;」の「ridge」が枠線の形式についての指定です。




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

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px groove #FF6600;padding:8px;">　立体的に窪んだ線で表示
</div>

　「border:20px groove #FF6600;」の「groove」が枠線の形式についての指定です。

　お好み次第ですが、平らな枠では今ひとつ、という場合は試してみても良いかもしれません。


・幅を変えてみる



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

<div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px solid #FF6600;padding:8px;width:50%;">　幅を50％にする
</div>

　「width:50%;」の「50%」が幅の指定です。また「100px」のようにポイント数での指定も可能です。
　パーセントで指定した場合、パソコンやスマホで活動報告の枠の幅が変わっても、「div」タグの枠との比率は同じに出来ます。
　逆にポイント数で指定した場合、「div」タグの枠は中の文字の何文字分、といった固定が可能です。

　更に前回の「center」タグと組み合わせると中央に寄せることができます。

　幅を50％にする

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

<center><div style="font-size:14px;line-height:150%;background-color:#FFE070;border:20px solid #FF6600;padding:8px;width:50%;">　幅を50％にする
</div></center>


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


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

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


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

☆１回目☆　中央寄せ。
☆２回目☆　枠の形式。《本稿》