HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのcenterタグとは？中央揃えの基本とCSSでの代替方法を解説

HTMLの<center>タグは、テキストやコンテンツを水平方向に中央揃えで表示するための要素です。かつては見出しや段落、表などをページの中央に配置する際に広く使われていました。

注意：<center>タグはHTML5では廃止されており、最新のWeb制作では使用が推奨されません。中央揃えを実装したい場合は、CSSを使うことが公式にも提案されています。

centerタグが非推奨となった理由

<center>タグは、「文書の構造」と「見た目の装飾」を分離するというHTMLの設計思想に反するため、HTML5で廃止されました。レイアウトやデザインに関する指定はすべてCSSに任せるのが、現代のWeb標準におけるベストプラクティスです。

CSSによる代替方法

テキストを中央揃えにしたい場合は、CSSのtext-align: center;を使用します。

.center {
  text-align: center;
}

このように記述することで、<center>タグと同じ表示結果を、より柔軟かつ保守しやすい形で実現できます。

centerタグの実装例

ここからは、HTMLでcenterタグを使った具体的な例を紹介します。次のコードでは、予算計算用テーブルのタイトルを中央揃えで表示しています。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 2px solid blue;
}
</style>
</head>
<body>
<table>
  <center>予算計算用テーブル</center>
  <caption>支出一覧</caption>
  <tr>
    <th>項目</th>
    <th>費用</th>
  </tr>
  <tr>
    <td>製品開発</td>
    <td>500000</td>
  </tr>
  <tr>
    <td>マーケティング</td>
    <td>500000</td>
  </tr>
  <tr>
    <td>サービス</td>
    <td>100000</td>
  </tr>
  <tr>
    <td>サポート</td>
    <td>100000</td>
  </tr>
  <tr>
    <td>メンテナンス</td>
    <td>100000</td>
  </tr>
  <tr>
    <td colspan="2">合計予算＝1,300,000ルピー</td>
  </tr>
</table>
</body>
</html>

出力結果

HTMLのcenterタグとは？中央揃えの基本とCSSでの代替方法を解説


  1. HTMLのth要素におけるcolspan属性の使い方をわかりやすく解説

    <th>要素のcolspan属性は、見出しセル（ヘッダーセル）が横方向にまたぐ列の数を指定するために使用されます。テーブルで複数の列にまたがる見出しを作成したい場合に便利な属性です。 colspan属性の基本構文 colspan属性の書き方は以下のとおりです。 <th colspan="num"> ここで「num」には、見出しセルがまたぐ列の数（正の整数）を指定します。たとえば「2」を指定すれば、その見出しセルは2列分の幅を持つことになります。 実装例 それでは、<th>要素のcolspan属性を実装した具体的な例を見てみましょう。以下の

  2. HTMLのcolgroupタグとは？テーブルの列をまとめてスタイルする方法

    <colgroup>タグとは<colgroup>タグは、HTMLテーブル内の1つ以上の列（カラム）をひとつのグループとしてまとめるための要素です。このタグを使うことで、グループに含まれるすべての列に対して、まとめてスタイルを適用できます。セルや行ごとに個別にスタイルを記述する必要がないため、コードがすっきりし、テーブル全体のデザイン管理も効率的になります。主な属性span − 列グループが対象とする列の数を指定します。たとえば「span=3」と設定すると、先頭から3列分が同じグループとして扱われます。使用例それでは、<colgroup>タグを使った実際の実装