Yugien - 遊戯苑
テーマ

HTML

この記事では、内容を中央寄せにする旧式の<center>要素がなぜ非推奨なのか、現在はCSSでどう置き換えるかを初心者向けに説明します。

この記事でわかること

The HTML <center> element is obsolete; use CSS (like text-align, margin, flex, or grid) to center content without mixing presentation into markup.

center

<center> は内容を中央寄せに見せますが、今は使わずCSSで置き換える判断が主題です。

このページでできるようになること

まずは直感：<center> って何？

ざっくり言うと、<center> は「中身を中央寄せに見せる」ための古いタグで、今はHTMLに見た目を書かず、CSSで中央寄せします。

正確な定義（仕様に沿った説明）

何のために存在したか

<center> は、文書の一部を中央寄せ表示するために使われていた要素です。

今はどう扱われるか（重要）

現在のHTMLでは <center> はobsolete（古くて使うべきではない）扱いです。ブラウザが表示できても、適合するHTMLとしては推奨されません（試験ではここが狙われます）。

何に適用されるか（対象）

<center> は要素としては「中に他の要素やテキストを入れて囲む」形で使われますが、中央寄せの方法がCSSに移ったため、今の実務では基本的に使いません。

できること / できないこと（制約）

できること
  • 中身を中央寄せに“見せる”
  • 古いページの互換性を保ったまま表示する（多くのブラウザが対応している）
できないこと（重要）
  • 中央寄せの種類（文字だけ/箱ごと/縦横中央など）を目的別に選ぶこと（CSSの方が適切）
  • 保守しやすい設計にすること（見た目がHTMLに散らばる）
  • 「意味」を表すこと（中央寄せは意味ではなく見た目）

影響範囲（レイアウト/描画/ユーザー操作/アクセシビリティ）

レイアウト
<center> は“中央寄せっぽい見た目”に寄せますが、現代のレイアウト要件（レスポンシブ、縦横中央、カードUIなど）はCSSの方が安全です。
描画
中央寄せの見た目は得られても、ページ全体のスタイル設計（共通CSS）と噛み合わないことがあります。
ユーザー操作
中央寄せそのものは操作性を決めませんが、レイアウト設計の自由度が下がり、結果的にクリック領域や並びの調整が難しくなることがあります。
アクセシビリティ
中央寄せの多用は読みづらさにつながることがあります。必要な箇所だけをCSSで制御し、本文は左寄せを基本にするなど、読みやすさ優先で判断します。

まずは見比べる：<center> とCSSの置き換え

古い <center> を使う

この行は中央寄せに見える
リンク も中央寄せに見える

表示はできても、HTMLとしては非推奨の書き方です。

推奨 CSSで中央寄せ（目的別）

文字（インラインの内容）を中央寄せ：text-align: center;

箱（ブロック）を中央へ：margin-inline: auto;

横並びの中央へ：flex

中央寄せの「種類」に合わせてCSSを選べます。

基本の書き方（置き換えの最短の型）

最小サンプル：文字を中央寄せしたい

HTML

<p class="centerText">本文の一部を中央寄せ</p>

CSS

.centerText {
    text-align: center;
}

最小サンプル：箱を中央寄せしたい（幅がある/決まる場合）

HTML

<div class="centerBox">ブロックを中央へ</div>

CSS

.centerBox {
    width: 20rem;
    max-width: 100%;
    margin-inline: auto;
}

最小サンプル：横並びのまとまりを中央に置きたい

HTML

<div class="centerRow">
    <a href="#">前へ</a>
    <a href="#">次へ</a>
</div>

CSS

.centerRow {
    display: flex;
    justify-content: center;
    gap: 1em;
}

実務での使いどころ：古いHTMLをどう直す？

置き換え手順（安全な順）
  • <center> の“目的”を決める（文字中央 / 箱中央 / 横並び中央）
  • <center> を意味のある要素に戻す（例：<p>、<div>、<figure> など）
  • CSSで中央寄せを付ける（text-align / margin-inline / flex / grid）
  • DevToolsで「どの要素に効いているか」を確認してから削除する
中央寄せを“やめる”判断もある
本文の中央寄せは読みづらくなることがあります。見出しや短い注釈だけ中央にする、本文は左寄せに戻す、なども実務ではよくある改修です。

よくあるエラー／症状 早見表

症状：text-align: center を付けたのに箱が中央に来ない
原因候補：text-align は「文字やインライン」を中央にする指定。箱（ブロック）を中央にするなら margin-inline: auto や flex/grid を検討。確認：DevTools の Layout/Computed で対象要素の display と幅。
症状：margin-inline: auto を付けたのに中央に見えない
原因候補：要素が横いっぱい（幅が未指定）で余白が作れない。確認：Box Model の width と、max-width/width があるか。
症状：横並びのボタン群が中央に揃わない
原因候補：親が flex になっていない、親に justify-content がない。確認：親要素の display: flex と justify-content。

試験で問われやすいポイント（HTML5プロフェッショナル レベル1）

まとめ：迷ったときの判断軸（短いチェックリスト）