HTMLで文字を中央寄せするときの注意点

bullseye

HTMLで文字を中央寄せする方法と聞くと、「いまさら文字の中央寄せかよ！」と思う方も多いかもしれません。

ただ、自分も中央寄せする方法はいくつか知っていたものの、つい先日まであまり適切でない方法で文字を中央寄せしていました。

今回は、HTMLを用いた文字の適切な中央寄せについて解説しようと思います。

HTMLで文字を中央寄せする方法

document

中央寄せには主に3つ方法があります。

まずは、適切かどうかは別として文字をHTMLで中央寄せする方法を順番に見ていきましょう。

中央寄せしたい文字をcenterタグで囲むとその文字が中央寄せされます。

<center>中央寄せしたい文字</center>

以下のように、ブロック要素にalign=”center”を付け足すと文字が中央寄せされます。

<div align="center">中央寄せしたい文字</div>

スタイルでtext-alignをcenterにすると、文字が中央寄せされます。

<div style="text-align:center">中央寄せしたい文字</div>

で、結局どれを使うべきかというと、3番目の「styleでtext-align:centerを指定する」です。ただ、実際に使うとしたら直接HTMLに書き込まず、CSSで以下のように設定するのが一般的な使い方だと思います。

.center {
   text-align: center;
}

スタイルシートをHTML側で読み込んだら、以下のように書けば中央寄せできます。

<div class="center">中央寄せしたい文字</div>

では、なぜこの方法が望ましいのでしょうか？

html5

まぁ、見出しの通りなんですが、もう少し解説します。

今後、現在よく使われているXHTMLやHTML4はどんどん使われなくなっていき、HTML5が使われるようになるでしょう。

そのHTML5なんですが、基本的にHTMLのタグのみでWebサイトを見た目を変えるべきではない、といった仕様になっています。centerタグのように、タグで直接的に見た目を変えるようなbタグやsタグなども今後は使用するべきではないというわけですね。

なぜこのようなことをするのかというと、今後HTML5は文章構造を表すことに特化した言語を目指していくからだと思います。あくまでHTMLは文章構造を表すものだから、見た目を変えたいときはスタイルシートで指定してね、ということでしょう。

ただ、HTML5でcenterタグは廃止されているはずなですが、使おうと思えば使えますね。HTMLってそこらへん結構あいまいなので詳しくはよくわかりません。

ですが、もしかすると将来本格的に廃止されるかもしれないので、そういった意味からもcenterタグを使うのはここできっぱりやめましょう。

このブログでは、記事の途中で間を取るためにfontawesomeのアイコンを挿入することがあったのですが、これまで自分はcenterタグで中央寄せをしていました。

しかし、ふと「これって良くない方法なんじゃ･･･？」と思い調べてみると、案の定好ましくない方法でした。

HTMLを正しく記述することはSEOからも有利になるので、改善できて良かったです。