コピペするだけで文章の一部に背景色をつける方法です

2012年09月28日


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


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


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


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




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


西暦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;

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



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




コピーコード




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




でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。