HTML5分かりにくいですよね。
初めまして。11月からME課で働いている久保田(@ta2_o2p)です。よろしくお願いします！
自分の仕事としては、携帯サイト中心にコーディングを行っているのですが、BMKidsの縁起物と笑い袋の紹介ページのコーディングを行ったり、他にも色々とPCサイトのコーディングをしています。
さて、実はカヤックで働き始めてHTML5を本格的に触ったのですが、触れていくうちに「HTML5はややこしい所があるなー」と思い、この記事を書きました。
そういう訳で、HTML5でコーディングするに当たって間違いやすいポイントについて、書いていきたいと思います。
まずその前に
本題とは反れますが、HTML5でコーディングするにあたって、押さえておきたいポイントを2つ書きます。
文字コードの指定はmeta要素のcharset属性で
今までは以下のようにmeta要素の中に長々と属性を指定していたと思います。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
しかし、HTML5ではこう書きます。
<meta charset="UTF-8">
「え？これだけ？」と思った人もいると思いますが、これだけです。簡単ですね。
IEの8以下の為にhtml5.jsを読み込ませる
IE9ではHTML5をサポートするようですが、現時点で多く使われているIE6～8はHTML5に対応していません。 header要素やfooter要素にCSSで装飾してもそれが全く反映されないのです……
しかし、html5.jsというJavaScriptを読み込ませる事により、IE6～8でもCSSを反映させる事が出来ます。
<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
では、本題に入りたいと思います！
asideの使い方
asideを見直す(http://www.html5.jp/html5doctor/aside-revisited.html)によると、
メインのコンテンツほど重要な役割を持たないコンテンツだけれども、それがページや記事に関連しているなら、ビジュアル・デザインの有無にかかわらず、aside が適切。
と書かれています。つまりasideはサイドバーをコーディングする時に使用してもいいという事になります。 例としては下のようになります。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <aside> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> </aside>
しかし、ページや記事と関係ない物をサイドバーに置く事も考えられます(特に広告など)。 ページや記事と関係ない物を置く場合は、サイドバーをdivで囲ってコーディングしたほうが良いと思います。
<article> <h1>記事タイトル</h1> <p>本文本文本文本文本文</p> </article> <div id="sidebar"> <section> <h2>最新記事一覧</h2> <ul> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> <li><a href="/">記事タイトル</a></li> </ul> </section> <div class="ad"> <p>広告</p> </div> </div>
またasideは、サイドバーだけに使用されるのではなく、article内などでも使う事が出来ます。
使う場面としては、例えば百式(http://www.100shiki.com/)の記事の下にある管理人の独り言のような所や、記事の中に専門用語を書いた時の解説の役割を果たす用語集などがあると思います！
articleとsectionの違い
<article>と<section>は似た物同士に見えて、実は！全く違う物です。
まず<article>は、ブログの記事や記事に投稿されたコメントなど、メインコンテンツとなるような項目をマークアップする時に使います。 そして<section>は、文章の構成を示す物となります。
例えば、『永久保存版！？携帯コーディング、これだけ読めばすぐできる！（テンプレートのおまけつき）』という記事を例にあげると、
<section> <h1>携帯コーディングの基本</h1> <section> <h2>基礎の基礎</h2> <p>内容～</p> </section> <section> <h2>docomoでCSSを使う</h2> <p>内容～</p> </section> </section> <section> <h1>携帯コーディング独自テクニック</h1> <section> <h2>共通項目</h2> <h3>DTD、xml宣言</h3> <p>内容～</p> </section> </section>
という風にコーディングされます。
<section>のコーディングのコツとしては、本の目次を作る感覚でコーディングすれば上手くいくと思います！