- 2010年9月20日 9:51 PM
- 未分類
先月参加したドットコーダーのHTML5のワークショップで自分たちのグループがマークアップしたものを解説（？）します…。
3〜4人で1グループを構成し、全6グループがグループコーディングを行い、自分たちはFグループでした。（サンプルはCSSも組まれているのでwebkit系のブラウザで合わせてご覧下さい）
自分たちのグループはまず一通りざっとマークアップしてから見直して最適化していこうとしていたのですが、1時間少々の制限時間では思った通りのフローで作業を行うことができませんでした。。。
マークアップ解説
まずは下記のソースをご覧下さい。
（インデントもコメントもありませんので多少見辛いです。時間がある時に見やすいように整形するかもしれません。ちゃんとしたソースを見たい方はマークアップサンプルのページをご覧下さい。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トニー・ポークチョップ | ユルフワアイサレ TONY</title>
</head>
<body>
<div id="dotcoder">
<header>
<h1><a href="#">ユルフワアイサレ TONY</a></h1>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<form action="#" method="get">
<p><input type="search" name="q"><input type="image" src="img/btn_search.png" alt="検索"></p>
</form>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">イベント</a></li>
<li><a href="#">キャンペーン</a></li>
</ul>
</nav>
</header>
<div id="main">
<nav>
<ol>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">トニー・ポークチョップ</a></li>
</ol>
</nav>
<article>
<h2>商品紹介</h2>
<section>
<header>
<h3>トニー・ポークチョップ</h3>
<p>取り扱い開始日:<time datetime="2010-08-01" pubdate="pubdate">2010年8月1日</time></p>
</header>
<p>大ヒット映画「TONY STORY」で、物事を深く考え鋭い意見を述べるオモチャ達の参謀役として人気のキャラクター「トニー・ポークチョップ」の貯金箱です。</p>
<p>劇中アンソニーもわんさかお金を貯めることができたこの貯金箱を使えば、<b>あなたも楽しくお金が貯められること間違いなし！</b></p>
<p><small>※このキャラクターはトイストーリーに登場するキャラクターとは一切関係ありません。</small></p>
<figure>
<img src="img/product01.png" alt="" width="250" height="187" />
<figcaption>TONY, Inc All Rights Reserved.</figcaption>
</figure>
<dl>
<dt>対象年齢</dt>
<dd>4歳以上</dd>
<dt>価格</dt>
<dd>Â¥8,000（98%OFF）</dd>
<dt>発売日</dt>
<dd>2010年8月28日</dd>
</dl>
<section>
<h3>動画で見てみよう！</h3>
<video controls="controls" width="320" height="240">
<source src="video/tony.ogg" type="video/ogg" />
<source src="video/tony.mp4" type="video/mp4" />
<p>ご利用のブラウザーでは再生できません。<a href="video/tony.mp4">こちら</a>からダウンロードしてください。</p>
</video>
<p>お金を入れると、トニー・ポークチョプが歌って、踊りだします。<br />
さて、トニー・ポークチョップはどんな歌と踊りを披露してくれるのかな！？<br />
愛くるしい歌と踊りを収録した動画をご堪能ください！</p>
</section>
<section>
<h3>お客様の声</h3>
<section>
<h4>おかげさまで、大金持ちになれました♪</h4>
<blockquote>
事業に失敗し、破産→離婚→無職という転落人生を送ることになった矢先のことでした、ふと<strong>トニー・ポークチョップ</strong>の貯金箱が目に止まり、購入してみました。これが僕と<b>トニー・ポークチョップ</b>との出会いでした。<br />
そしてトニー・ポークチョップを使い始めてからというものの転落人生からは一変、お金が貯まりに貯まって、もう笑いが止まりませんね！僕にとって、<b>トニー・ポークチョップ</b>は命の次に大事な貯金箱ですよ。
</blockquote>
<p>大阪府にお住まいの H.Hさん（2?歳 男性）ご回答の<cite>お客様アンケート</cite>より</p>
</section>
</section>
<section>
<h3>この商品に関するお問い合わせ</h3>
<p>
株式会社TONY<br />
営業本部 営業本部長兼オペレーター<br />
帆○ 洋志(2?歳)
</p>
<dl>
<dt>TEL</dt>
<dd>xxxx-5050-1021</dd>
<dt>E-mail</dt>
<dd>xxxx@gogotony.co.jp</dd>
</dl>
</section>
</section>
</article>
<aside>
<h3>その他のおすすめ商品</h3>
<ul>
<li><a href="#"><img src="img/other_product01.png" alt=""><p>TONY STORY ウッチー</p></a></li>
<li><a href="#"><img src="img/other_product02.png" alt=""><p>TONY STORY バグ・ワモウイヤー</p></a></li>
<li><a href="#"><img src="img/other_product03.png" alt=""><p>TONY STORY アンソニー等身大フィギュア</p></a></li>
</ul>
</aside>
</div>
<div id="side">
<nav>
<h2>商品紹介</h2>
<ul>
<li><a href="#">男の子</a></li>
<li><a href="#">女の子</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">ファミリー</a></li>
<li><a href="#">知育玩具</a></li>
<li><a href="#">テレビゲーム</a></li>
</ul>
</nav>
<aside id="banner">
<ul>
<li><a href="#"><img src="img/banner01.png" alt="バナー１"></a></li>
<li><a href="#"><img src="img/banner02.png" alt="バナー２"></a></li>
<li><a href="#"><img src="img/banner03.png" alt="バナー３"></a></li>
</ul>
</aside>
</div>
<footer>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">イベント</a></li>
<li><a href="#">キャンペーン</a></li>
</ul>
<p><a href="#dotcoder">このページの先頭へ</a></p>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトご利用にあたって</a></li>
</ul>
<p><small>Copyright TONY Co.,Ltd. All rights Reserved</small></p>
</footer>
</div>
</body>
</html>
ドキュメントタイプからhead要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トニー・ポークチョップ | ユルフワアイサレ TONY</title>
</head>
時間がなかったので最低限のマークアップしか施していません。
title要素内も厳密に書くと、商品紹介という文言が入ってくるべきですが、抜けています。
header要素内
<header>
<h1><a href="#">ユルフワアイサレ TONY</a></h1>
<ul>
<li><a href="#">お問い合わせ</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
<form action="#" method="get">
<p><input type="search" name="q"><input type="image" src="img/btn_search.png" alt="検索"></p>
</form>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">イベント</a></li>
<li><a href="#">キャンペーン</a></li>
</ul>
</nav>
</header>
body要素内に無駄なラッパーdivを作ってしまっているのはご愛嬌。
header要素内にはサイトのタイトル、グローバルナビゲーション、検索フォーム、サブ的なページのナビゲーションを入れています。
サイトのタイトルなのですが、ここがかなり悩みました。
主催者サンプルでは以下のようになっていました。
<hgroup>
<h1><a href="#">TONY</a></h1>
<h2><a href="#">ユルフワアイサレ</a></h2>
</hgroup>
このページでhgroup要素を使うとしたらここしか無いのですが、自分たちとしては出現順序に違和感があったので全てひっくるめてh1要素でマークアップしました。
検索フォームにはtype=searchを、グルーバルナビはnav要素を使うというところはちゃんと抑えられていました。
メインコンテンツ
メインコンテンツ部分ではどこがarticle要素でマークアップするのに妥当な部分かを考えました。
article要素の構成内容としてHTML5マークアップガイドブック等に書いてあるようにRSSの構成内容として妥当かを考えました。
よって、パンくずリストとその他のおすすめ商品はarticle要素の外側にマークアップしています。ただ、その他のおすすめ商品はarticle内に含めた方が妥当だったかなとは思います。
パンくずリスト
例によって書籍を参考にパンくずリストはnavでマークアップしていますが、サイトの主要なナビゲーションかどうかを考えると主要とは言えないと思うのでここはnavでマークアップしない方が妥当だったかと思います。
<nav>
<ol>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">トニー・ポークチョップ</a></li>
</ol>
</nav>
細かく言うと、自分はvicunaスタイルのp>span+aでパンくずを書くのですが、グループ内の意見ではol>liでやるとのことだったのでリストでマークアップしています。
sectionのheader
<section>
<header>
<h3>トニー・ポークチョップ</h3>
<p>取り扱い開始日:<time datetime="2010-08-01" pubdate="pubdate">2010年8月1日</time></p>
</header>
商品名と取り扱い開始日の部分を当該セクションのヘッダーと見なして、header要素でマークアップしています。
またtime要素にpubdate属性を記述することで、親のarticle要素の公開日であることを明示しています。
figure要素
質疑応答で多少意見の食い違いがあった部分なのですが、自分たちはトニー画像をfigure要素でマークアップし、コピーライトをfigcaption要素でマークアップしました。
この部分もsmall要素を追加した方がより妥当だったかもしれません。
<figure>
<img src="img/product01.png" alt="" width="250" height="187" />
<figcaption>TONY, Inc All Rights Reserved.</figcaption>
</figure>
米印かつ赤字の部分
「※このキャラクターはトイストーリーに登場するキャラクターとは一切関係ありません。」
上記文言の部分は主催者サンプルではp>strongでマークアップされていますが、自分たちはp>smallでマークアップしました。
理由は補足事項なので細目などと同等と見なしたからです。
ただ、サイトの内容上トイストーリーと関係ないという主張は重要なのでstrongの方が妥当なのかもしれないなと思いました。
お客様の声
<section>
<h3>お客様の声</h3>
<section>
<h4>おかげさまで、大金持ちになれました♪</h4>
<blockquote>
事業に失敗し、破産→離婚→無職という転落人生を送ることになった矢先のことでした、ふと<strong>トニー・ポークチョップ</strong>の貯金箱が目に止まり、購入してみました。これが僕と<b>トニー・ポークチョップ</b>との出会いでした。<br />
そしてトニー・ポークチョップを使い始めてからというものの転落人生からは一変、お金が貯まりに貯まって、もう笑いが止まりませんね！僕にとって、<b>トニー・ポークチョップ</b>は命の次に大事な貯金箱ですよ。
</blockquote>
<p>大阪府にお住まいの H.Hさん（2?歳 男性）ご回答の<cite>お客様アンケート</cite>より</p>
</section>
</section>
今気付きましたが、お客様の声と動画で見てみよう！とこの商品に関するお問い合わせの部分のhx要素の数字にミスがありました。正しくはh4でした。
本題ですが、この部分は上記のようにマークアップしていますが、「おかげさまで、大金持ちになれました♪」の部分をblockquote要素に内包させ、本文と同レベルで扱うべきでした。
デザイン上、強調されていた部分はstrong要素でマークアップし、同じ文言が全て見た目上強調されていたので2度目以降の出現時はb要素でマークアップしました。
主催者サンプルではmark要素でマークアップされています。
mark要素については全く知らなかったので、本で調べてみると、引用に対して言及がある場合に目印としてマークアップするというようなことが書いてあったので、この場合はちょっと違うのかなと思いました。
ただ、このページ全体でその引用に対して言及しているという解釈をすれば、妥当ではあるかもしれないと思います。
お問い合わせ部分
改めて振り返ってて気付きました。
ここはaddress要素でマークアップするべきでした。
主催者サンプルはマイクロフォーマットでマークアップなさっていますが、HTML5ではマイクロデータというのが埋め込むことができるようになっているので、最近マイクロフォーマットという単語を聞くことがほぼありません。その点に関しても調べないといけないな〜と感じました。
その他のおすすめ商品部分
自分たちのマークアップではarticle要素の外のdiv#mainの中にマークアップしていますが、厳密に意味を考えると、トニー・ポークチョップ関連のその他のおすすめ商品なので「動画で見てみよう！」などと同じレベルでマークアップするべきだったのではないかと思いました。
また、うろ覚えですが、HTML5ではブロック要素とインライン要素の概念がなくなり、インライン要素の中にブロック要素を入れてはいけないという縛りがなくなったと記憶しているので、個別のおすすめ商品部分は全体をa要素でマークアップしています。
<aside>
<h3>その他のおすすめ商品</h3>
<ul>
<li><a href="#"><img src="img/other_product01.png" alt=""><p>TONY STORY ウッチー</p></a></li>
<li><a href="#"><img src="img/other_product02.png" alt=""><p>TONY STORY バグ・ワモウイヤー</p></a></li>
<li><a href="#"><img src="img/other_product03.png" alt=""><p>TONY STORY アンソニー等身大フィギュア</p></a></li>
</ul>
</aside>
サイドバー部分
<div id="side">
<nav>
<h2>商品紹介</h2>
<ul>
<li><a href="#">男の子</a></li>
<li><a href="#">女の子</a></li>
<li><a href="#">男女共用</a></li>
<li><a href="#">ファミリー</a></li>
<li><a href="#">知育玩具</a></li>
<li><a href="#">テレビゲーム</a></li>
</ul>
</nav>
<aside id="banner">
<ul>
<li><a href="#"><img src="img/banner01.png" alt="バナー１"></a></li>
<li><a href="#"><img src="img/banner02.png" alt="バナー２"></a></li>
<li><a href="#"><img src="img/banner03.png" alt="バナー３"></a></li>
</ul>
</aside>
</div>
サイドバー部分は全体をdivでくくり、ローカルナビゲーションをnav要素で、バナーをaside要素でマークアップしています。
フッター部分
<footer>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">お知らせ</a></li>
<li><a href="#">商品紹介</a></li>
<li><a href="#">イベント</a></li>
<li><a href="#">キャンペーン</a></li>
</ul>
<p><a href="#dotcoder">このページの先頭へ</a></p>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">プライバシーポリシー</a></li>
<li><a href="#">サイトご利用にあたって</a></li>
</ul>
<p><small>Copyright TONY Co.,Ltd. All rights Reserved</small></p>
</footer>
フッター部分に関しては特に言及することもありませんが、footer要素でくくり、ナビゲーションは主要ではないと見なしてnav要素は使っていません。最後にコピーライト表記をp>smallでマークアップしています。
以上が自分たちのグループがマークアップしたものの自分の勝手な解説になります。
実際にHTML5でサイトを作ってみたり、他人がマークアップしたものを見たら様々な方法でマークアップしているので何が最適かわからなります。
今年の初めにあったコーディングコンテストしかり、ドットコーダーしかり、成果物に対してあーだこーだーと意見を言い合うことで参加者の理解がより深まるのではないかなーと思いました。
ですので、もしもこの部分こうした方がいいとか、この部分はなぜこうマークアップしたかもっと詳しく説明してと思った方はどしどしご意見下さるとありがたいです！
- 新しい: JS読書会に参加しました
- 古い: ドットコーダーセッション3に参加しました