TOP ＞ スタイルシートで文字をデザイン ＞ 文字の間隔を調整する
文字の間隔を調整する
文字と文字の間をもうちょっと離したら読みやすくなるのに・・・そんな風に思ったことありませんか？ スタイルシートには文字間隔をコントロールする機能もあります。
CSSのletter-spacingプロパティを使うと、文字と文字の間隔を指定することができます。
間隔の値はpt（ポイント）やpx（ピクセル）などの単位で指定します。通常間隔にするには「normal」で指定します。 （デフォルトはnormalになっています。）
間隔の値をマイナスにすることも出来ます。この場合、Webブラウザによって表示のされ方は違いますが、 多くは文字と文字が重なって表示されます。
文字の間隔を調整する
【書き方】
letter-spacing : 間隔の値;
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文字の間隔を調整するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .s1{ color: #0033ff; background-color: #ffff99; letter-spacing: 10px;} .s2{ color: #ff3300; background-color: #99ff99; letter-spacing: 3pt;} .s3{ color: #33ff00; background-color: #9900ff; letter-spacing: -5px;} --> </style> </head> <body bgcolor="silver"> <p>スタイルシートを使って文字の間隔を調整してみましょう。</p> <p><span class="s1">文字間隔を10pxで指定しています。</span></p> <p><span class="s2">letter-spacingプロパティの値で文字間隔が制御できます。3ptで指定しています。</span></p> <p><span class="s3">文字間隔をマイナスで指定することも出来ます。IEの場合は文字が重なって見えます。-5pxで指定しています。</span></p> <p> </p> </body> </html> |
[
スタイルシートで文字をデザイン ]
