letter-spacing:文字同士の間隔を指定する
初期値 | normal |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | <length>値 |
対応ブラウザ | caniuseで確認 |
letter-spacingプロパティの説明
letter-spacing
は、文字同士の間隔を指定します。この値に正の数値が指定された場合は文字と文字の隙間が広がり、負の数値が指定された場合は文字と文字の隙間が狭まります。
半角スペースで区切られた単語同士の間隔指定するには、word-spacing
を使用して下さい。カーニングの規則を変える場合は、font-kerning
というプロパティが用意されています。
letter-spacingに指定できる値
- normal
- 既定値どおりの字間でフォントを並べます。この値はユーザーエージェントが文字列を両端揃えするために字間を変えることを許可します。
- <length>
- 既定の字間に加える空間の寸法を表します。CSSで使用できる単位つきの数値が使用可能です。負の値を使用して字間を詰めることも可能ですが、ブラウザの実装に依存します。この値はユーザーエージェントが文字列を両端揃えするために字間を増減させることを制限します。
letter-spacingの使い方とサンプル
letter-spacing
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
letter-spacing: normal;
/* <length>値 */
letter-spacing: 3px;
letter-spacing: 0.3em;
letter-spacing: -1px;
/* グローバル値 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;
letter-spacingの実例
それでは実際にletter-spacing
プロパティの書き方を見ていきましょう。段落を複数配置し、フォントの既定値と比較した時の字間を確かめます。以下の例は、英文の字間を広げた場合と狭めた場合の結果です。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box > h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box > p {
margin: 0;
padding: .5rem;
background-color: #fff;
}
#ls_n {
letter-spacing: normal;
}
#ls_em {
letter-spacing: 0.3em;
}
#ls_px {
letter-spacing: -3px;
}
HTML
<section class="samp_box">
<h2>letter-spacing: normal;</h2>
<p id="ls_n">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
<h2>letter-spacing: 0.3em;</h2>
<p id="ls_em">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
<h2>letter-spacing: -3px;</h2>
<p id="ls_px">Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.</p>
</section>
letter-spacingに関連するCSSプロパティ
文字揃え・段落の振る舞い | |
---|---|
direction | 文字表記の方向(左右)を指定する |
hanging-punctuation | 句読点、括弧、引用符などの禁則処理を指定する |
letter-spacing | 文字同士の間隔を指定する |
line-break | 句読点や記号などの禁則処理を指定する |
line-height | 行の高さを指定する |
tab-size | タブ(tab)文字の表示幅を指定する |
unicode-bidi | Unicodeのアルゴリズムを上書きして文字表記の方向を変更する |
white-space | 要素内のホワイトスペースの扱い方を指定する |
word-break | 要素の幅を超過するテキストの自動改行について指定する |
word-spacing | 単語同士の間隔を指定する |
word-wrap | インライン要素に対して単語の途中で改行処理を行うかどうかを指定する |
writing-mode | テキストの書字方向やブロックのフローを指定する |
widows | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |