文字の間隔
ここではCSSで文字と文字の間隔を設定する方法を解説していきます。文字の間隔を設定するにはCSSプロパティletter-spacingを設定します。
letter-spacing
CSSプロパティletter-spacingを設定して文字の間隔を設定していきましょう。letter-spacingに入力する値にはnormalか数値(px値、em値など)を設定します。キーワードのnormalは初期値となります。
CSSプロパティ | 解説 |
letter-spacing | 文字の間隔 |
HTMLコード記述例
<p class="letter-normal">初期値の文字間隔はこんな感じ。</p>
<p class="letter-10px">文字間を10px離すとこんな感じ。</p>
外部ファイルCSS記述例
@charset "utf-8";
p.letter-normal { letter-spacing: normal;}
p.letter-10px { letter-spacing: 10px;}
ブラウザ表示例
初期値の文字間隔はこんな感じ。
文字間を10px離すとこんな感じ。
CSS文字 関連記事
- 文字色 … color
- 書体を設定する … font-family
- font-familyの書体一覧 … font-family
- 文字の大きさ … font-size
- 文字の太さ … font-weight
- 文字の間隔 … letter-spacing
- 文章の位置 … text-align
- 文章を縦書きで表示する … writing-mode
- 行間を調整する … line-height
- 文字に影をつける … text-shadow