FC2に限らず、無作為にサイトを拝見しておりますと、
<center>
というタグを利用している方がとっても多いことに驚きます。
centerタグに限ったことではありませんが、とりあえず目立つのがcenter
centerタグを「使ってはいけない」理由
- 既に廃止されている = centerタグはhtml4までしか使えません
- そもそも使い方を間違っている
この2点。
centerは廃止タグです
せっかくhtml5テンプレートを選んでも、記事内やカスタマイズ内容に古い記述が含まれていては元も子もありません。
2014年10月28日に html5 が正式に勧告され、
2016年11月1日に html5.1 の勧告も済んでいます。
そう。もう既に5.1の時代なんですよ。みなさん。
勧告 とは。
web記述の国際標準規格制定
標準は水準でもありますので、html4を含むそれ以前のバージョンのhtmlは web水準を満たしていない・web標準ではない ことを意味します。
厳しい言い方をすれば「水準以下」ということになります。
html4からhtml5へ移行するにあたり、多くの改定が為されました。
- htmlタグの「定義」の再制定
- 新要素の追加
- 多数の廃止要素
html5になって定義の変わったタグ の代表例は以下の通り。
<b>
<i>
<em>
<strong>
<hr>
<small>
などなど。
旧定義・新定義は当該記事の主旨から逸れますので今回は割愛。
新要素追加 の代表例は以下の通り。
<header>
<footer>
<section>
<article>
<nav>
<hgroup>
など多数。
廃止されたタグ の代表例は以下の通り。
<center>
<strike>
<u>
<font>
<frame>
<frameset>
----- 2017.3.11 追記 ---
uタグは廃止ではないのでは?
というご指摘を頂きましたので訂正します。
おっしゃる通り、廃止ではございません。申し訳ございません。
uタグはhtml勧告前・草案時には「廃止予定」だったものが、勧告時には復活しております。
ただし「下線を引く」という意味ではありません。
「文章内のスペルミスの指摘」「誤解を招きそうなテキストを明示」など。
なので「下線を引くため」に用いるのはよろしくありません。
uタグは
廃止ではなく定義が変更になったタグ
に含めるべきでした。申し訳ございません。
ご指摘頂きましたH様、ありがとうございます
----- 以下本文 ---
など多数。
みなさん上記の廃止タグなんか結構よく使われるんじゃないですか? (´・ω・`)
もうそろそろ利用を中止しましょう。
フォントのサイズ指定時に
<font size="large">あいうえお</font>
とか。
文章の打ち消しに
<strike>あいうえお</strike>
とか。
そして 文章や画像のセンタリングに
<center>あいうえお</center>
とかね (´・ω・`)
これらはもう 古い記述 ですから使わないよう注意しましょう。
html4のテンプレートをご利用の方は構文ルール上は使えますが、
4という古いバージョンの利用自体を自己責任で ^^;
何故タグの廃止が行われるのか
一言で言えばその廃止対象タグが「ナンセンス」だからです。
html5の大きな目的のひとつに、
htmlはセマンティクスに徹するべき
というのがあります。
セマンティクス (semantics) というのは「意味論」のことです。
つまり
htmlは装飾の為に使うものではなく、意味・定義を示すものである
ってことです。
昔 tableレイアウト が流行ったことがありました。
さすがに今は無いと思います(思いたい)が、<table> というタグは本来 表 という明確な定義を持ってます。
セマンティクスの面から言うと
「そのページって表なんですか? (´・ω・`;)」
ということですね。
ブログ記事全体が表なわけねーべ?
多くの廃止要素の特徴は
htmlによって見た目のコントロールをする
ことが目的となっています。
strike は
打ち消し線
このように 見た目が変わります し、
u もやはり
下線を引きます
こんな風に 見た目が変わります。
そして center も同じく
こうして 見た目が変わります。
あまり意識は無いかもしれませんが、
文章の位置を左以外に変更することも「装飾」に値します。
htmlはセマンティクスに徹し、装飾は全てCSSに委ねるべき というのがhtml5の大きな取り組みのひとつです。
何故廃止タグを使ってはいけないのか
何故ってそりゃ、正しく機能しないからですよ。
単3電池のテレビリモコンに単4電池を詰め込もうとしてるようなもの。
構文ルールに沿っていない
そのリモコンは単3電池でしか動きませんよ!単4使うなんて無理無理!
ってなもんです。
とはいえ、ブラウザというのは 後方互換の原則 というのがありますので、
「今日廃止が決定したので明日から使えなくなりま〜す。」
といった暴挙には出ません。
そんなことしたらwebは大混乱。
特に fontタグ なんかはwebページにとって最も重要な「テキスト表示」を担っていますので、
もしかしたら今後も恒久的にサポートしていく羽目になってるのかもしれない ^^;
でもですね、廃止されたものをブラウザ各社の温情でいつまでもサポートしてもらえるかって言ったらそれは甘いです。
あなたが利用しているその廃止タグはもしかしたら明日使えなくなっているかもしれません。
長くブログを楽しみたいのならば、オワコンとは今手を切るべき。
そもそもcenterの使い方を理解しているか
ほとんどの方が理解していません。
centerタグはhタグの子要素としては使えません
一番多いのがこのパターンです。
<h1><center>ブログタイトル</center></h1>
これはh1の中の文章をセンタリングしたいが為にcenterを使ってしまった例です。
そもそもcenterタグを利用すること自体アレでソレですが、仮にhtml4のテンプレートだとしても、h1の中にcenterを入れ子にするのはルール違反です。
この場合はこうすべき
<h1 style="text-align: center;">ブログタイトル</h1>
どうしてもhtmlソース内で位置の指定をしなければいけないのならば上記の通り。
スタイルシートが使える場合には以下の通り。
html側
<h1>ブログタイトル</h1>
CSS側
h1 { text-align: center; }
これがベストプラクティスです。
見だしの、特に最高位の h1 ですから、構文エラーではもったいないと思いませんか。
まとめ
まとめとして先に記した廃止タグの代替CSSを載せておきます。
廃止htmlタグ X | 代替CSS or 代替htmlタグ ○ |
<center>あいうえお</center> | <div style="text-align: center;">あいうえお</div> |
<strike>あいうえお</strike> | <span style="text-decoration: line-through;">あいうえお</span> <del>あいうえお</del> |
<u>あいうえお</u> | <span style="text-decoration: underline;">あいうえお</span> |
<font size="3">あいうえお</font> | <span style="font-size: 16px;">あいうえお</span> |
<del> が「見た目」を操作しているように感じますが、実際には「削除項目」という明確な定義を持っています。
代替がCSSのものは「意味」「定義」はなく「単なる見た目」の操作です。
必要と思われますものは辞書登録しておかれると良いですね。
変換候補としてすぐに呼び出せて便利です。
「せんたー」とか「うちけし」などで。
これまでのログが1000記事あるよ、なんて方に修正しろというのは酷ですので、「これからはこう書く。」ぐらいで良いと思います。
もちろん余力があるのなら書き換えるに越したことはありませんが。
もちろんお使いのテンプレートがhtml4なのか、xhtmlなのか、html5なのかを確認する必要があります。
html4テンプレでhtml5新要素を記述しても解釈ができません。
大切なログですので、寿命が知れているものよりも長く使えるものを選択されるが吉。
でございます (o'ω')ノ