ども、ピアノ教室管理人です。
今回は文章の一部に背景色をつける方法をご紹介します。
テスト勉強なんかでおなじみですよね。
大切な部分にマーカーで色をつけるアレです。
ではさっそくサンプルを見てみましょう。
文章の背景に色を付けたサンプル
西暦604年4月3日、聖徳太子は十七条の憲法を制定し、豪族たちに仏法を敬い、天皇に従いうことを説いた。
上記の「十七条の憲法を制定」に、黄色い背景色を付けてみました。
サンプルのタグ
上記のサンプルのHTMLタグはこうなっています。
西暦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;
順に「上」「右」「下」「左」の余白の値になります。
ただ余白をつけ過ぎると
行間や文字間隔が変になる可能性がありますので
プレビューなどで確認しながら指定してください。
コピーコード
コピーしてお使いくださいネ。
でわ ^^)/~