文字の背景の余白指定
◆昨日の日記で取り上げたタグに追加の説明です。◆
これは１行だけに使う方が綺麗です。
何行にもなると文字の幅によってでこぼこの背景に
なってしまいますから・・・。
数行になるとこんな感じに
なってしまうんですよ。
背景色を指定した場合は下のようになりますよね。
これだと、少し窮屈な感じを受けます。
◆そんな場合には、
padding:○px を加えると文字の周囲に余白ができます。
○の中には、数字を入れてください。
数字の違う見本を下に書いてみます。
文字の種類や大きさを変えてみても面白いと思います。
●タグです。
<b style="color:文字色;background-color:背景色;padding:○px;"> ♪こんにちは～♪ </b>
◆ padding の数字を 5 にすると・・・
●タグです。
<b style="color:f40b6e;background-color:ffdddd;padding:5px;"> ♪～こんにちは～♪ </b>
◆ padding の数字を 10 にすると・・・
●タグです。
<b style="color:00820a;background-color:a6ffa6;padding:10px;"> ♪～こんにちは～♪ </b>
◆虹色文字などの場合は、背景を黒にすると綺麗だと思います。
文字サイズを 6 にしたので、padding は 15px としてみました。
© Rakuten Group, Inc.
