[新着] Webテンプレートを仮オープンしました
letter-spacing は、文字と文字の間隔を指定するプロパティです。
p {
letter-spacing: 0.5em;
}
| letter-spacing | 間隔を指定します |
|---|
間隔の指定は、数値+単位（px、em、他）で指定します。
※デフォルトは normal（標準）です。（例：letter-spacing: normal）
【IEの不具合】
このプロパティを指定した要素内でbr要素を連続させると、2つ目（偶数個目）のbrが無視されてしまいます。例えば5つのbr要素を連続させた場合は、2番目と4番目のbrが無視され、3つ分の改行しか入らなくなります。
br要素に letter-spacing: 0 または letter-spacing: normal を適用させると、この不具合を回避することができます。
文字間隔の調整には、スタイルシートを使用するようにしましょう。
※スペースを使った文字間隔の調整は、あまり好ましくありません（音声ブラウザで正常に読み上げられなくなります）。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
#example1 { letter-spacing: 0.3em; }
#example2 { letter-spacing: 1em; }
#example3 { letter-spacing: 0.5em; }
#example4 { letter-spacing: 0.5em; }
#example4 br { letter-spacing: 0; }
-->
</style>
</head>
<body>
<p>標準の文字間隔</p>
<p id="example1">文字間隔を0.3emに指定</p>
<p id="example2">文字間隔を1emに指定</p>
<p id="example3">IEの不具合を検証<br><br>1つ分の改行しか入らない</p>
<p id="example4">IEの不具合を検証<br><br>2つ分の改行が入る</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
標準の文字間隔
文字間隔を0.3emに指定
文字間隔を1emに指定
IEの不具合を検証
1つ分の改行しか入らない
IEの不具合を検証
2つ分の改行が入る
