CSS 文字の間隔を指定するサンプル(letter-spacing)

nas

CSSの文字の間隔を指定するサンプルです。
letter-spacingプロパティを使用します。

目次

letter-spacingのサンプル

letter-spacingのサンプルです。
文字の間隔を指定を指定します。

<style>
#p1{letter-spacing:normal;} /* 標準の間隔 */
#p2{letter-spacing:5px;} /* 5pxを指定 */
#p3{letter-spacing:20px;} /* 20pxを指定 */
p{border:1px solid #000;width:400px;height:30px;
margin-bottom:10px;text-indent:10px;background:LightCyan;}
</style>
<p id="p1">文字の間隔normalです</p>
<p id="p2">文字の間隔5pxです</p>
<p id="p3">文字の間隔20pxです</p>

以下は、実行結果です。

letter-spacingプロパティの仕様

letter-spacing : 値
値 説明
数値 + 単位 指定した単位で設定します。
normal 通常の間隔にします。(初期値)
値を継承する

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 文字を左寄せ/右寄せにするサンプル(text-align)
CSS 垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える時の改行(overflow-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)

△上に戻る