今さら聞けない！Web制作の基礎知識をわかりやすく解説

【HTML】要素を真ん中にする方法｜初心者でもできる！CSSでのセンタリング完全ガイド

schedule
Tags: HTML

はじめに

Webページを作成する際、テキストや画像など様々な要素を思い通りに配置したい場面に遭遇するかと思います。その中でも、要素を中央に配置する「センタリング」は、ページの見た目を美しく整えるための基本的なテクニックの一つです。

しかし、HTMLの構造やCSSの特性によって、センタリングの方法は一つではありません。要素の種類や状況に合わせて、適切な方法を選ぶ必要があるのです。

そこで、この記事ではHTMLの要素を中央寄せする方法について、初心者の方にも理解しやすいよう、具体的なコード例を交えながら詳しく解説してまいります。

水平方向のセンタリング：インライン要素の場合

まずは、テキストボックスやボタンなど、横並びに配置されるインライン要素を水平方向に中央寄せする方法を見ていきましょう。

インライン要素を中央寄せする方法は主に以下の3つです。

  1. text-align: center; を親要素に適用する

    • 親要素：センタリングしたい要素を囲っている要素
    • 親要素に対してtext-alignプロパティをcenterに設定することで、その要素内のインライン要素が中央寄せされます。
    • コード例： 
      <div style="text-align: center;">
  <p>このテキストは中央寄せされます。</p>
</div>

  2. margin: 0 auto; を要素に適用する

    • センタリングしたい要素自身に、左右の余白を自動調整 (margin: 0 auto;) することで中央寄せを実現します。
    • 要素の幅が指定されている場合に有効な方法です。
    • コード例： 
      <div style="width: 300px; margin: 0 auto;">
  <p>この要素は中央寄せされます。</p>
</div>

  3. フレックスボックスを利用する

    • フレックスボックスは、要素の配置を柔軟に制御できるレイアウト方法です。
    • 親要素にdisplay: flex;を設定し、justify-content: center;とすることで、子要素を水平方向に中央寄せできます。
    • コード例： 
      <div style="display: flex; justify-content: center;">
  <p>この要素は中央寄せされます。</p>
</div>

水平方向のセンタリング：ブロック要素の場合

次に、見出しや段落など、縦並びに配置されるブロック要素を水平方向に中央寄せする方法をご紹介します。

ブロック要素の場合は、以下の2つの方法が考えられます。

  1. margin: 0 auto; を要素に適用する

    • インライン要素と同様に、左右の余白を自動調整することで中央寄せします。
    • 要素の幅が指定されている場合にのみ有効です。
    • コード例： 
      <div style="width: 500px; margin: 0 auto;">
  <h2>この見出しは中央寄せされます。</h2>
</div>

  2. フレックスボックスを利用する

    • ブロック要素でもフレックスボックスを利用することで中央寄せが可能です。
    • 親要素にdisplay: flex;、justify-content: center;を設定します。
    • コード例： 
      <div style="display: flex; justify-content: center;">
  <h1>この見出しは中央寄せされます。</h1>
</div>

垂直方向のセンタリング

要素を垂直方向に中央寄せする方法は、水平方向よりも少し複雑になります。ここでは、代表的な3つの方法をご紹介しましょう。

  1. line-height を利用する (単一行テキストの場合)

    • 一行だけのテキストを垂直方向に中央寄せする場合に有効です。
    • 親要素の高さheightと、テキストの行の高さline-heightを同じ値に設定します。
    • コード例： 
      <div style="height: 100px; line-height: 100px;">
  <p>このテキストは垂直方向に中央寄せされます。</p>
</div>

  2. vertical-align を利用する (テーブルセル内の場合)

    • テーブルのセル内で要素を垂直方向に中央寄せする場合に利用します。
    • センタリングしたい要素にvertical-align: middle;を設定します。
    • コード例： 
      <table>
  <tr>
    <td style="vertical-align: middle;">
      <p>このテキストはセル内で垂直方向に中央寄せされます。</p>
    </td>
  </tr>
</table>

  3. フレックスボックスを利用する

    • フレックスボックスは垂直方向のセンタリングにも有効です。
    • 親要素にdisplay: flex;、align-items: center;を設定します。
    • コード例： 
      <div style="display: flex; align-items: center; height: 200px;">
  <p>この要素は垂直方向に中央寄せされます。</p>
</div>

水平・垂直方向のセンタリング

最後に、要素を水平・垂直方向の両方に中央寄せする方法を見ていきましょう。

  1. フレックスボックスを利用する

    • フレックスボックスは、水平・垂直方向の両方に中央寄せする場合に最も効果的な方法です。
    • 親要素にdisplay: flex;、justify-content: center;、align-items: center;を設定します。
    • コード例： 
      <div style="display: flex; justify-content: center; align-items: center; height: 300px;">
  <p>この要素は水平・垂直方向に中央寄せされます。</p>
</div>

  2. グリッドレイアウトを利用する

    • グリッドレイアウトも、要素を柔軟に配置できるレイアウト方法です。
    • 親要素にdisplay: grid;を設定し、place-items: center;とすることで、子要素を水平・垂直方向に中央寄せできます。
    • コード例： 
      <div style="display: grid; place-items: center; height: 300px;">
  <p>この要素は水平・垂直方向に中央寄せされます。</p>
</div>

まとめ

HTMLで要素を中央寄せする方法は、要素の種類や状況によって様々です。

この記事では、代表的なセンタリングの方法をご紹介しました。

今回の内容を踏まえ、それぞれの方法の特徴を理解し、適切な方法を選択することで、より洗練されたWebページを作成できるようになるでしょう。

関連記事