サイトのHTML5化を検討中

ぼちぼちサイトのHTML5化に取り組もうかと、以下の書籍を買ってきた。

HTML5 & CSS3ステップアップブック

一般的なHTML5本が、いちからサイトを構築する前提で書かれているのに対し、こちらの書籍は既存サイトをHTML5に移行する方法がメインである。

移行の前提としては、サイトが正しいHTML・CSSでレイアウトされている必要がある。
正しいHTML・CSSとは何か。

Webページレイアウトのトレンドはざっくり言ってしまうと、以下の順に移り変わってきている。

フレームレイアウト
　お気に入りに個別ページが登録されないなど、ユーザーの利便性を損ねるため廃れた。
　ただし社内イントラネットサイトや仲間内の情報交換ページでは今でも現役であるし、メンテナンスもしやすくて便利である。
テーブルレイアウト
　メンテナンスが大変なのと、視覚障害者などの読み上げ機能、テキストブラウザ、検索エンジンなどからのアクセシビリティが悪いため廃れた。(そもそもテーブルはレイアウトの為じゃなくて、表の作成のためにある。)
CSSボックスレイアウト
　現在主流

流行のレスポンシブデザインも基本はCSSボックスによるレイアウトである。

つまり、近年においてはCSSボックスレイアウトが一応正しいと見做されるレイアウト手法だと考えて良いだろう。

HTMLはテキストエディタとブラウザがあれば誰でも作れてしまうので手を出しやすい。
「HTMLくらい出来るよ」という人は結構多いけど過去の知識でストップしている場合はCSSボックスレイアウトを学び直してからでないとHTML5移行は厳しいように思う。

なお私もテーブルレイアウトの頃の知識で止まっていたので、自分のサイトを立ち上げるにあたってはこちらの書籍でCSSボックスレイアウトを学びなおした。

HTML&CSS3 レイアウトブック

この本はHTML5には対応していないけど、基本的なサイトの作り方は今でも充分通用する内容である。

また、レイアウトだけでなくデザイン全般、昔と今では全然違う。
昔はfontタグにcolorとかsize要素をつけてデザインしていたけれど、現在はHTMLは文書構造のみを構築し、デザインはすべてCSSに分離するのが常識である。

まあ、CSSをきちんと勉強して正しく書こうとすればするほど、古いIEを憎むようになるのだがそれはまた別の話である。

さて、一応ちゃんと最近のHTMLを学び直していたおかげで、HTML5への移行はスムーズに出来そうだ。

リリースはまだしていないけれど、以下テストページの画像。

今のサイトと比べて見た目に大きな変化は無い。

では何の為にHTML5化を検討しているかと言うと、HTML5が目標とするデータの意味づけという考え方に共感し、賛同したためである。
これまでのHTMLではヘッダーもフッターもナビゲーションも本文もすべてdivというタグでボックスを作っていた。
そのdivタグのに"header"や"menu"などのIDをつけてCSSでデザインしていたのだ。
これらは検索エンジンなどから見て、ただ任意のIDがつけられたボックスの集まりでしかない。
HTML5では、header、footer、nav、sectionなどのタグが新しく導入され、検索エンジンなどのコンピューターから見てもそれが何を表すのか明確になった。

その他に変更したポイントとして、タイトルをWebフォントにしてみたこと。
（これとHTML5は直接は関係なく、単なるついで）
通常フォントはそのPCに入っているものが使われるので、これまで文字表現に制約があった。
凝ったフォントを使いたかったら、画像として貼り付けるくらいしか無かったのだ。
今ではmetaタグにコードを打ち込むことで、Web上のフォントを参照してどのPCからでも表示できる。
今回タイトルに利用したのは無償で提供されているGoogle FontsのうちのひとつであるComfortaaというフォントだ。

もうひとつ変えたのは右下のアイコンである。
現行サイトでは以下のようにXHTML1.0とCSSのアイコンを並べている。

これらはクリックするとW3C(Webの標準規格を策定している団体)の評価のツールでそのページがHTMLの標準に準拠していることが証明される。
簡単に言えば、権威ある団体から、あなたのサイトは正しいHTMLで書かれているとお墨付きを得られるということ。

ただ、HTML5に対応するアイコンがまだ用意されていない。実に残念である。仕方なくテキストリンクとして「Valid HTML5」と書いておいた。
また、それだけではややさみしいのでW3Cが作成したオレンジのHTML5ロゴも貼っておいた。
（こちらはページの評価に関係なく誰でも使えるロゴで、HTML5に賛同したり、紹介したりする場合にたとえそのページがHTML4で書かれていてもロゴを掲げることができるらしい。）

まあ、単に自己満足だが、私は結構こういった技術的正統性をアピールするのは好きな方である。
テーブルレイアウトを使っていようが、Fontタグを使っていようが、どうせパッと見は分からないのである。
折角きちんと標準を学んで正しく書いているのだから、一緒くたにされるのは悔しい。

最近はブログやSNSで個人が簡単に情報発信できるようになったので、自前でサイトを作ろうという人は減っていると思うが、もしきちんと勉強して正しいHTMLを書いているならそういう部分もアピールして良いと思う。

W3CのValidatorはその為に格好のツールである。