HTML5を今すぐ使うためのコツや情報をまとめてみました

EC studio EC studio デザインブログ

EC studio
EC studio デザインブログ
EC studio デザインブログの記事一覧

2010年07月30日投稿者：谷拓樹

HTML5を今すぐ使うためのコツや情報をまとめてみました

この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。）
http://www.ecstudio.jp/

個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。

新要素をJavaScriptで生成する

HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。
そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。

テキスト表示

JavaScript:

<script>
document.createElement("section");
</script>

一番簡単な書き方をすればこれだとは思いますが、配列とかを使って上手いことできるとおもいます。それでもなかなかひとつひとつの要素を書いていくのが大変だと思うので、海の向こうの偉い人のソースを拝借することをおすすめします。

HTML5 enabling script

JSファイルをダウンロードして使っても良いですが、googlecodeでホストされているものをサンプルのようにそのまま使うのが良いとおもいます。パフォーマンス（表示速度）的にも良いです。

なおその場合には、HTML5に対応予定のIE9を除いたコンディショナルコメントにするのが良いでしょう。

テキスト表示

HTML:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

このあたりについては、ものすごく素晴らしいまとめをされているW3Gさんの記事が参考になります。こちらの「HTML5の新要素を使うには」のセクションをご覧ください。
HTML5についてのおさらい

新要素のdisplayプロパティをスタリングする

IEに限らず、一部のブラウザを除いて新要素に対してdisplayの値がセットされていません。（厳密にはinlineとしてセットされている？）
これはHTML5からブロック、インラインという概念が変わったことが理由なのか、単純に先行実装のために定義されていないだけなのかわからないですが、いずれにせよスタイリングする上で、いくつかの要素にはあらかじめdisplayプロパティをセットしておく必要があります。

テキスト表示

CSS:

article, aside, dialog, figure, footer,
header,hgroup, nav, section { display: block; }

これは主な要素としての例ですので、必要に応じてセットすれば良いです。
※もしかしたら先に紹介したHTML5要素を生成するライブラリで、これらの定義されているかもしれません。（あまりここは検証していないので後日検証予定）

新要素を使わない

ネタに聞こえるかもしれませんが、これは一番のコツとも言えるかもしれません。
つまりDOCTYPEをHTML5としての宣言にするだけです。

テキスト表示

HTML:

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">

あわせてcharsetの記述も簡単にしてしまいましょう。
この程度であれば、IEで新要素の問題も起きませんし、不都合も特にありません。

ただ実際にはHTML5になって廃止された要素や属性もあるので、本当は万事OKというわけではありません。

でもそれでもちょっとずつValidatorサービスなどを利用しながら学んでいけば良いことかとおもいます。はじめてHTMLやXHTMLを学び始めたころを思い出してください。
HTML5 Validator(W3C)

divやspanを使う

「HTML5になってdivやspanを使うと負けかなって思ってる」人は負けです。

とか言い過ぎかもしれないんですが、HTML5でもdivとspanは必要です。
まして前述のように新要素を使うのをためらう場合は、divとspanで代用するのが良いでしょう。

テキスト表示

HTML:

<div class="article">
<div class="header">
<h1>記事のタイトル</h1>
<div>
<div class="entry-summary">
<p>記事の概要</p>
</div>
…
<div class="footer">
<p>投稿日:<span class="time">2010/07/30</span></p>
</div>
</div>

ここの例でひとつ注目してもらうとすれば、div class="entry-summary"です。
これはHTML5でいうところのセクションではないので、section要素ではなくdiv要素であっても問題がない箇所です。
ただCSSのためなどに必要である要素であっても問題はありません。もちろん乱用はよくありません。それはHTML5の問題ではありません。

またこの書き方についてはもう一つ大きなメリットがあります。
冒頭で、IEでHTML5を使うためにはJavaScriptで要素を足せばいいということを書きましたが、もしJavaScriptがオフの環境であればそれが無効になります。
その点も考慮すると、上記のような既存の要素でHTML5的な書き方をするのが、実際には良いといえるかもしれません。
このJavaScriptオフの環境をどこまで考慮するかによって、書き方を検討してみてください。

要素セレクタを使わない

HTMLの話をここまでしてきたのですが、CSSの書き方にもコツがあります。
それは新要素を対象とした要素セレクタを使わないことです。

まずHTML側で新要素に対してclassを追加します。

テキスト表示

HTML:

<article class="entry">
<header class="entry-header">
<h1 class="entry-title">記事のタイトル</h1>
</header>
…
</article>

これに対するスタイルは下記です。
前者はNG、後者はOKの例です。

テキスト表示

CSS:

article { /* 好ましくない例 */
margin: 0 auto;
width: 760px;
}
.entry { /* おすすめしたい例 */
margin: 0 auto;
width: 760px;
}

このようにスタイリングする理由は、HTML5の仕様変更により要素が変わってしまう可能性があるため、その場合のメンテナンスの負担を減らすためです。
例えばarticleという要素がなくなり、sectionに代わった場合などにはHTML側だけの修正で済みます。
この理由以外にも（CSS全体の書き方にもよりますが）パフォーマンスの面でも好ましいといえます。
※微々たるものですが。セレクタに関するパフォーマンスの話は下記サイトもご覧ください。
CSSセレクタのパフォーマンスへの影響