1. WordPressのテーマを
HTML5でつくるよ！
むゆう

2. 名前 ： 藤田 無憂
所属 ： (株)ミツエーリンクス
職種 ： ディレクター
みハード ー
毎 度おなじ 人ですよ TW : @anticyborg
デ ィスクの
FB : muyuu
Blog : http://stackstock.net
Mail : anticyborg@gmail.com

3. はじめに
何でみんなHTML5に興味があるの？

4. はじめに
何でみんなHTML5に興味があるの？
‣ 今流行の技術をいち早く取り入れたいから？

5. はじめに
何でみんなHTML5に興味があるの？
‣ 今流行の技術をいち早く取り入れたいから？
‣ 今後不可欠になるから？

6. はじめに
何でみんなHTML5に興味があるの？
‣ 今流行の技術をいち早く取り入れたいから？
‣ 今後不可欠になるから？
‣ Flashが嫌いだから？

7. はじめに
何でみんなHTML5に興味があるの？
‣ 今流行の技術をいち早く取り入れたいから？
‣ 今後不可欠になるから？
‣ Flashが嫌いだから？
とてもステキで攻撃的で現実的だと思います

8. でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います

9. でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います
‣ 仕様が全然が固まっていない

10. でも現実は
クライアントワークではまだまだ積極的に使おう
となる時期ではないかなぁと思います
‣ 仕様が全然が固まっていない
‣ まだ新要素が出たり消えたりしてる

11. むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります

12. むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣ section要素の存在是非が問われている最中

13. むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣ section要素の存在是非が問われている最中
‣ time要素は一度削除されてまた追加された

14. むしろリスクを考えると使いづらいのかも
今日は白だったものが明日には真っ黒になってい
る可能性だって十分にあります
‣ section要素の存在是非が問われている最中
‣ time要素は一度削除されてまた追加された
女心と秋の空とはこの事です。困ったもんですね。

15. でも、やる価値はあると思います
僕はたいした理由を持ってなくて、単に楽しそう
だから覚えてみようかなぁと思ってるだけなんで
す。

16. だって
HTML5って、
夢が詰まってますよね！！

17. もうちょっとマジメな意見ですと、
‣ 環境に左右されない(プラグインのいらない)世界
(Web)を作ろう
‣ htmlはもっとしっかりとした構造モデルを持つべきだ
こういう思想に共感した感じです。

18. 今回の趣旨
そんなhtml5を、我々WPerが精一杯愛してあげま
しょう、我々なりのやりかたで！
手のかかる子ほど可愛いですからね

19. ただし
今回はAPI関連に関しては触れません
それはhtml5での適切なコーディングを習得してか
らでも良いのかと思います

20. なので

21. なので
そこは次回に期待！！
(きっと誰かがやってくれるよ)

22. まずはじめに

23. まずはじめに
HTML5で「覚えるべきこと」を覚えましょ

24. まずはじめに
HTML5で「覚えるべきこと」を覚えましょ
‣ 新しく追加された要素
‣ 廃止された要素
‣ 新しい概念、コンテンツモデル
‣ アウトラインの概念

25. 新しい要素
‣header ： 親レベル要素のヘッダー
‣footer ： 親レベル要素のフッター
‣section ： 各セクション(章、節)
‣nav ： ナビゲーション
‣article ： 単一の記事であることを示す
‣aside ： articleの内容と関連性の低い要素
他にもいっぱい(firure,video,audio等)

26. 廃止された要素
basefont, big, center, font, s, strike, tt, u, frame,
frameset, noframes, acronym, applet, isindex, dir
主にタグの意味が装飾そのものだったタグがなく
なっているようです。html5では、装飾は全て
CSSで制御しましょう。

27. 新しい概念、コンテンツモデル
今までは「ブロック要素」と「インライン要素」
に別れてました
div p h1∼6 span a img
ul ol li dt dd br strong abbr
blockquote form input textarea
etc... etc...

28. 新しい概念、コンテンツモデル
今までは「ブロック要素」と「インライン要素」
に別れてました
div p h1∼6 span a img
ul ol li dt dd br strong abbr
blockquote form input textarea
etc... etc...

29. 新しい概念、コンテンツモデル
もちょっと細かく分類しましょ。って事で出来たのがコ
ンテンツモデルです。
‣文章構造を適切に分類できる要素の定義
‣要素の中に入れて良い要素の種類を定義

30. ‣Flow ： 大体全部フロー・コンテンツ
‣Metadata ： コンテンツの定義用コンテンツ
‣Sectioning ： コンテンツを区切るためのコンテンツ
‣Haeading ： 見出し
‣Phrasing ： テキスト(テキスト内のタグ含む)
‣Embedded ： ドキュメントに埋め込むコンテンツ
‣Intaractive ： ユーザーが行動を起こすコンテンツ

31. アウトライン
今までは見出しタグだけで文章構造を作成
文章構造としての区切りは見出
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
しタグだけ
→ページに関する文章と本文の
<h2>記事タイトル</h2>
<p>記事本文</p> 区別などはなし
<h3>記事内サブタイトル</h3>
<p>記事本文</p>

32. そこんとこ、今回は強化させて頂いてます
<hgroup> • hgroupタグで親要素の見出し
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
を定義
</hgroup> • articleタグで本文を定義
<article> • sectionタグで章を定義
<h2>記事タイトル</h2>
<p>記事本文</p>
<section> 文章に意味を持たせる事で、他
<h3>記事内サブタイトル</h3>
のシステムからのデータ流用を
<p>記事本文</p>
</section> 容易に出来ます
</article>

33. そこんとこ、今回は強化させて頂いてます
<hgroup> • hgroupタグで親要素の見出し
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
を定義
</hgroup> • articleタグで本文を定義
<article> • sectionタグで章を定義
<h2>記事タイトル</h2>
<p>記事本文</p>
<section> 文章に意味を持たせる事で、他
<h3>記事内サブタイトル</h3>
のシステムからのデータ流用を
<p>記事本文</p>
</section> 容易に出来ます
</article>

34. そこんとこ、今回は強化させて頂いてます
<hgroup> • hgroupタグで親要素の見出し
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
を定義
</hgroup> • articleタグで本文を定義
<article> • sectionタグで章を定義
<h2>記事タイトル</h2>
<p>記事本文</p>
<section> 文章に意味を持たせる事で、他
<h3>記事内サブタイトル</h3>
のシステムからのデータ流用を
<p>記事本文</p>
</section> 容易に出来ます
</article>

35. そこんとこ、今回は強化させて頂いてます
<hgroup> • hgroupタグで親要素の見出し
<h1>ページのタイトル</h1>
<h2>ページのサブタイトル</h2>
を定義
</hgroup> • articleタグで本文を定義
<article> • sectionタグで章を定義
<h2>記事タイトル</h2>
<p>記事本文</p>
<section> 文章に意味を持たせる事で、他
<h3>記事内サブタイトル</h3>
のシステムからのデータ流用を
<p>記事本文</p>
</section> 容易に出来ます
</article>

36. 余談ですが、Safariのリーダー機能はhtml5を
利用して実装されています
クリックすると、

37. 余談ですが、Safariのリーダー機能はhtml5を
利用して実装されています
articleタグに書かれた部分だけを表示してくれる

38. まとめ
HTML5は概ね
「もっと構造的に書こうね！」
こんな感じです

39. ということで、

40. ということで、
じゃあそろそろWordPressで
作りましょうか

41. 既存のテーマをhtml5にする
今回は、今のテーマ(html4とかxhtml1.0とか)を
html5可する感じにしたいと思います

42. おっとその前に

43. IE対策
まずちょっと問題があります。
IEの場合、新要素を使うと、DOMツリーが期待通
りに構成されなかったりCSSが効かなかったりと
色々よろしくない事が起こってしまいます

44. IE対策
まずちょっと問題があります。
IEの場合、新要素を使うと、DOMツリーが期待通
りに構成されなかったりCSSが効かなかったりと
色々よろしくない事が起こってしまいます
さすがIEさんです

45. IE対策
DOMに関する問題
こんなhtmlの場合
<header>
<hgroup>
<h1>サイトのタイトルが入ると思いますよ</h1>
<h2>サイトの説明とかが入るんじゃない？</h2>
</hgroup>
</header>

46. IE対策
DOMに関する問題
期待されるDOMツリー 実際のDOMツリー
header header
└ hgroup hgroup
├h1 h1
└h2 h2

47. IE対策
DOMに関する問題の対策
document.createElement('section'); //これはsection要素の定義
このスクリプトで要素を生成させます
http://html5shiv.googlecode.com/svn/trunk/html5.js
これを使わせてもらいましょう

48. IE対策
これをheaderタグ内に記述します
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
もしくはJSファイルをDLしてテンプレートフォルダにアップして
<!--[if lte IE 8]>
<script src="<?php bloginfo('template_url'); ?>/j/html5.js"></script>
<![endif]-->
こうしてもいいですね

49. IE対策
CSSの問題と対策
header, footer, section 等の新要素はIEで定義されていないの
でスタイルが効きません
CSSで未定義要素をブロック要素として定義してあげましょう
<style>
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section { display: block; }
</style>

50. 上手にできましたー(/'□')/
では気を取り直して実際に
進めていきましょう

51. htmlタグ、ヘッダー等

52. DOCTYPE
やたらと長く、本当に意味があったのかよく分
からないDOCTPEはすっかり短くなりました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

53. DOCTYPE
やたらと長く、本当に意味があったのかよく分
からないDOCTPEはすっかり短くなりました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
短っ！！

54. htmlタグ
htmlタグにもいっぱい属性を書けと強いられて
いた記憶がありますね
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<html lang="ja">

55. htmlタグ
htmlタグにもいっぱい属性を書けと強いられて
いた記憶がありますね
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<html lang="ja">
短っ！！

56. 文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />

57. 文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
短っ！！

58. 文字エンコーディング
html5は基本的にUTF-8を推奨しており、他は非
推奨らしいですよ
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta charset="UTF-8" />
下位互換があるので上の書き方でも良いらしい

59. レイアウト

60. 画面大枠のタグ構成
ブログだったら大体みなさんこんな構成になってるんじゃないでしょうか
body
div#header
div#content
div#main div#sidebar
div#footer

61. 画面大枠のタグ構成
こうしましょう
body
header#header ←headerタグに変更
div#content
section#main aside#sidebar
↑sectionタグに変更 ↑asideタグ
に変更
footer#footer ←footerタグに変更

62. 画面大枠のタグ構成
こうしましょ
body 気になるところ
header#header ←headerタグに変更 なんでid=header、footerつけ
てんの？要らなくね？
div#content
→はい要りませんね。
section#main aside#sidebar ただ、現行テーマはidとかclass
↑sectionタグに変更 ↑asideタグ とかでスタイルを定義している
に変更 ケースが多そうなのでつけたま
まの方が楽かと思いました。
「いらない、何も、捨ててしま
おう」と言えないのが残念です
footer#footer ←footerタグに変更

63. 画面大枠のタグ構成
こうしましょ
body 気になるところ
header#header ←headerタグに変更 何でdiv#contentはsectionにし
ないの？
div#content
→sectionは単なるdivの代替タ
section#main aside#sidebar グではなく文章のまとまりを意
↑sectionタグに変更 ↑asideタグ 味するので、特に文章として意
に変更 味をなさない#contentにはdiv
を使う方が適切
footer#footer ←footerタグに変更

64. 画面大枠のタグ構成
こうしましょ
body 気になるところ
header#header ←headerタグに変更 右のウィジェットメニューは
navじゃないの？
div#content
→navは「主要なナビゲーショ
section#main aside#sidebar ン」に使われるべきタグであ
↑sectionタグに変更 ↑asideタグ り、全てのリンクの塊に使うタ
(single.phpならarticle) に変更 グではない。
また通常サイドメニューは「メ
インコンテンツに関係する」リ
ンクばかりではないケースが多
footer#footer ←footerタグに変更 いのでasideを使う方が無難

65. 各所の細かい対応

66. コンテンツ部分
index.php, single.php 等のコンテンツ部分を変更します
<?php while (have_posts()) : the_post(); ?>
<div id="article">
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p>
<?php the_content(''); ?>
<h2>関連するページ</h2>
<ul>
<li>ページタイトル</li>
<li>ページタイトル</li>
</ul>
</div>
<?php endwhile; ?>

67. コンテンツ部分
こんな感じに変更します
<?php while (have_posts()) : the_post(); ?>
変更→ <article id="article">
追加→ <header>
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p>
追加→ </header>
<?php the_content(''); ?>
追加→ <section>
<h2>関連するページ</h2>
<ul>
<li>ページタイトル</li>
<li>ページタイトル</li>
</ul>
追加→ </section>
変更→ </article>
<?php endwhile; ?>

68. コンテンツ部分
こんな感じに変更します
<?php while (have_posts()) : the_post(); ?> ※変更点
変更→ <article id="article">
追加→ <header> •div#articleをarticleに変更
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p> •記事タイトルにhgroupを追加
追加→ </header>
•関連記事をsectionで纏める
<?php the_content(''); ?>
追加→ <section>
<h1>関連するページ</h1>
<ul>
<li>ページタイトル</li>
<li>ページタイトル</li>
</ul>
追加→ </section>
変更→ </article>
<?php endwhile; ?>

69. コンテンツ部分
こんな感じに変更します
<?php while (have_posts()) : the_post(); ?> 気になるところ
<article id="article">
<header> 記事内にもheaderって使える
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p> の？
</header> →はい。headerは「ページの
<?php the_content(''); ?> ヘッダー」を指定するものでは
<section> なく、「親要素に対するヘッ
<h1>関連するページ</h1>
ダ」になります。
<ul>
<li>ページタイトル</li>
<li>ページタイトル</li>
</ul>
</section>
</article>
<?php endwhile; ?>

70. コンテンツ部分
こんな感じに変更します
<?php while (have_posts()) : the_post(); ?> 気になるところ
<article id="article">
<header> 関連するページをsection内に
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p> 入れたんなら何故記事本文は
</header> sectionに入れないの？
<?php the_content(''); ?> →セクショニングコンテンツに
<section> は見出しを入れるようにすべき
<h1>関連するページ</h1>
で、the_content(‘’); には見出し
<ul>
<li>ページタイトル</li> がないケースの方が多いため
<li>ページタイトル</li>
sectionに入れていません
</ul>
</section>
</article>
<?php endwhile; ?>

71. コンテンツ部分
こんな感じに変更します
<?php while (have_posts()) : the_post(); ?> 気になるところ
<article id="article">
<header> 何で関連するページがh1に
<h1><?php the_title(); ?></h1>
<p class="date"><?php the_time('Y年m月d日'); ?></p> なってるの？
</header> →h1はページに対してユニー
<?php the_content(''); ?> クではなくなりました。
<section>
<h1>関連するページ</h1>
section(正確にはセクショニン
<ul>
<li>ページタイトル</li> グコンテンツ)で区切られた要
<li>ページタイトル</li> 素の中身に記載する見出しレベ
</ul>
</section> ルは自由に設定する事が出来ま
</article>
<?php endwhile; ?> す

72. サイドナビ部分
とりあえずウィジェットを使っているとして、吐き出
されるコードを変更しましょう
<div id=”xx” class=”widget”>
<h2 class=”widget_title”>Recent Post</h2>
<ul>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ul>
</div>

73. サイドナビ部分
変更箇所は大してありませんね
変更→ <section id=”xx” class=”widget”>
変更→ <h1 class=”widget_title”>Recent Post</h1>
<ul>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
<li>テキストテキスト</li>
</ul>
変更→ </section>

74. サイドナビ部分
変更箇所は大してありませんね
変更→ <section id=”xx” class=”widget”> ※変更点
変更→ <h1 class=”widget_title”>Recent Post</h1>
<ul>
<li>テキストテキスト</li>
•div#xxをsectionに変更
<li>テキストテキスト</li> •h2をh1に変更
<li>テキストテキスト</li>
</ul>
変更→ </section>

75. フッター・ヘッダー部分
フッター・ヘッダーに関してはこれと言った定番がな
いので、「何となくこんな感じ？」を例に出します
header.php
<div id=”header”>
<h1 class=”title”><?php bloginfo(‘name’); ?></h1>
<h2><?php bloginfo(‘description’); ?></h2>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>
footer.php
<div id=”footer”>
<p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p>
</div>

76. フッター・ヘッダー部分
こんな感じに変更します
header.php
変更→ <header id=”header”>
追加→ <hgropu>
<h1 class=”title”><?php bloginfo(‘name’); ?></h1>
<h2><?php bloginfo(‘description’); ?></h2>
追加→ </hgroup>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
変更→ </header>
footer.php
変更→ <footer id=”footer”>
<p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p>
変更→ </footer>

77. フッター・ヘッダー部分
こんな感じに変更します
header.php
変更→ <header id=”header”>
※変更点
追加→ <hgroup>
<h1 class=”title”><?php bloginfo(‘name’); ?></h1> •div#headerをheaderに変更
<h2><?php bloginfo(‘description’); ?></h2>
追加→ </hgroup> •hgroupを追加
<ul>
<?php wp_list_pages('title_li='); ?>
•div#footerをfooterに変更
</ul>
変更→ </header>
footer.php
変更→ <footer id=”footer”>
<p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p>
変更→ </footer>

78. フッター・ヘッダー部分
こんな感じに変更します
header.php
<header id=”header”>
気になるところ
<hgroup>
<h1 class=”title”><?php bloginfo(‘name’); ?></h1> hgroupって？
<h2><?php bloginfo(‘description’); ?></h2>
</hgroup> →見出しが複数の見出しレベル
<ul> を持つ場合にグループ化し、ど
<?php wp_list_pages('title_li='); ?>
</ul> れが見出しになるかを定義
</header>
※最大の見出し以外はアウトラ
インに表示されません
footer.php
<footer id=”footer”>
<p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p>
</footer>

79. 最後にひとつおねがい
HTML5はまだまだ未定な部分も多く、
分かりづらいとこ、？なとこも多いです

80. なので
みんなで情報を収集して
みんなで情報を共有する
そんな良いサイクルを作りませんか？

81. でく れて
まで 読ん
最後 (/' □')/
あり がとー