説明
letter-spacingプロパティを使うと文字と文字の間を広げたり、狭めたり文字間隔の設定が行えます。

letter-spacingプロパティは文字間隔の指定が出来ます。
letter-spacingプロパティを使うと文字と文字の間を広げたり、狭めたり文字間隔の設定が行えます。
letter-spacingプロパティの構文は以下の通りです。
letter-spacing: 文字間隔;
文字間隔は以下の設定が出来ます。
指定 | 説明 |
---|---|
normal | デフォルト |
px | ピクセル |
em | 文字数 |
letter-spacingの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。
p {
letter-spacing: 2px;
}
<p>文字間隔を2pxに指定</p>
上記を表示すると以下になります。
文字間隔を2pxに指定
尚、デフォルトのnormalの文字間隔は以下の通りです。
文字間隔をnormalに指定
2emを指定すると以下になります。
文字間隔を2emに指定
マイナスで指定する事も可能です。以下は-2pxで指定しています。
文字間隔を-2pxに指定
マイナスを大きくすると文字が重なったり、表示が逆転して左方向に記述が表示されたりします。
letter-spacingと似たプロパティでword-spacingがあります。word-spacingは単語間隔で、letter-spacingは文字間隔です。
word-spacingが単語単位で間隔を指定するのに対し、letter-spacingは1文字1文字の間隔を指定するといった違いがあります。
検索付「CSSプロパティ早見表」に戻る
スマホ向け「CSSプロパティ一覧」に戻る
★上ページに含まれるプロパティ