15Jun2009

HTML5 で試しに Web ページを組んでみた (改訂版)

Article entry published at 6:15 | 2 | 1

このエントリは、「HTML5 で試しに Web ページを組んでみた」の記事の続きです。

先日のGoogle I/Oで大きく取り上げられたように、最近HTML5のニュースが増えていて注目度が上がっているようです。canvas要素やvideo要素、オフラインキャッシュのような、アプリケーション開発におけるHTML5が主に注目されているようですが、Safari 4のウェルカムページがHTML5で描かれていたり、国内でもlivedoorのラボが積極的に採用したりと事例も増えていますね。

そこで、約半年前に作ってみたサンプルのコードを見直して修正してみました。参考にしたのは以下のページです。

HTML 5 (W3C Working Draft 23 April 2009)
HTML 5 (Editor’s Draft 13 June 2009)
HTML 5 ― HTML 4 からの変更点 (Working Draft 23 April 2009)
web:g

サンプル

老舗茶屋富士の園 with 福禄屋 (改訂版)^[1]

HTML5 コードのアウトライン

主に修正した部分のコードは強調表示してあります。その他コメントの書き方や細かい部分を最近の僕の書き方に変えてあります。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>老舗茶屋 富士の園 with 福禄屋</title>
	<link href="" rel="stylesheet" type="text/css" media="screen">
	<script src="js/createElement.js" type="text/javascript"></script>
</head>

<body>
<div id="wrapper">
<header>
	<h1 id="siteName">老舗茶屋 富士の園 with 福禄屋</h1>
	<ul><li>文字を大きく</li>･･･</ul>
	<form>サイト内検索</form>
</header>

<nav>
	<ul id="navCommon"><li>会社概要</li>･･･</ul>
	<ul id="navMain"><li>富士の園とは？ What's FUJINOEN</li>･･･</ul>
</nav>

<p id="keyVisual"><img></p>

<div id="contents">
<section id="main">
	<h2>富士の園とは？ What's FUJINOEN</h2>
	<p>静岡にある老舗茶屋「富士の園」と、浅草に本店を持つ老舗和菓子店「福禄家」の協力を得て、日本初の日本茶を中心に提供する全く新しい<mark>テイクアウト型</mark>の喫茶店です。</p>
	<ul><li>富士の園の歴史</li>･･･</ul>

	<section class="newProduct">
		<h3><b>新商品&amp;期間限定商品紹介 </b>New product &amp; time-limited article</h3>
		<section>
			<h4>新作和菓子【富士の桜】</h4>
			<figure>
				<img>
				<legend>甘さ控えめの春らしい和菓子です。<br>煎茶にとってもよく合います。</legend>
			</figure>
			<a href="#">商品詳細</a>
		</section>
		<section>
			<h4>春の新茶【静岡茶】</h4>
			<figure>
				<img>
				<legend>お待たせしました2007年度の新茶が出ました。新茶特有の甘みをご堪能ください。</legend>
			</figure>
			<a href="#">商品詳細</a>
		</section>
	</section>

	<section class="news">
		<h3><b>富士の園からのお知らせ </b>News from a FUJINOEN</h3>
		<dl>
			<dt><time datetime="2007-01-26">【2007年1月26日】</time></dt>
			<dd>新作和風壁紙ダウンロード開始！今すぐ会員登録を！</dd>
			･･･
		</dl>
	</section>
</section>

<aside>
	<p class="special">日本茶に合う和菓子を選ぼう！ : ジャパニーズ スイーツ グラフティ</p>

	<section id="login">
		<h2><b>会員様ログイン </b>for Login</h2>
		<form>ログイン</form>
		<a href="#">パスワードをお忘れの方</a>
	</section>

	<section id="signUp">
		<h2><b>富士の園会員登録 </b>Sign-in of FUJINOEN</h2>
		<figure>
			<legend><span>富士の園より新商品情報や、キャンペーン情報など様々な特典を無料で受けることが出来ます。</span></legend>
			<a href="#">富士の園の会員登録はこちら</a>
		</figure>
	</section>

	<section class="shopInfo">
		<h2>富士の園 店舗のご案内</h2>
		<form>都道府県と検索</form>
	</section>
</aside>

</div>
</div>

<footer>
	<ul><li>富士の園とは？</li>･･･</ul>
	<ul><li>会社概要</li>･･･</ul>
	<p class="copyright">Copyright &copy; FUJINOEN All Rights Reserved.</p>
</footer>
</body>
</html>

対応ブラウザは、前回同様、Firefox 3、Opera 9, 10、Safari 3, 4です。また、後述のJavaScriptを使用することにより、IE6, 7, IE8でもCSSが適用されます。

今回の主な修正点は以下の3点です。

<section id="contents">を<div id="contents">に
article要素を使わない
legend要素の内包テキストをspan要素で括る

`article`要素について

まず前回の記事でよくわかんなかったarticle要素についてですが、ブックマークのコメント(はてブ、Delicious)や、こちらの日本語の解説をみて、なんとなく役割がわかりました。これまでそういう概念をもつ要素がなかったので、class, id名付きdiv要素の単なる置き換えと軽く捉えていたのが混乱の原因だったようです。

ということで、以前は以下のように無理矢理使った感のあるマークアップでしたが、今回はここでの使用を控えました。

<section class="special">
	<article>日本茶に合う和菓子を選ぼう！ : ジャパニーズ スイーツ グラフティ</article>
</section>

このサンプルページではarticle要素を使うべきところは見あたりませんね^[2]。

`legend`要素がスタイリングされない件

以前この原因が良く分からなかったのですが、ヨモツネットさんの記事の「figure + legend を Firefox で扱う場合 3」でHTML5のコードの解析結果が大変詳細に書かれていて、原因がわかりました。

結果から言えば、legend要素は消えちゃう = 要素内のものが単に残るだけみたいです。実際にサンプルページをFirebugで調査してみるとlegend要素がありません。どうりでCSSで指定しても効かないわけですね。SafariのWebインスペクタで調査しても同じようでした。
ということで、現時点でlegend要素に指定したテキストにCSSを適用したいときは、

親要素(figure要素とか)で指定する。ただのインラインテキストになるのでインライン要素に有効なプロパティは適用される
例えば<legend><span>text...</span></legend>と括ってspan要素にCSSを指定する

が考えられます。2つ目はかなり強引ですね。あれ、legend要素の中身を他の要素で括るのってアリなのかな。

`section`要素の役割

以前は、#contentsをsection要素としていましたが、div要素に変えました。vantguarde – web:gさんの記事で、その理由が書かれていますが、要はスタイリングのためのdiv要素をそのままsection要素に置き換えることは正しくないそうです。
確かにスタイリング目的のdiv要素にはマークアップ的な意味はないですからね^[3]。

悔い改めてdivにしました。

ということで、まだまだ策定段階のHTML5ですが、海外を中心にHTML5で構築されたサイトを紹介するギャラリーも登場していますし、半年で結構目にするようになりました。これからもHTML5でのマークアップ事例はどんどん増えれば、「ここはこういうマークアップだろう」的な議論も活発になるんじゃないかなーと期待しています;-)

僕も今このサイトのデザインが~~やっと~~固まってきて~~ホントにやっと~~マークアップしてるんですが、HTML5とCSS3を使ってIEを無視したサイトにしようか迷ってるところです。
ここを見て下さる方々のUAを見て決めるかなー。

サンプル

HTML5 コードのアウトライン

article要素について

legend要素がスタイリングされない件

section要素の役割

関連エントリ

2

1

`article`要素について

`legend`要素がスタイリングされない件

`section`要素の役割