HTMLでタイトルを真ん中にするには？

HTMLでタイトルを真ん中にするにはどうすればいいですか？

HTMLでタイトルを真ん中にするには？

Webページを作成する際、タイトルを中央寄せにしたい場合があります。HTMLでは、いくつかの方法でタイトルを中央揃えにすることができます。この記事では、その方法とそれぞれのメリット・デメリット、そして具体的なコード例をご紹介します。

1. テキストの中央寄せ

タイトルを中央寄せする最も簡単な方法は、<h1> などの見出しタグで囲んだテキストに対して、style 属性を使って text-align: center; を指定することです。


<h1 style="text-align: center;">中央寄せされたタイトル</h1>

この方法のメリットは、HTMLの知識が少なくても簡単に実装できる点です。しかし、スタイルをHTMLに直接記述する形になるため、CSSでスタイルを管理したい場合や、複数のページで同じスタイルを適用したい場合には不向きです。

CSSを使ってタイトルを中央寄せするには、<style>タグでスタイルを定義するか、外部CSSファイルを読み込む必要があります。以下は、<style>タグを使って、h1要素とh2要素の中央寄せを行う例です。


<style>
h1, h2 {
  text-align: center;
}
</style>

外部CSSファイルを使う場合は、HTMLファイルの<head>タグ内に以下のように記述します。


<link rel="stylesheet" href="style.css">

外部CSSファイル "style.css" には、先ほどと同じようにスタイルを記述します。CSSを使った中央寄せは、HTMLとCSSを分離することでコードが見やすくなる、複数のページで同じスタイルを共有できるなどのメリットがあります。

3. タグを使った中央寄せ

タグは、本来は表を作成するためのタグですが、レイアウト調整にも使われます。タイトルを中央寄せするために、

タグを使う方法もあります。


<table width="100%">
  <tr>
    <td align="center">
      <h1>中央寄せされたタイトル</h1>
    </td>
  </tr>
</table>

ただし、

タグをレイアウト調整に使うことは、HTML5以降では非推奨となっており、SEOの観点からも好ましくありません。そのため、特別な理由がない限り、この方法は避けるべきです。

それぞれの方法を以下の表にまとめます。

HTMLでタイトルを中央寄せするには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるため、状況に応じて最適な方法を選ぶようにしましょう。CSSを使った中央寄せが、スタイルとHTMLの分離、再利用性の観点から推奨されます。