CSS | letter-spacing | 文字の間隔

letter-spacingは文字の間隔を指定するためのCSSプロパティです。

文字の間隔にはletter-spacing、単語の間隔にはword-spacingを使います。

.sampleクラスを持つ<div>要素を作ります。

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

実行結果初期状態

ABC あいう

letter-spacingに10px、15px、20pxを指定した例を示します。

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: 10px;
}

実行結果10px

ABC あいう

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: 15px;
}

実行結果15px

ABC あいう

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: 20px;
}

実行結果20px

ABC あいう

マイナス値を指定すると文字が近づきます。-5px、-10px、-15pxを指定した例を示します。

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: -5px;
}

実行結果-5px

ABC あいう

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: -10px;
}

実行結果-10px

ABC あいう

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: -15px;
}

実行結果-15px

ABC あいう

normalまたは0がデフォルト値です。

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: normal;
}

実行結果normal

ABC あいう

HTML


<div class="sample">
    ABC あいう
</div>

CSS


.sample {
    font-size: 2rem; /* 文字の大きさ */
}

CSS


.sample {
    letter-spacing: 0;
}

実行結果0

ABC あいう