はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ

はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ
32

先日このブログをHTML5で作り直しました。その時に思った、HTML5でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際にHTML5でコーディングする時の tips になってます。

先日このブログ Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。

とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思った、基本部分について少しまとめてみました。

HTML5 注意書き 目次

  1. 今までの HTML と HTML5
  2. よりセマンティクスになったHTML5！
  3. 文章の構造 … アウトライン
  4. 明確なアウトラインを実現する HTML5 の新要素
  5. HTML5 のセクション要素
  6. HTML5 でWebサイトを作る準備
  7. HTML5 でコーディングする時に便利なツール

1. 今までの HTML と HTML5

HTML5 では、今までになかった新しい要素もたくさん増えて、色んなことが HTML だけでできるようになりました。でも、まだまだブラウザ間での実装差異もあるので、Javascript などを使って対応させたり、プログレッシブ・エンハンスメント（対応してないブラウザには、必要最低限の機能を確保しておく）という考え方をしてみたり …。CSS3と同じで、パソコン向けのWebサイトだと、まだまだ制約も多いですね。

私（Webデザイナー）にとっては、そもそも HTML5 にすると、何かいいことがあるの？ということが問題。まだ XHTML で書いてればいいじゃない … という気持ちもあります。HTML5は、文書作成が目的だった HTML4 や XHTML に、アプリケーション機能が加わっていろいろすごいことができる！ … と言われても今ひとつピンときません。

1.1. アプリケーションって何だろう

アプリケーションって何でしょう？ … 普通アプリケーションっていうと、ソフトウェアみたいなイメージがありますよね。つまり HTML5 を使うと、今までプラグイン（後述）などを使わないとできなかったことも、HTML5 だけでできてしまうんですよねー。

上手く言えないので、HTML5 で書かれた Webサイト のひとつ、deviantART muro を見てみましょう。

deviantART muro

deviantART muro
deviantART muro

deviantART muro は、ブラウザ上でイラストが書けるWebサイト。もちろん HTML5 に対応したブラウザがないとダメですけど、今までの XHTML や HTML4 だけではできないことでした。deviantART muro、絵を描く部分は、HTML5 の新要素 <canvas> が使われています。

↑ HTML5 注意書き目次へ

1.2. プラグインとは？

さっきプラグインって言葉がでてきましたが、XHTML や HTML4 で deviantART muro みたいなものを作ろうとしたとき、Flash がよく使われてましたよね。でも Flash をブラウザで動かす為には、Flash Player が必要でした。ときどきブラウザを起動すると、最新のフラッシュプレーヤーにアップデートしてください … みたいなのが出ると思います。Flash は、そんな風にプラグインを使って表現してたんですね！

Adobe Flash Player

<canvas> 要素なんてものが出てきましたけど、動画や音声を埋め込む <video>、<audio> なんて新しい要素も、HTML5で出てきました。もちろん HTML5 では、もっとたくさんの新要素が登場しているし、廃止になったり、意味が変わった要素も出てきました。

参考：意味が変わった代表的な要素

  • small … 著作権表記などに使うようになった。
  • strong … 強調から重要事項などに使うようになった。
↑ HTML5 注意書き目次へ

2. よりセマンティクスになったHTML5！

私がこのブログを HTML5 にしようって思ったのは、前述したアプリケーション機能が強化された HTML5 の側面があったからじゃなくて、どっちかって言うと、HTML5 のセマンティクスの部分を勉強したかったからです。

セマンティクス … 難しい言葉ですね w もともと HTML は文書です。文章には大見出しがあって、中見出しがあって … という構造（アウトライン）があるし、引用文だとか、日付だとか、タイトルだとか、同じテキストでも意味がそれぞれ違います。ちょっと分かりにくいですね。

例えば下記のように書いてあったら、人が見れば日付だってことがひと目で分かりますよね。

  • 2011年 7月24日
  • 24th Jul 2011

でも機械には、これが日付だってことが分かりません。ただのテキストです。これにちゃんと日付ですよーっていう意味を与えるには以下のように書きます。

<time datetime = "2011-07-24">2011年 7月24日</time>

time タグは HTML5 からの新要素。こんな風に文章にちゃんと意味付けをすることを、HTML5 では今まで以上に求められていてて、セマンティクスは、データの意味っていう意味です。

↑ HTML5 注意書き目次へ

3. 文章の構造 … アウトライン

実はこのブログ、今までアウトラインがめちゃくちゃでした。というのも、SEO的には記事のタイトルを h1にした方がいいかも！っていう話をどこかで聞いて、それを実践していました。その結果、以前は下記の図のようなアウトラインになってました …。

アウトラインというのは、文章の構造、階層のようなもの。言葉だとちょっと伝えにくいので、下の図を見てもらえれば分かると思います。

今までのWebデザインレシピのアウトライン

今までのWebデザインレシピのアウトライン

文章の構造的にはかなりおかしいですねー。SEOの都市伝説（h1、h2にキーワードを入れるといいかも … というSEO）みたいなのを意識しすぎて、ブログの名前には<p>タグを使い、無理矢理に記事部分の見出し、h1から始まるようにしていました。

逆に、サイドバーやフッターの見出しは、レベルを下げようと思って、h4~h5を使ってます。自分の個人的なブログだからと思い、いろいろ実験を w でも、これがやっぱり気持ち悪かったです。

上の文章構造では、本来記事とは関係のない、サイドバーやフッターまで記事に含まれてしまっています。

↑ HTML5 注意書き目次へ

3.1. ページの構造を意識したアウトライン

新しく作り直したアウトラインは、下記のようになっています。Webデザインレシピというブログタイトルの大見出し以下、意図したとおりアウトラインを作ってみました。

新しいWebデザインレシピのアウトライン

Webデザインレシピの新しいアウトライン

記事のタイトル（h1）以下は、記事内の中見出しで構成されていて、サイドバーやフッターの見出し（h2）は、記事からは独立した別のものです。そしてそれらを全部含めた一番大きな見出し（h1）が、Webデザインレシピ（ブログタイトル）っていうことです。

すごく当たり前です w でも、この当たり前ができていなかったので、とっても気持ち悪かった XD また、気付いた人もいるかもしれませんが、h1タグを複数つかったり、h1 と h2 が、同じ階層にあったりします … HTML4 や XHTML だと、ちょっとあれ？って思うかもしれませんね！でも、これが HTML5 ならできるんです！

追記：重要

コメント欄でとても大事な事をご指摘いただきました。私のブログはブログタイトル、記事タイトルとも<h1>になってますが、これは悪い例です！キチンとアウトラインの階層に合わせた見出しレベルを使いましょう！

詳しくは、コメント欄でシマダさんが解説してくれています！

↑ HTML5 注意書き目次へ

4. 明確なアウトラインを実現する HTML5 の新要素

HTML5 では、このアウトラインを明確に生成するとこができる要素が新しく作られています。でもその前に、HTML4、XHTML の時にどうしていたのか見てみます。HTML5 以前は以下のように hx タグを使って、見出しでアウトラインを作ってましたよね！

見出しによるアウトライン

  • <h1>h1見出し</h1>
    • <h2>h2見出し</h2>
      • <h3>h3見出し</h3>
        • <h4>h4見出し</h4>
      • <h3>h3見出し</h3>
        • <h4>h4見出し</h4>
    • <h2>h2見出し</h2>
    • <h2>h2見出し</h2>

一段下がってるところは、階層が下がってるという意味です。

4.1. 見出しで作るアウトラインの限界

ちょっと分かり難かったかもしれませんが、見出して作ったアウトライン、上記のような階層になってます。でも、見出しによって作るアウトラインだと、ちょっと困ることもありました。例えば私もブログでよくやるんですけど、記事の最後に、総括するようなまとめのコメントを書く時を考えてみると …。

HTML

<div>
<h2>記事のタイトル</h2>
<p>ここにテキスト</p>
  <div>
  <h3>中見出し</h3>
  <p>ここにテキスト</p>
  </div>
<p>ここに記事の締めの言葉を書きます！</p>
</div>

するとアウトラインは当然下記のようになりますよね …。div でいくら囲んでも、アウトラインには影響しません。

アウトライン

見出しでできるアウトライン

記事全体のまとめの言葉を書きたいのに、直前の<h3>タグのセクションに入っちゃってます。上記の右のようなアウトラインは、見出しを使ったアウトラインではできませんでした。

でも、HTML5 では、上記の右のようなアウトラインを、普通に作ることができます！

↑ HTML5 注意書き目次へ

5. HTML5 のセクション要素

さっき紹介した図の中の右側のアウトライン。実際にはどうやって作ればいいのでしょう。HTML5 では、セクション要素という新しい要素が加わっています。このセクション要素を使えば、セクションを意味的にひとつの塊として捉えてくれて（divじゃできませんでしたよね！）、アウトラインを形成してくれます。

HTML5 で加わったセクション要素は以下の4つ。

  • <nav> … ナビゲーションを示すセクション要素
  • <article> … ブログの記事みたいに、独立しても意味が通るような部分を示すセクション要素
  • <section> … 基本的に見出しを伴う文章のひと塊、段落とか章を示すセクション要素
  • <aside> … あまり重要でない部分を示すセクション要素

注意

私はとりあえず上記のような感じで捉えていますけど、HTML5 についてはまだ勉強不足 …。特にこのセクション要素は誤用も多いと言われています。私はこのブログを HTML5 にするにあたって、WordPress のデフォルトテーマ、Twenty Eleven（HTML5 で作られています！）のソースを参考にしました。

それではセクション要素を使うと、どんな風にアウトラインができるのか見てみます。

HTML

<article>
<h1>ココに記事のタイトル</h1>
<p>ここにテキスト。</p>
  <section>
  <h2>これは中見出し</h2>
  <p>ここにテキスト。</p>
    <section>
    <h3>さらに中見出し</h3>
    <p>ここにテキスト</p>
    </section>
  </section>
  <section>
  <h2>中見出し</h2>
  <p>ここにテキスト</p>
  </section>
<p>じゃあここに書いたのは？</p>
</article>

アウトライン

セクション要素を使ったアウトライン

上記の用に、見出しの階層は関係無しに、セクション要素によってアウトラインが作られます。<p>じゃあここに書いたのは？</p> という部分は、記事見出しの<h1>直下のセクションになります！

セクション要素は、文章構造、アウトラインを作って、文章をセマンティクス、意味的にするもの。なのでレイアウト目的に使ってはダメで、その場合はやっぱり div を使います。

例えばサイドバーを作るとき、以下のようなコードを書いたとします。

HTML

<article id="main">
<h1>記事のタイトル</h1>
...
</article>
<aside id="sidebar">
  <section>
  <h2>Category</h2>
  ここにカテゴリー
  </section>
  <section>
  <h2>Tag Cloud</h2>
  ここにタグクラウド
  </section>
</aside>

一見よさそうな気もしますが、アウトラインを見ると以下のようになります。

aside を使った時のアウトライン

  • 記事のタイトル
  • Nontitle Aside（見出しのないセクション）
    • Category
    • TagCloud

一段下がってるところは、階層が下がってるという意味です。aside も section も、アウトラインを生成するセクション要素なので、入れ子にすれば、当然アウトラインの階層もさがります。

今度はサイドバーを div で囲んだ場合です。

HTML

<article>
<h1>記事タイトル</h1>
...
</article>
<div id="sidebar">
  <aside>
  <h2>Category</h2>
  ここにカテゴリー
  </aside>
  <aside>
  <h2>Tag Cloud</h2>
  ここにタグクラウド
  </aside>
</div>

div を使った場合のアウトラインは以下の通り。

div を使った時のアウトライン

  • 記事のタイトル
  • Category
  • TagCloud

さっきみたいに階層が一段下がる事はありません。aside や section はセクション要素なので、入れ子にすればアウトラインが変化しますが、div は文章的には意味を持っていないただのボックスです。なのでアウトラインには影響を与えません。

上記の2つのサイドバーは、どっちが正しいとかではなくて、文章構造、作りたいアウトラインとレイアウトを考慮してマークアップしなくちゃならないってことですね！

また、HTML5 ではセクション要素を使ってアウトラインを作るれるので、セクション要素内の見出しが h1 でも h2 でもアウトラインに変化はありません。全部 h1でもセクション要素によって作られたアウトラインを生成します。でもやっぱりレベル（階層）に応じて、見出しは使い分けた方が良さそうですよね。

従来の見出しだけでもアウトラインはできる

もちろん従来の HTML4、XHTML でやっていたように、セクション要素を使わずに、見出しだけでもアウトラインは作れます！

↑ HTML5 注意書き目次へ

6. HTML5 でWebサイトを作る準備

ちょっと長くなりましたが、ここまでは HTML5 でWebサイトを作る為の予備知識のほんの一部です。ここからは実際に HTML5 でコーディングする実践編です。

実際に HTML5 でWebサイトを作ろう！って思っても、実はちょっと準備が必要です。というのは、各ブラウザで HTML5 の要素、特にアプリケーション系には実装差異があるからです。

今回はアプリケーション系要素は置いておいて、文章構造系、前述したセクション系を中心にして HTML5 でのサイト構築の準備をします。

各ブラウザ間で実装差異があるって書きましたけど、IE8 以下は前述した nav、article 要素なども対応していません。なのでこのまま <nav>タグなどを書いても、IE8以下では未知の要素として扱ってしまいます。その結果、未知の要素をインライン要素としてレンダリングしてしまうんです。

なので CSS に以下を記述して、新要素をブロックレベル要素としてスタイリングしておきます。

CSS

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

これでちゃんと表示されるかというと、まだダメなんです。上記ではCSSでブロックレベル要素としてスタイリングしたにすぎません…。IEではまだ未知の要素として扱うので、きちんと要素ノードとして作ってあげないと、思った通りのDOMを形成してくれません。

要素ノードとは、乱暴な言い方をすればタグのこと。逆にタグに囲まれたテキストのことは、テキストノードって呼んでます。

↑ HTML5 注意書き目次へ

6.1. DOMって何？

それではDOMって何でしょう。DOM は、Document Object Model （ドキュメントオブジェクトモデル）の略。HTML や XML を使う為の API（Application Programming Interface）、アプリケーションプログラミングインタフェースです。余計難しくなってしまいましたねー … X(

簡単に説明すると … 例えば、以下のような HTML があったとします。

HTML

<ul>
<li id="list1">リスト1</li>
<li id="list2">リスト2</li>
<li id="list3">リスト3</li>
</ul>

ここからリスト2というテキストノード（さっき出てきましたね！）を Javascript で取り出すときには以下のように書くことができます。

Javascript

var str = document . getElementsByTagName( 'li' )[1] . childNodes[0] . nodeValue;

言葉で表現すると、以下のような感じ …

2番目（プログラムでの数え方は0から始まるので、1が2番目）の li という名前のタグの、最初の子ノード（childNodes[0]）の値（nodeValue）を str という変数に入れる …

という意味の Jacascript の基本的な構文ですね！

また、li タグには id がついてたので、getElementById( ‘list2′ ) なんて書くこともできます。

DOM は言葉でいうと、そのノード（要素やテキストなど）にアクセスするための道具っていう感じです。Javascript はもちろん、jQuery（jQuery も Javascript です！） を使う時にも、この DOM を使っています。

そしてもちろんCSSもこの DOM をつかって、HTML のスタイリングをしています。li#list2 { … } なんて風に書きますよね！

↑ HTML5 注意書き目次へ

6.2. html5.js

ちょっと話が横にそれましたけど、IE でも HTML5 の新要素で DOM を使えるようにしてあげなくてはなりません。ちょっと面倒くさそう …。でも心配はいりません！html5.js というスクリプトを、Google から読み込むリンクを head 内に貼るだけです。

HTML

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

これで最低限、HTML5で Webサイトをつくる準備ができました！あとは文章構造、アウトラインに注意してコーディングしていくだけです！

IE でのDOMについて、ちょっと気をつけておきたい事があるのでリンクを貼っておきます。

↑ HTML5 注意書き目次へ

7. HTML5 でコーディングする時に便利なツール

HTML5 でコーディングしたら、やっぱりエラーチェックとアウトラインのチェックはしておきましょう！もうおなじみだとは思いますが、構文チェックツールとアウトラインをチェックするツールをご紹介します。

7.1. 参考になったブログやWebサイト

こちらは初めてHTML5に触れるときに、とっても参考になる記事とWebサイトです。

また、冒頭でプログレッシブ・エンハンスメント（Progressive Enhancement）って言葉を使いました。canvas とか、IE8 では使えないけど、必要最低限の機能を提供しよう！っていう考え方です。その為の Javascript ライブラリもあります。

↑ HTML5 注意書き目次へ

8. セマンティックとか文章構造とか、誰のためなの？

別に HTML5 に限ったことではないんですけど、セマンティックとか、アウトラインとか、コーディングする上で気を付けない事ってたくさんありますね。でも、それは一体誰の為にしてるんでしょう …。だって、そんな事しなくても、見た目、デザイン的には変わりません。セマンティックにすることは、機械が文章を理解しやすくするためですよね。

突然何を言い出すんだ！って思う人もいるかもしれませんが、先日友達（彼女はWebの仕事はしていませんし、ツイッターより携帯メールのヘビーユーザーです。）とおしゃべりをしていて、ふと思ったんです。

8.1. 私の友達が使いやすいWebサイトを作りたい

彼女とおしゃべりしていて、「HTML5っていうのになって、文章に意味を込めるのが当たり前になったんだよ！」って話をしても「ふーん」で終わってしまいます w

また、今している仕事のデザインとか見せて、「ここの 1px が … 」なんて話をしても、「それが何？」っていうリアクションです X(

私たちWebデザイナーはWebサイトを、この友達のようなユーザーさんに使ってもらう為に、デザインしたりコーディングしたりしています。でもときどきユーザーの目線を忘れがちなのかなーと …。

クロスブラウザ、セマンティック、UI … いろいろあるけど、この前ちょっと友達に言われちゃいました。

Firefox とか、Chrome とか、IE とか、いろいろあるのは分かったけど、そんないくつも使ってるのはあんたぐらいでしょ？私は普通に Firefox（私が彼女のパソコンにインストールしたやつ）しか使ってないもん。他のやつ（ブラウザ）で表示違うとか、比べてるのはあんただけなんじゃないの？

そうなんですよね。彼女達にとって、他のブラウザと比べてちょっとずれてたりしても別によくって、気にするのは私たちWebデザイナーくらいなのかもしれません。

例えば、とってもたくさんのユーザーが利用している楽天市場。その中の各お店ページは、table レイアウトが使われています。だからといって、Webサイトとしてダメなわけじゃないし、たくさんの人が利用しています。

8.2. デザインも誰の為？

以前どこかで、こんなコメントを見ました。

デザイナーさんはキレイなデザインより、売れるデザインを作ってください！

だからセマンティックな文章にしなくていいというわけでもないし、1px のズレを気にする必要がないって言いたい訳じゃありません。セマンティックなコーディングだって、入り口は機械の為だけれど、その向こう側には人がいて、最終的には使いやすいWebサイトにするためのもの。

ただちょっと私の友達に、使いやすいサイトだねーって言われたいなーと思ったし、彼女のような目線を忘れたくないなーと思ったのでブログにしました。

最後はちょっとわけわかめでしたけど、はじめて HTML5 を使う時の注意書きでした！

follow me on twitterfollow me on twitter RSS feedStay up to date via RSS