CSSテンプレート：text-align: center;

📝 使用用途

このテンプレートは、テキストや見出しを中央揃えにしたい場面で使用します。タイトル、ボタン、案内文などをページ中央に配置する場合に便利です。

📘 解説

text-align プロパティに center を指定することで、テキストをその親要素の中央に揃えることができます。このテンプレートでは、クラス名 .text-center を使って簡単に適用できるようにしています。

✅ デモ

これは中央揃えのテキストです。

📄 コード（部分）

<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>
  <p class="text-center">これは中央揃えのテキストです。</p>
</body>
</html>

コピーしました！

🧩 応用と活用方法

text-align: center;は単純ながら非常に汎用性の高いCSSプロパティです。基本的なテキストの中央揃えだけでなく、様々な場面で活用できます。

📌 複数要素の一括中央揃え

親要素に.text-centerを適用すると、その中にある全てのインライン要素やテキストが中央揃えになります。例えば<div class="text-center">で囲った中にある<p>、<span>、<a>などが一括で中央配置されます。

🎯 ボタンやナビゲーションの配置

ナビゲーションメニューやボタン群を中央に配置したい場合、それらを囲むコンテナにtext-align: center;を適用すると効果的です。ただし、ブロックレベル要素のボタン（<button>や<a>にdisplay: inline-block;を設定したもの）に対しては、親要素のこの設定が有効です。

⚠️ 注意点

このプロパティはインライン要素やテキストに対して有効で、ブロックレベル要素そのものの位置を中央に移動させるものではありません。ブロック要素自体を中央寄せしたい場合はmargin: 0 auto;を併用する必要があります。

また、レスポンシブデザインでは、画面幅が広い場合に中央揃えが効果的ですが、モバイル端末など狭い画面では左揃えの方が読みやすい場合もあるため、メディアクエリで状況に応じて切り替えるのも良い方法です。