2014年に導入されたHTML5ですが、原則使用禁止となったタグがいくつもあることをご存知でしょうか？
HTMLの中央揃えとして利用されていた「center」タグについても、HTML5からは廃止タグの1つとして指定されています。
本記事では、HTML5準拠のコーティングを行うために、centerタグに変わるHTMLの中央揃えの方法をご紹介していきたいと思います。
目次
HTML5ではcenterタグが廃止
HTML5ではcenterタグを含むいくつからのタグが廃止されました。
2020年2月現在でもcenterタグはHTML上で動作しますが、非推奨のタグという扱いになります。
なぜHTML5でcenterタグが廃止されたのか？
HTML5では、HTMLの目的として意味や定義を行うためのものであり、「装飾」を行うためのものではないということが主張されています。
つまり、Webサイトの「装飾」「デザイン」を決めるのは「CSS」を使うべきだという理由から、HTML内でのデザイン定義に当たるcenterタグは廃止されることになったようです。
HTML5でも動くならなぜcenterタグを使ってはいけないの？
HTML5でも確かにcenterタグを利用することは可能です。
しかし、廃止タグリストとしてcenterタグが指定されているということは、いつ標準サポートが中止になってもおかしくないということを意味しています。
現代のWeb水準として定められているのはHTML5であり、言ってしまえばHTML5の水準を満たしていない記述方法は、基準以下のクオリティで作成されたコードということになります。
HTML5でcenterタグの代替方法を確認しよう！
HTML5では、廃止されたcenterタグの代わりとなる記述方法には「style属性で定義する」「CSSで定義する」の大きく2種類の方法が利用可能です。
style属性で定義する
HTMLでは「style」属性を利用して、CSSに記述するデザイン部分を直接HTMLタグに記述することが可能です。
centerタグの代替案としては下記のようなコーティングが可能です。
centerタグを利用した場合(廃止)
<center>あいうえお</center>
style属性を利用した場合
<div style="text-align: center">あいうえお</div>
CSSでデザインを定義する
HTMLのstyle属性ではなく、CSSファイルにデザイン定義を書き出してみましょう。
HTML5の規定に最も適した書き方がCSSファイルに切り分けてデザインを定義する方法と言えます。
index.html
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>Center Sample</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="center">あいうえお</div> </body> </html>
style.css
.center {
text-align: center;
}
実行した結果が下記のキャプチャとなり、中央揃えが行われていることをご確認頂けます。
HTML5ではcenterタグの代わりにmarginを使う方法も推奨
HTML5では、上述した「text-align: center」を使用した方法以外にも、「margin:0 auto」を利用する方法が推奨されています。
「margin:0 auto」と指定することで、左右の幅を自動調整してくれるため、centerタグを使用した場合と同じように、画面中央に表示されるようになります。
marginを利用したサンプルコードで動きを確認しよう
実際にmarginを利用して中央揃えをするためのサンプルコードをご紹介します。
index.html
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>Center Sample</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="center">あいうえお</div> </body> </html>
style.css
.center {
margin-right: auto;
margin-left: auto;
width: 100px;
}
実行した結果が下記のキャプチャとなり、「text-align」同様画面中央揃えが行われています。
「margin:0 auto」を利用する場合はいくつかの注意が必要
「margin:0 auto」を利用する場合の注意点を紹介しておきます。
ブロック要素にしか使えない
まず、「margin」はブロック要素にしか利用することが出来ません。
インライン要素である「aタグ」や「spanタグ」ではmarginを指定しても中央揃えには出来ないため注意が必要です。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <title>Center Sample</title> </head> <body> <span style="margin: 0 auto">あいうえお</span><br/> <a style="margin: 0 auto">かきくけこ</a> </body> </html>
サンプルのHTMLを開くと下記の画面キャプチャのように中央揃えされていないことがご確認頂けます。
ブロック要素のサイズに注意する
ブロック要素に「margin: 0 auto」を指定した際、中央揃えが行われないと悩む方も多いのですが、多くの場合、ブロック要素自体が画面いっぱいまで広がっていることが問題です。
例えば、上記のサンプルで紹介したこちらのコードを「width」プロパティ抜きに修正してみます。
修正前 style.css
.center {
margin: 0 auto;
width: 100px;
}
修正後 style.css
.center {
margin: 0 auto;
}
widthプロパティを削除しただけですが、実行した結果は下記のようになります。
さいごに：HTML5からcenterタグは廃止！CSSでの中央揃えを理解してHTML水準準拠のコーティングを実施しよう
本記事では、HTML5で廃止された「center」タグの代わりに中央揃えを行う方法について、ご紹介してきました。
今後のHTML5を活用した開発において、centerタグの利用は避けるべきですが、現在Webサイトとして公開されているHTML4以前で作成されたコードを全て修正しないといけないのかというと、そこまで修正する必要はないと考えられます。
しかし今後の開発においては、今回ご紹介したようにcenterタグは廃止されているんだということを意識して、CSSでの中央揃えを実施するよう意識しておきましょう。
現在は後方互換のため、HTML4.x時代に利用されていたタグも含めてサポートされていますが、これからWebサイトを作成するならWeb水準を守るためにも、利用は避けるべきと言えます。