centerタグを使うのは辞めましょう

centerタグを使うのは辞めましょう

カスタマイズ
2017/03/11 4
vanillaice (Akira)
vanillaice (Akira)
初心者向け Education HTML Validation

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'ω')ノ

 4

There are no comments yet.
hige
勉強になります。

 Akira氏のワンポイントレッスン、いつも勉強になります。
 ただ u タグですが違う意味で残っているという記事をみかけます。

http://html5.sophia-it.com/reference/%E5%9B%BA%E6%9C%89%E5%90%8D%E8%A9%9E%E3%82%84%E3%82%B9%E3%83%9A%E3%83%AB%E3%83%9F%E3%82%B9%E3%82%92%E7%A4%BA%E3%81%99%E3%81%AB%E3%81%AF%EF%BC%9F

 どうなんでしょうか。
 私は、記事内のリンク部分に多用してきてまして、早速CSS に変更し記事内の u タグは順次削除していっています。

 <strong> は旧FC2高機能エディタでは太文字指定の時、以前Akira氏の記事でも書かれてたと思いますが、必ずこのタグが挿入されます。
 最近は記事を専用のエディタ(Atom)で書くようになったので、<b> を使ってたりとか。
 strike も。旧記事の幾つかを修正しました。

 でも困ってしまうのは、FC2にしろブログ村にしろ楽天にしろ、アフィリやバナーやもろもろに一杯旧仕様が残ってまして、ご紹介のあった Nu Html Checker というhtml5のチェックサイトに掛けると、この部分が大量に引っかかってきてびっくり。
 彼らの方がプロなのにと思ってしまいます。
 俺のせいじゃないし。
 アフィリは内容を変更してはダメという規約があるので触りにくいです。
 バナーは弄っても大丈夫のようですが。

 こんなことも毎日が日曜な、年金生活者だからぼちぼち出来るけど。

2017/03/11 (Sat) 16:30
hige
PS

 あと、余計なことですが、現在表示されているテンプレート
 最新コメントの一リストをクリックすると掲載されている記事のトップへ飛びますが、該当のコメントに飛ぶ方が便利なんじゃないでしょうか。
 すみません。余計なことでした。

2017/03/11 (Sat) 16:35
Akira
To higeさん

こんにちは (●'0'●)/

> u要素の件

これは誰かから指摘が来るかなー?と思っておりました(笑)
<u>は草案時には廃止が予定されていましたが、勧告時に復活しています。
動画埋め込みの<embed>なんかもそうなんですけども。

ただしこの<u>は「下線を引く」という意味ではありません。
「誤解を生みそうなテキストを示す」「綴りのミスを指摘しておく」
とか、そういった意味で使用します。
なので「下線を引く」という目的で使うのは間違いです。
ご指摘頂きましたので記事本文を修正しておきますね。

旧投稿画面の件ですが、こちらにはもう修正は入らないと思います。
新投稿画面の太字は<b>に変更になってます。
その他旧投稿画面のツールで問題のありそうなものは軒並みCSSに変更されてます。
ビミョーにだけど(笑)
これアカンやろ… なものもまだ残ってますけどね (´・ω・`)
で、いずれ新投稿画面に統合されるはずなので、旧投稿画面のメンテナンスはしない意向だと思いますよ。

大手サイトはhtml5のことだけを考えれば良いわけじゃないんですよね。
ここがとっても難しいところだと思うんです。
例えば
<script>内容</script>
これはhtml5では正確な記述ですが、html4やxhtmlでは
<script type="text/javascript">
って書かなきゃいけないし。
html5では後者の記述は「エラーにはしないけど非推奨。ウォーニングだよ。」
html4では「エラーです。」
になるので、やはり共通コードとしては後者になってしまいますよね (´・ω・`)
既にhtml5への移行を済ませている方はある意味そのへんの意識は高い方だと思うので、自分で修正も加えられるでしょうし。
なので言ってみれば逆に「プロなりの結論」なのかもしれません。
html4専用コード、html5専用コード、という提供の仕方をしてもたぶん付いてこれる人が少ないだろうし(笑)

現在のテンプレートの動きは

http://vanillaice000.blog.fc2.com/blog-entry-483.html

この意味をわかって頂こうと思って敢えてそうしています。
ご理解頂ければ幸いです(笑)
メインのピン留めは記事内容が少ない方向けなので私には不要なんですけどね。
挙動を知って頂こうと思いましてー (´・ω・`)

2017/03/11 (Sat) 17:41
Akira
To higeさん

思うんですけどね。
何か大きな変更があった際に
「まだ時期尚早」「まだやらなくて良い」「断固反対だ」
みたいな感じで必ず足並みを揃えようとしない人やサービスが出て来るんですよね (´・ω・`)
なので今回のGoogleのssl化に於いて
「https化してないページには『保護されてない通信』って出しちゃう。」
という強硬手段はやむを得ないと思うんです。
これも批判があるみたいですけど。
でもそのぐらいやらないと低リテラシーな方々はやろうとしないべ?
って思う(笑)
こういうのは一丸になってやらないとなかなか進まないんですよね。
html5にしても勧告前からAppleやGoogleがかなり尽力しましたが、いまだにhtml4が根強いですよね。
特に日本はそうです。
海外なんかは個人ブログでもしっかりhtml5化・レスポンシブ化してますけどねぇ (´・ω・`)
日本は大体3年ぐらい遅れてるかな。という印象です。

2017/03/11 (Sat) 17:57

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ