ホームへ

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

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

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

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

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

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

padding-left: 20px
何もしない状態
<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を使います。

text-indent: 20px
何もしない状態
<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テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

↑text-indent

↓padding-left

padding-leftテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

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

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

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

letter-spacing: 5px
何もしない状態
<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を使います。

line-height: 2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
何もしない状態テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<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)÷2}×文字サイズ

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

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

【縦にずらす】vertical-align

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

何もしない状態vertical-align: -10px
<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

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

マンガで読める関連記事