TOP ＞ スタイルシートで文字をデザイン ＞ 単語の間隔を指定する
単語の間隔を指定する
英文でWebページを作成する場合に重宝する機能です。英文では単語と単語の間をスペースで区切りますが、 その幅をスタイルシートで指定することが可能です。
CSSのword-spacingプロパティを使って単語間の幅を制御します。
letter-spacingプロパティ同様に、 間隔の値はpt（ポイント）やpx（ピクセル）などの単位で指定します。通常間隔にするには「normal」で指定します。 （デフォルトはnormal）
間隔にマイナスを指定できるのも、letter-spacingプロパティと同じです。 Webブラウザによって表示の仕方は異なりますが、たいていは単語同士が重なって表示されます。
日本語では単語をスペースで区切ることはしませんので、日本語でWebページを作る人にはあまり役に立たないかもしれません。 （日本語でもスペースを入れれば効果が出ます）
単語の間隔を指定する
【書き方】
word-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; word-spacing: 10px;} .s2{ color: #ff3300; background-color: #99ff99; word-spacing: 3pt;} .s3{ color: #33ff00; background-color: #9900ff; word-spacing: -20px;} --> </style> </head> <body bgcolor="silver"> <p>スタイルシートを使って単語の間隔を指定してみましょう。</p> <p><span class="s1">このように 単語間の スペースの幅を 設定できます。 10pxに 指定しています。</span></p> <p><span class="s2">このように 単語間の スペースの幅を 設定できます。 3ptに 指定しています。</span></p> <p><span class="s3">単語間隔を マイナスで 指定することも 出来ます。 IEの場合は 単語が 重なって 見えます。 -20pxで指定しています。</span></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
