ども、ピアノ教室管理人です。


今回は文章の一部に背景色をつける方法をご紹介します。


テスト勉強なんかでおなじみですよね。
大切な部分にマーカーで色をつけるアレです。


ではさっそくサンプルを見てみましょう。

文章の背景に色を付けたサンプル

西暦604年4月3日、聖徳太子は十七条の憲法を制定し、豪族たちに仏法を敬い、天皇に従いうことを説いた。

上記の「十七条の憲法を制定」に、黄色い背景色を付けてみました。

サンプルのタグ

上記のサンプルのＨＴＭＬタグはこうなっています。

西暦604年4月3日、聖徳太子は<span style="background-color:#FFFF88; padding:3px;">十七条の憲法を制定</span>し、豪族たちに仏法を敬い、天皇に従いうことを説いた。

背景に色を付けたい部分を

<span style="background-color:#FFFF88; padding:3px;">十七条の憲法を制定</span>

という具合に<span>〜</span>で囲んでいます。




それでは
カスタマイズしたい人のために解説しておきますね。

タグの解説

<span style="background-color:#FFFF88; padding:3px;">十七条の憲法を制定</span>

■background-color:#FFFF88;

これが背景色の色を指定している部分です。


色の指定についてはコチラを参照してください。




■padding:3px;

背景の色と文字との余白を指定しています。

この場合は、上下左右に3pxの余白になります。


上下左右バラバラに指定したい場合はこうします。

padding:3px 4px 5px 6px;

順に「上」「右」「下」「左」の余白の値になります。



ただ余白をつけ過ぎると
行間や文字間隔が変になる可能性がありますので
プレビューなどで確認しながら指定してください。

コピーコード

<span style="background-color:#FFFF88; padding:3px;">ここに背景色を付けたい文字を記載</span><br />

コピーしてお使いくださいネ。




でわ ^^)/~

このブログの目次