既にお気づきの方もおられるとおもいますが、当サイトのデザインを一新してHTML5対応しました。最近、HTML5とCSS3に触る機会が増えてきたので、勉強がてら、本サイトのテーマをHTML5対応で、一通りつくりました。
本サイトはWordPressを利用しています。昔、とあるサイトからテーマを頂いたものを利用して、原形をとどめないぐらいに自分で改造をしてきた状態でした。
そもそも、数ヶ月前まで、HTML5にはあまり興味が無く、情報も集めてない状態でした。どうせ、HTML5といいつつ、CSS3とJavaScriptのことだろ。と、考えてました。ですが、実際にHTML5で推奨されているタグを利用したり、新たに知ったりすると、これ、いままでのHTMLと全然違うな。と、思わざる終えませんでした。
そんな、旧世代のHTMLは知ってるけど、HTML5ってどうなんよ？的なレベルだった僕がどうやって、WordPressのHTML5対応するテーマをつくったのかを書いてみます。
いわゆるHTML5と呼ばれているもの
HTML5は現在、正式勧告を目指している草案段階であり、今後、仕様が変わる可能性もあります。ですが、ほとんどの最近のブラウザではサポートされており、パソコンだけでなく、スマートフォンでも、ほとんどの端末が対応しています。（一部、使えないような機能もあったりします。）
一般的に世の中でHTML5と呼ばれているもののほとんどの実態は、JavaScriptとCSS3の組み合わせということがほとんどであり、HTML5で新たに定義されている機能を利用するためには、JavaScriptとCSS3をガリガリ書いていくということが実態だったりします。
純粋なHTML5だけのマークアップだけ抜き出すと、HTML5では推奨されなくなったタグや、新たに定義されたタグを使っていくことだと考えてください。そして、新たに定義されたタグのほとんどは、CSSでデザイン面を調整しないと、そのままでは使えないといっても過言ではありません。
まとめると、純粋な文章としての構造をHTML5のタグで構築し、人間が見やすくするデザイン面をCSS3やJavaScriptを利用して、豊富な表現方法を提供するという形になります。
現時点でのHTML5対応とは
ブログのようなサイトを純粋なHTML5で推奨されているタグだけで構築するのは現実的ではありません。現在普及しているブログなどに使われているタグは、HTML5では現時点で定義されていないような要素やプロパティで提供されているものがあります。あくまで、HTML5の文章構造対応をするというのが現時点での対処です。
また、Windows XP以前で使われているInternet Explorer 7以前のブラウザは、そのままではHTML5をまともに表示することができません。このサイトだけでも、約10％のユーザーがこういったバージョンのブラウザを利用しているのを確認しています。このような古いブラウザでも、ある程度まともに見せるための方法がいくつかあります。ですが、この方法はHTML5で定義されている方法ではではありませんので、HTML5では推奨していないような書き方をする必要があるということになります。
HTML5のタグ
HTML5で利用するタグは下記あたりを参考にして、調べながらやれば十分です。自分で記憶しているタグも一部はHTML5では推奨されなくなっているタグがあると思いますので、細かいタグも調べ直すこともオススメします。
あー、もう、このタグは使っちゃいけないのか。というのを発見するたびに時代の流れを感じるでしょう。
一度、きちんと学んでおきたい方はこちら。
 |
Mark Pilgrim￥ 2,415
|
本書の原著はクリエイティブコモンズのライセンスとしてこちらで公開されている。
HTML5のチェック
HTML5で書いているつもりだけど、これで大丈夫なのか？チェックしましょう。
このサイトでチェックできますが、定義されていないよ。という警告も出してくれます。警告されてもこう書かないと他のブラウザが対応できなかったり提供できない機能がありますので、このチェックサイトが完璧にチェックが通りことを目指すことはやめましょう。できる限りの対応をする程度にとどめてください。
WordPressのテーマをつくる
ここまでで、ある程度HTML5のタグは書けるようになったと思いますので、WordPressのテーマをつくっていきましょう。ですが、フルスクラッチでテーマをつくっていっても、HTML5の勉強というより、WordPressの勉強になってしまいます。よって、ベースとなるテーマを用意して、骨子と利用して、ざっくり書き換えてしまいましょう。
骨となるテーマ「Bones」
その名の通り、骨となってくれます。クロスブラウザ対応やきっと使うであろうライブラリなどは全部セットになって、あとはお前がやりたいように描いていけといわんばかりのセットです。
ですが、このテーマはWordPressのテーマを何度かつくったことある人向けです。全然知らない人が、いじりながらつくっていけるような代物ではありません。
WordPress3.0付属の「twentyeleven」
WordPress3.0から付属してきているテーマに「twntyeleven」というものがあります。これは何気にHTML5の文章構造にになっています。僕はWordPressの勉強する気は無かったので、これをベースに僕のブログをHTML5対応に書き直してリューアルしていくことにしました。
ある程度、文章構造が埋め込まれて、目で見えて動く形になっているので、WordPressのテーマをつくったことの無い方はこっちをオススメします。WordPress関係は調べながらやれば、どうにかなります。
HTML5文章構造のベース「Initializer 2」
HTML5の文章構造テンプレートをある程度カスタマイズした上でダウンロードできる「Initializer 2」です。僕はこのテンプレートがわかりやすかったし、クロスブラウザ対応など明確にされてて、静的ファイルで手元に置けるのでいじりやすいと判断して、この文章構造を先ほどのtwentyelevenのテーマに入れ替えていく作業をしてテーマを作成しました。
twentyelevenのテーマをInitializer 2っぽく、全部書き直した結果、オリジナルのテーマが完成しました。
文章構造
純粋なHTML5で何が変わったかというと、文章構造である。特にブログのようなサイトは、
- header
- footer
- article
- section
- hgroup
- navi
- aside
というタグを利用して、新たな形で文章構造を構築する必要がある。
これについては下記のサイトの開設がとても詳しい。
書籍だと、この書籍が具体的にブログだとこういう風になると例をあげている。他の書籍より実践的な内容を取り上げている。
 |
ブライアンP.ホーガン￥ 2,940
|
この様なタグを利用して、ウェブページの意味を扱うことを可能にすることを「セマンティック・ウェブ」と呼ばれ、提唱されている。
今後、検索エンジンなどに自動解析されるときに、こういったページの各所の意味を考慮して、検索エンジンに登録されることも近い将来あり得るであろう。むしろ、それが効率よく精度を上げることに繋がるはずである。
HTMLのminifyをあきらめる
WEBサイトのパフォーマンスを良くするためにJavaScriptやCSSのminify（改行コードやコメントなど、不要な文字データを取り除き圧縮すること）を通常はおこなうのだが、HTMLも同様にコメントなどのデータを削除していた。
だが、今回HTML5対応と共にクロスブラウザ対応を余儀なくされたため、IEなどがコメント文字列をパースして挙動を変えたりするので、HTMLのminifyは諦めざる終えない結果になった。
このプラグインは、どのファイルタイプをどのようにminifyするかまで設定できたので、最終的にCSSのminifyだけしている。
まとめ
現在のウェブサイトを完全にHTML5で作り替えるメリットは、あまりない。むしろ、パフォーマンス重視のサイトを構築するためには、クロスブラウザ対応のために余計にデータを通信する必要が出てくるため、HTML5で構築した方が遅くなるだろう。だが、近い将来には、自動解析などに効率的なHTML5が検索エンジンなどに優先される可能性があるかもしれない。その実験を自分のサイトを使ってやってみます。
