HTML5 で試しに Web ページを組んでみた

このエントリは、「HTML5 で試しに Web ページを組んでみた (改訂版)」の記事によって加筆されています。あわせてご覧ください。

このエントリは、「CSSロールオーバーのアクセシビリティを少し考えてみた」や「CSSでボックス要素を画面中央に表示させてみる」に続く試しにやってみたシリーズです。

先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。

HTML5で書かれた典型的なブログ記事のマークアップ例などはありますが、今回使用したサンプルのような企業サイトのマークアップ例を見つけることができませんでした。ですので上で挙げた仕様書や記事のサンプルを見つつ手探りで書いています。これをみて、そこはおかしいよ!などのご指摘ぜひお待ちしてます!

サンプル

画像 : サンプルページのスクリーンショット

老舗茶屋 富士の園 with 福禄屋

課題として事前に配布された切り出し画像をほぼそのまま使っていますので、なぜかjpgだったり、ログインボタンがなかったり、asideの部分が色が合っていない場合などありますが、今回はデザイン的な部分は無視してソースをみてやってください[1]

動作環境は、Firefox 3、Opera 9、Safari 3.2です。また、後述のJavaScriptを使用することにより、IE6、IE7でもCSSが適用されます。Firefox 2では正しく表示されないことを確認しています。IE8については未確認ですが、確かうまくいかなかった気がします。

新要素とスタイリング

HTML5から新たに採用される要素については、上で挙げたHTML 5 の新要素にわかりやすく載っています。今回のサンプルページでは、

を使っています(変更された要素を含む)。また、input要素のtype属性のemailも使っています。スタイリング前の素のHTML5では、Firefox 3よりもOpera 9、Safari 3.2の方がうまく解釈しているようでした。また、CSSはこれらのブラウザなら適用可能ですが、ブロック要素として認識しないようで、

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

のように指定することでブロック要素としてスタイリング可能になります。ただし、どうもlegend要素にはCSSが適用されませんでした。

また、IE6とIE7には、createElement.jsのように書いたJavaScriptを用意すればCSSが適用されるようになるみたいです。(thanks to CSS HappyLife)

以下にHTMLコードのアウトラインや、よくわからないことについて。

HTML5 コードのアウトライン

これまでヘッダー、フッター、ナビゲーション、などとマークアップしていた部分がSectioning contentと定義され、header要素やfooter要素、nav要素などでマークアップできるようになり、h1-6要素を含むコンテンツもsection要素で括るようになります。ソースの各部分をより直感的に把握できるようになっていると思います。

また、マークアップしたHTMLファイルはThe W3C Markup Validation Serviceで実験的にですが文法チェックができますよ。

<!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>

<section 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>
	<section class="special">
		<article>日本茶に合う和菓子を選ぼう! : ジャパニーズ スイーツ グラフティ</article>
	</section>
	
	<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>富士の園より新商品情報や、キャンペーン情報など様々な特典を無料で受けることが出来ます。</legend>
			<a href="#">富士の園の会員登録はこちら</a>
		</figure>
	</section>
	
	<section class="shopInfo">
		<h2>富士の園 店舗のご案内</h2>
		<form>都道府県と検索</form>
	</section>
</aside>

</section>
</div>

<footer>
	<ul><li>富士の園とは?</li>・・・</ul>
	<ul><li>会社概要</li>・・・</ul>
	<address>Copyright &copy; FUJINOEN All Rights Reserved.</address>
</footer>

</body>
</html>

article要素の使いどころがイマイチわかんない

仕様書(テキトーな翻訳)やHTML 5 における HTML 4 からの変更点には、

article 要素は、ドキュメントやページ、サイトの独立した一部分をつなげる構成から成るページのセクションを表します。これは、フォーラムの投稿、雑誌や新聞の記事、ウェブログのエントリ、ユーザがポストしたコメント、その他の独立した項目などです。

article 要素は blog エントリや新聞記事など、文書の中で独立した一片の内容を表します。

ってあるのですが、イマイチつかいどころがわからず、今回こんな感じかなぁと1カ所使っています。どなたか英語も日本語も苦手な僕にもーすこしわかりやすく教えていただけませんか。。HTML 5 の新要素のサンプルでは、

  • <div id="center" class="column">section要素に
  • <div class="post">article要素に

という置き換えで説明されていますが、これをみるとさらに混乱してしまいます。僕の感覚では後者もsection要素ではダメなの?と思ってしまいます。仕様書の説明で、ブログのコメントやトラックバックの内容を括る時に使うという感覚ならわかる気がしますが、なにが正解なんでしょうかコレ。

試しにやってみた感想

HTML5でもそれなりにサイトを組めることがわかりました。HTML5というと他の新しい技術に注目されがちですが、HTML5は書く側にとっても可読性・可視性においてよりわかりやすいマークアップをもたらしてくれると思います。

といっても、まだ草稿段階なのでなかなかHTML5で書いてあるサイトはないので、事例もしばらくは増えないかもしれません。しかし、今までなかった要素が新たに定義されたということは、そこをマークアップする必要性があると判断されたと考えることができます。新要素の名前を含め、今のXHTMLでのマークアップに参考になる部分は多いです。

今後は策定の進行具合とブラウザの対応に期待したいところですね。

  1. ちなみに、これは幹事のお1人の上司さんがウェブデザイン技能検定の試験で作ったデザインカンペをご好意で使用させていただいています。 [back]

“HTML5 で試しに Web ページを組んでみた” への 2 件のフィードバック

  1. safari 4のページがHTML5で書かれてますよ。
    とっても参考になります。

  2. >kuniさん
    そのようですね。Appleのような大きな企業が積極的にHTML5を採用するのはよい傾向ですね。

    さらにウェルカムページでは、audio要素、video要素、CSS Animationなども使われていて大変勉強になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA