【CSS】テキスト中央寄せの基本
CSSのtext-align: center;プロパティを使って、テキストを中央に配置する方法を解説します。
🔹 部分コード
<div class="text-center">
テキストが中央に表示されます。
</div>
<style>
.text-center {
text-align: center;
}
</style>
💻 完全動作コード（※このコピペのみでHTMLで動作するコード）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキスト中央寄せ</title>
<style>
.text-center {
text-align: center;
}
</style>
</head>
<body>
<div class="text-center">
テキストが中央に表示されます。
</div>
</body>
</html>
🧩 応用と活用方法
text-align: center;は、中央揃えを実現する最も基本的なCSSプロパティの一つです。テキストだけでなく、インライン要素（画像やボタンなど）にも影響を与えるため、シンプルながら強力な整列手段として使われます。
📱 レスポンシブとの併用
画面幅が変化しても安定した中央揃えを保てるため、スマホ表示にも強く、段落内の注意書きやタイトルなどにも有効です。ただし、ブロック要素そのものを中央にしたい場合はmargin: 0 auto;との併用が必要です。
中央揃えはユーザーの視線を引きつける効果がある一方で、使いすぎると読みにくくなる場合もあります。用途に応じて、適切なバランスで使用しましょう。
🎯 中央揃えの実践的テクニック
text-align: center;はシンプルながら奥が深いプロパティです。インライン要素だけでなく、display: inline-block;を設定した要素にも適用できるため、ナビゲーションメニューの項目を中央揃えにするなど、幅広い用途に活用できます。
📊 複数行テキストの中央揃え
段落全体を中央寄せにする場合、<p class="text-center">で囲むだけでOKです。ただし、長文の場合は読みやすさを考慮し、適度な幅制限（max-width: 600px;など）を加えるとより美しく表示されます。
🖼️ 画像とテキストの混在レイアウト
画像とキャプションを中央揃えにするには、<figure class="text-center">で囲みます。この場合、画像自体はブロック要素なのでmargin: 0 auto;も併用すると確実です。<figcaption>はインライン要素なので、text-align: center;だけで中央寄せになります。
注意点として、中央揃えは「強調」の効果があるため、使いすぎるとかえって重要な部分が目立たなくなることがあります。見出しや特別な注意書きなど、本当に中央寄せが必要な要素に限定して使用しましょう。また、フォーム要素のラベルは左揃えの方がユーザーにとって認識しやすい場合が多いです。
レスポンシブデザインでは、@media (max-width: 768px) { .text-center { text-align: left; } }のように、スマホ表示時には左寄せに戻すなどの工夫も有効です。状況に応じて最適な配置を選択することが大切です。