【CSS】文字の位置を微調整する方法

「文字をもう少しだけ右にずらしたい！」

「文字と文字の間をちょっとあけたい！」

文字の位置を微調整する方法を解説します。

微調整ではなく、しっかり右寄せ、中央寄せする方法はこちら↓

【全体的に右へずらす】padding

全体的に左へずらすにはpadding（またはpadding-left）を使います。

<style>
.example2{
    /*コレ*/padding-left: 20px;
}
.example{
    border: 1px solid #999;
    letter-spacing: 0;
    margin-top: 10px;
    background: #ddf2f2;
}
</style>
<div class="example example2">padding-left: 20px</div>
<div class="example">何もしない状態</div>

paddingは要素の内側の余白を調節するCSSです。

これで空白を作ると文字が空白に押され、右にずれます。

1文字分ずらしたい場合は「padding-left:1em」のようにemで指定しましょう。

emは文字サイズを基準とする大きさの単位です。

【一行目だけずらす】text-indent

一行目だけずらすにはtext-indentを使います。

<style>
.example3{
    /*コレ*/text-indent: 20px;
}
.example{
    border: 1px solid #999;
    letter-spacing: 0;
    margin-top: 10px;
    background: #ddf2f2;
}
</style>
<div class="example example3">text-indent: 20px</div>
<div class="example">何もしない状態</div>

text-indentは子要素のテキスト一行目を左右にずらすCSSです。

文頭を1字下げしたい場合に使います。

paddingとtext-indentの違い

この2つの違いは2行になったとき明確になります。

paddingはすべての行に影響がありますが、text-indentは一行目だけです。

↑text-indent

↓padding-left

また、text-indentはマイナスの値にすることで左にずらすことができますが、paddingはマイナスの値を指定できません。

【文字の間隔をあける】letter-spacing

文字同士の左右の間隔をあけるにはletter-spacingを使います。

<style>
.example4.example{
    /*コレ*/letter-spacing: 5px;
}
.example{
    border: 1px solid #999;
    letter-spacing: 0;
    margin-top: 10px;
    background: #ddf2f2;
}
</style>
<div class="example example4">letter-spacing: 5px</div>
<div class="example">何もしない状態</div>

letter-spacingは字間を調整するCSSです。

各文字の右に指定した値分の隙間を作ります。

実際は0.1emや1px程度の小さな隙間になるでしょう。

【行間をあける】line-height

文字の上下の隙間、つまり行間をあけるにはline-heightを使います。

<style>
.example5{
    /*コレ*/line-height: 3;
}
.example{
    border: 1px solid #999;
    letter-spacing: 0;
    margin-top: 10px;
    background: #ddf2f2;
}
</style>
<div class="example example5">line-height: 2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
<div class="example">何もしない状態テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>

line-heightは行間を調整するCSSです。

指定した数値の文字数分 高さが確保され、その上下中央に文字が置かれます。

よって1行の上下の隙間は次のような式になります。

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。

【縦にずらす】vertical-align

文字を縦にずらしたいときはvertical-alignを使います。

<style>
.example6 span:last-child{
    /*コレ*/vertical-align: -10px;
}
.example{
    border: 1px solid #999;
    letter-spacing: 0;
    margin-top: 10px;
    background: #ddf2f2;
}
</style>
<div class="example example6"><span>何もしない状態</span><span>vertical-align: -10px</span></div>

vertical-alignはインライン要素の縦位置を調整するCSSです。

プラスの値を指定すると上に、マイナスの値を指定すると下にずれます。

vertical-alignはtdに指定すると子要素の位置を調整できますが、divなどのブロック要素には効きません。

【まとめ】文字の位置を微調整する方法

• 【全体的に右へずらす】padding
• 【一行目だけずらす】text-indent
• 【文字の間隔をあける】letter-spacing
• 【行間をあける】line-height
• 【縦にずらす】vertical-align

以上、文字の位置を微調整する方法でした。