WordPressのテーマを

HTML5でつくるよ！むゆう

名前 ： 藤田　無憂

所属 ： (株)ミツエーリンクス

職種 ： ディレクター

TW : @anticyborg

FB : muyuu

Blog : http://stackstock.net

Mail : anticyborg@gmail.com

毎度おなじみハー

ド

ディスクの人です

よー

はじめに

何でみんなHTML5に興味があるの？

はじめに

何でみんなHTML5に興味があるの？

‣今流行の技術をいち早く取り入れたいから？

はじめに

何でみんなHTML5に興味があるの？

‣今流行の技術をいち早く取り入れたいから？

‣今後不可欠になるから？

はじめに

何でみんなHTML5に興味があるの？

‣今流行の技術をいち早く取り入れたいから？

‣今後不可欠になるから？

‣Flashが嫌いだから？

はじめに

何でみんなHTML5に興味があるの？

‣今流行の技術をいち早く取り入れたいから？

‣今後不可欠になるから？

‣Flashが嫌いだから？

とてもステキで攻撃的で現実的だと思います

でも現実は

クライアントワークではまだまだ積極的に使おう

となる時期ではないかなぁと思います

でも現実は

クライアントワークではまだまだ積極的に使おう

となる時期ではないかなぁと思います

‣仕様が全然が固まっていない

でも現実は

クライアントワークではまだまだ積極的に使おう

となる時期ではないかなぁと思います

‣仕様が全然が固まっていない

‣まだ新要素が出たり消えたりしてる

むしろリスクを考えると使いづらいのかも

今日は白だったものが明日には真っ黒になってい

る可能性だって十分にあります

むしろリスクを考えると使いづらいのかも

今日は白だったものが明日には真っ黒になってい

る可能性だって十分にあります

‣section要素の存在是非が問われている最中

むしろリスクを考えると使いづらいのかも

今日は白だったものが明日には真っ黒になってい

る可能性だって十分にあります

‣section要素の存在是非が問われている最中

‣time要素は一度削除されてまた追加された

むしろリスクを考えると使いづらいのかも

今日は白だったものが明日には真っ黒になってい

る可能性だって十分にあります

‣section要素の存在是非が問われている最中

‣time要素は一度削除されてまた追加された

女心と秋の空とはこの事です。困ったもんですね。

でも、やる価値はあると思います

僕はたいした理由を持ってなくて、単に楽しそう

だから覚えてみようかなぁと思ってるだけなんで

す。

HTML5って、

夢が詰まってますよね！！

だって

もうちょっとマジメな意見ですと、

‣環境に左右されない(プラグインのいらない)世界(Web)を作ろう

‣htmlはもっとしっかりとした構造モデルを持つべきだ

こういう思想に共感した感じです。

今回の趣旨そんなhtml5を、我々WPerが精一杯愛してあげま

しょう、我々なりのやりかたで！

手のかかる子ほど可愛いですからね

ただし

今回はAPI関連に関しては触れません

それはhtml5での適切なコーディングを習得してか

らでも良いのかと思います

なので

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

なので

まずはじめに

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

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

‣新しく追加された要素

‣廃止された要素

‣新しい概念、コンテンツモデル

‣アウトラインの概念

新しい要素

‣header ： 親レベル要素のヘッダー

‣footer ： 親レベル要素のフッター

‣section ： 各セクション(章、節)

‣nav ： ナビゲーション

‣article ： 単一の記事であることを示す

‣aside ： articleの内容と関連性の低い要素

他にもいっぱい(firure,video,audio等)

廃止された要素

basefont, big, center, font, s, strike, tt, u, frame,

frameset, noframes, acronym, applet, isindex, dir

主にタグの意味が装飾そのものだったタグがなく

なっているようです。html5では、装飾は全て

CSSで制御しましょう。

新しい概念、コンテンツモデル

今までは「ブロック要素」と「インライン要素」

に別れてました

div p h1～6ol liul

blockquote

etc...

dt dd

span a img

strongbr

textarea

etc...

abbr

form input

新しい概念、コンテンツモデル

今までは「ブロック要素」と「インライン要素」

に別れてました

div p h1～6ol liul

blockquote

etc...

dt dd

span a img

strongbr

textarea

etc...

abbr

form input×

‣文章構造を適切に分類できる要素の定義‣要素の中に入れて良い要素の種類を定義

新しい概念、コンテンツモデル

もちょっと細かく分類しましょ。って事で出来たのがコ

ンテンツモデルです。

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

今までは見出しタグだけで文章構造を作成文章構造としての区切りは見出

しタグだけ

→ページに関する文章と本文の

区別などはなし

アウトライン

<h1>ページのタイトル</h1>

<h2>ページのサブタイトル</h2>

<h2>記事タイトル</h2>

<p>記事本文</p>

<h3>記事内サブタイトル</h3>

<p>記事本文</p>

そこんとこ、今回は強化させて頂いてます

•hgroupタグで親要素の見出しを定義

• articleタグで本文を定義• sectionタグで章を定義

<hgroup> <h1>ページのタイトル</h1>

<h2>ページのサブタイトル</h2>

</hgroup>

<article> <h2>記事タイトル</h2>

<p>記事本文</p>

<section> <h3>記事内サブタイトル</h3>

<p>記事本文</p>

</section></article>

文章に意味を持たせる事で、他

のシステムからのデータ流用を

容易に出来ます

そこんとこ、今回は強化させて頂いてます

• hgroupタグで親要素の見出しを定義

• articleタグで本文を定義• sectionタグで章を定義

<hgroup> <h1>ページのタイトル</h1>

<h2>ページのサブタイトル</h2>

</hgroup>

<article> <h2>記事タイトル</h2>

<p>記事本文</p>

<section> <h3>記事内サブタイトル</h3>

<p>記事本文</p>

</section></article>

文章に意味を持たせる事で、他

のシステムからのデータ流用を

容易に出来ます

そこんとこ、今回は強化させて頂いてます

•hgroupタグで親要素の見出しを定義

• articleタグで本文を定義• sectionタグで章を定義

<hgroup> <h1>ページのタイトル</h1>

<h2>ページのサブタイトル</h2>

</hgroup>

<article> <h2>記事タイトル</h2>

<p>記事本文</p>

<section> <h3>記事内サブタイトル</h3>

<p>記事本文</p>

</section></article>

文章に意味を持たせる事で、他

のシステムからのデータ流用を

容易に出来ます

そこんとこ、今回は強化させて頂いてます

•hgroupタグで親要素の見出しを定義

• articleタグで本文を定義• sectionタグで章を定義

<hgroup> <h1>ページのタイトル</h1>

<h2>ページのサブタイトル</h2>

</hgroup>

<article> <h2>記事タイトル</h2>

<p>記事本文</p>

<section> <h3>記事内サブタイトル</h3>

<p>記事本文</p>

</section></article>

文章に意味を持たせる事で、他

のシステムからのデータ流用を

容易に出来ます

余談ですが、Safariのリーダー機能はhtml5を

利用して実装されています

クリックすると、

余談ですが、Safariのリーダー機能はhtml5を

利用して実装されています

articleタグに書かれた部分だけを表示してくれる

HTML5は概ね

「もっと構造的に書こうね！」こんな感じです

まとめ

ということで、

じゃあそろそろWordPressで

作りましょうか

ということで、

既存のテーマをhtml5にする

今回は、今のテーマ(html4とかxhtml1.0とか)を

html5可する感じにしたいと思います

おっとその前に

IE対策

まずちょっと問題があります。

IEの場合、新要素を使うと、DOMツリーが期待通

りに構成されなかったりCSSが効かなかったりと

色々よろしくない事が起こってしまいます

IE対策

さすがIEさんです

まずちょっと問題があります。

IEの場合、新要素を使うと、DOMツリーが期待通

りに構成されなかったりCSSが効かなかったりと

色々よろしくない事が起こってしまいます

IE対策

DOMに関する問題

<header>

<hgroup>

<h1>サイトのタイトルが入ると思いますよ</h1>

<h2>サイトの説明とかが入るんじゃない？</h2>

</hgroup>

</header>

こんなhtmlの場合

IE対策

DOMに関する問題

期待されるDOMツリー

header

└ hgroup

　├h1

　└h2

実際のDOMツリー

header

hgroup

h1

h2

IE対策

DOMに関する問題の対策document.createElement('section'); //これはsection要素の定義

http://html5shiv.googlecode.com/svn/trunk/html5.js

このスクリプトで要素を生成させます

これを使わせてもらいましょう

IE対策

<!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

こうしてもいいですね

<!--[if lte IE 8]><script src="<?php bloginfo('template_url'); ?>/j/html5.js"></script><![endif]-->

もしくはJSファイルをDLしてテンプレートフォルダにアップして

これをheaderタグ内に記述します

IE対策

CSSの問題と対策

<style> article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }</style>

CSSで未定義要素をブロック要素として定義してあげましょう

header, footer, section 等の新要素はIEで定義されていないの

でスタイルが効きません

上手にできましたー(/'□')/

では気を取り直して実際に

進めていきましょう

htmlタグ、ヘッダー等

DOCTYPE

やたらと長く、本当に意味があったのかよく分

からないDOCTPEはすっかり短くなりました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

DOCTYPE

やたらと長く、本当に意味があったのかよく分

からないDOCTPEはすっかり短くなりました

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

短っ！！

htmlタグ

htmlタグにもいっぱい属性を書けと強いられて

いた記憶がありますね

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<html lang="ja">

htmlタグ

htmlタグにもいっぱい属性を書けと強いられて

いた記憶がありますね

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<html lang="ja">

短っ！！

文字エンコーディング

html5は基本的にUTF-8を推奨しており、他は非

推奨らしいですよ

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta charset="UTF-8" />

文字エンコーディング

html5は基本的にUTF-8を推奨しており、他は非

推奨らしいですよ

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta charset="UTF-8" />

短っ！！

文字エンコーディング

html5は基本的にUTF-8を推奨しており、他は非

推奨らしいですよ

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta charset="UTF-8" />

下位互換があるので上の書き方でも良いらしい

レイアウト

画面大枠のタグ構成

ブログだったら大体みなさんこんな構成になってるんじゃないでしょうか

body

div#header

div#footer

div#content

div#main div#sidebar

画面大枠のタグ構成

こうしましょう

body

header#header

footer#footer

div#content

section#main aside#sidebar

↑sectionタグに変更 ↑asideタグに変更

←headerタグに変更

←footerタグに変更

画面大枠のタグ構成

こうしましょ

気になるところなんでid=header、footerつけ

てんの？要らなくね？

→はい要りませんね。

ただ、現行テーマはidとかclass

とかでスタイルを定義している

ケースが多そうなのでつけたま

まの方が楽かと思いました。

「いらない、何も、捨ててしま

おう」と言えないのが残念です

body

header#header

footer#footer

div#content

section#main aside#sidebar

↑sectionタグに変更 ↑asideタグに変更

←headerタグに変更

←footerタグに変更

body

header#header

footer#footer

div#content

section#main aside#sidebar

↑sectionタグに変更 ↑asideタグに変更

←headerタグに変更

←footerタグに変更

画面大枠のタグ構成

こうしましょ

気になるところ何でdiv#contentはsectionにし

ないの？

→sectionは単なるdivの代替タ

グではなく文章のまとまりを意

味するので、特に文章として意

味をなさない#contentにはdiv

を使う方が適切

画面大枠のタグ構成

こうしましょ

body

div#content

section#main

気になるところ右のウィジェットメニューは

navじゃないの？

→navは「主要なナビゲーショ

ン」に使われるべきタグであ

り、全てのリンクの塊に使うタ

グではない。

また通常サイドメニューは「メ

インコンテンツに関係する」リ

ンクばかりではないケースが多

いのでasideを使う方が無難

↑asideタグに変更

header#header

footer#footer

aside#sidebar

←headerタグに変更

←footerタグに変更

↑sectionタグに変更(single.phpならarticle)

各所の細かい対応

コンテンツ部分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; ?>

コンテンツ部分こんな感じに変更します

<?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; ?>

変更→追加→

追加→

追加→

追加→変更→

コンテンツ部分こんな感じに変更します

<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>

※変更点•div#articleをarticleに変更•記事タイトルにhgroupを追加•関連記事をsectionで纏める

変更→追加→

追加→

追加→

追加→変更→

コンテンツ部分こんな感じに変更します

<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>

気になるところ記事内にもheaderって使える

の？

→はい。headerは「ページの

ヘッダー」を指定するものでは

なく、「親要素に対するヘッ

ダ」になります。

コンテンツ部分こんな感じに変更します

<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>

気になるところ関連するページをsection内に

入れたんなら何故記事本文は

sectionに入れないの？

→セクショニングコンテンツに

は見出しを入れるようにすべき

で、the_content(‘’); には見出し

がないケースの方が多いため

sectionに入れていません

コンテンツ部分こんな感じに変更します

<?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> <h1>関連するページ</h1> <ul> <li>ページタイトル</li> <li>ページタイトル</li> </ul> </section></article><?php endwhile; ?>

気になるところ何で関連するページがh1に

なってるの？

→h1はページに対してユニー

クではなくなりました。

section(正確にはセクショニン

グコンテンツ)で区切られた要

素の中身に記載する見出しレベ

ルは自由に設定する事が出来ま

す

サイドナビ部分とりあえずウィジェットを使っているとして、吐き出

されるコードを変更しましょう

<div id=”xx” class=”widget”> <h2 class=”widget_title”>Recent Post</h2> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></div>

サイドナビ部分変更箇所は大してありませんね

<section id=”xx” class=”widget”> <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></section>

変更→

変更→

変更→

サイドナビ部分変更箇所は大してありませんね

<section id=”xx” class=”widget”> <h1 class=”widget_title”>Recent Post</h1> <ul> <li>テキストテキスト</li> <li>テキストテキスト</li> <li>テキストテキスト</li> </ul></section>

変更→

変更→

※変更点•div#xxをsectionに変更•h2をh1に変更

変更→

フッター・ヘッダー部分フッター・ヘッダーに関してはこれと言った定番がな

いので、「何となくこんな感じ？」を例に出します

<div id=”header”>

<h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2>

<ul> <?php wp_list_pages('title_li='); ?> </ul></div>

<div id=”footer”><p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p></div>

header.php

footer.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 id=”footer”><p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p></footer>

header.php

footer.php

変更→追加→

追加→

変更→

変更→

変更→

フッター・ヘッダー部分こんな感じに変更します

<header id=”header”> <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul></header>

<footer id=”footer”><p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p></footer>

header.php

footer.php

変更→追加→

追加→

変更→

変更→

変更→

※変更点•div#headerをheaderに変更•hgroupを追加•div#footerをfooterに変更

フッター・ヘッダー部分こんな感じに変更します

<header id=”header”> <hgroup> <h1 class=”title”><?php bloginfo(‘name’); ?></h1> <h2><?php bloginfo(‘description’); ?></h2> </hgroup> <ul> <?php wp_list_pages('title_li='); ?> </ul></header>

<footer id=”footer”><p>copyright &copy; <?php echo date(‘Y’); ?> blogname</p></footer>

header.php

footer.php

気になるところhgroupって？

→見出しが複数の見出しレベル

を持つ場合にグループ化し、ど

れが見出しになるかを定義

※最大の見出し以外はアウトラ

インに表示されません

HTML5はまだまだ未定な部分も多く、

分かりづらいとこ、？なとこも多いです

最後にひとつおねがい

みんなで情報を収集して

みんなで情報を共有する

そんな良いサイクルを作りませんか？

なので

最後まで読ん

でくれて

ありがとー(/

'□')/