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

【CSS】文字の位置を微調整する方法 2022年05月20日

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

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

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

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

【CSS】文字を中央寄せ,右寄せ,左寄せするtext-alignの使い方文字を中央寄せするにはどうするの？文字を中央寄せ,右寄せ,左寄せするtext-alignの使い方を解説します。この記事を読む

【全体的に右へずらす】padding
【一行目だけずらす】text-indent
- paddingとtext-indentの違い
【文字の間隔をあける】letter-spacing
【行間をあける】line-height
【縦にずらす】vertical-align
【まとめ】文字の位置を微調整する方法

【全体的に右へずらす】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です。

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

【CSS】marginとは？paddingとは？両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む

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

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

CSSで使う長さの単位【px･em･%･vw･vh/calc】CSSにはwidth等で大きさ・長さを指定するための単位が複数存在します。またそれらを計算できる仕組みがあります。これらをマスターしてイメージ通りのデザインを作成しましょう。この記事を読む

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

【一行目だけずらす】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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む CSSやhtmlをマンガで学ぶ

📎📎📎📎📎📎📎📎📎📎