6/9 HTML5（構造化要素） / WordPress（カスタマイズ）
HTML5（構造化要素）
講師ブログ（対象ページ）
http://d.hatena.ne.jp/web-0127/20140601/p1http://d.hatena.ne.jp/web-0127/20140602/p1
参考サイト：
slideshare
http://www.slideshare.net/myakura/html5-2480964
HTML5とは、
HTML5
- アウトライン構造を作る
- body直下に必ずheaderタグ
- h1は何回使っても良い。
header
└h1
└h2
└h3
└h4
└h5
- h1はheaderタグで囲まなければいけない
- bodyの中には見出しが必要（「section」ではダメ）
以下のような階層構造で記述する
header => h1 => p
- div id = "container"をbodyとheaderの間に入れるのはOK（そのdivはレイアウトであって文章構造ではないから）
■sectionタグで囲んだ例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5の基本構造</title> </head> <body> <section> <h1>Cafe debut</h1> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p> </section> </body> </html>
HTML5 Outlinerでの確認結果
■articleタグで囲んだ例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5の基本構造</title> </head> <body> <article> <h1>Cafe debut</h1> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p> </article> </body> </html>
HTML5 Outlinerでの確認結果
■headerタグで囲んだ例
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5の基本構造</title> </head> <body> <header> <h1>Cafe debut</h1> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞（受賞結果はこちら）</p> </header> </body> </html>
HTML5 Outlinerでの確認結果
[メモ]
- これからは、Metadataがより重要になっていく
- id名はレイアウト用
- classは文章構造用
- idはｊQueryでDOMの引継ぎで使用するため、文章構造目的では使用しない方が良い。
- セクショニング・コンテンツは、ブロックレベル要素ではなくなった。
- セクショニングコンテンツは、「見出し」 + 「本文」 これが一まとまりでセクション
<section> <h2> … 見出し <p> … 本文 </section>
Untitled Sectionとは、
- 画像（認識されない）
- セクショニングコンテンツの見出しが未定義
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>はじめてのHTML5</title> <!--[if lte IE9]--> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, menu, nav, seciton {display:block } </style> </head> <body> <div id = "container"> <header> <h1>章見出し</h1> <p>テーマのキーワードを含むリード文</p> <nav> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> <li><a href="#">メニュー5</a></li> </ul> </nav> </header><!--header--> <div id = "content"> <section> <h2>節見出し</h2> <p>テーマのキーワードを含むリード文</p> <section> <h3>項目1</h3> <p>本文1本文1本文1</p> <aside> <h4></h4> <p></p> </aside> </section> </section> </div><!--/#content--> <div id="sidebar"> <section> <h3>項目2</h3> <p>本文2本文2本文2</p> </section> </div><!--/#sidebar--> <footer> <p>(c)2013 WebDesign</p> </footer><!--/footer--> </div><!--/#container--> </body> </html>
Untitled Sectionはnavを指しているらしい
⇒ nav も一つのアウトライン構造（見出しがあるべきもの）と見なされているようです。
■画像の扱いについて
alt 属性：
画像（自体）の説明であるべき（HTML5の場合）figcaption タグ
- caption ：画像の解説（画像の下に配置）
- p の中で画像を使うのは間違いではない、が、解説が必要な画像はなるべくfigcaptionタグ内で使用する
■アドレスタグについて
- ©コピーライトを書く際にアドレスタグの使用は禁止（smallタグを使用する）
<p><small>(c)Copyright</small></p>
- footerには著作情報を入れてはいけない（addressタグNG）
- アドレスタグはサイトの管理者（クライアントではない）を記述する場合にはOK
参考： http://liginc.co.jp/designer/archives/11313
■timeタグ
pubdate(public date) --- タグhtml5では廃止
■mark タグ
ブラウザでの表示結果
■ruby タグ
<p> <ruby>日本猫<rt>にほんねこ</rt></ruby> </p> <p> <ruby>日<rt>に</rt>本<rt>ほん</rt>猫<rt>ねこ</rt></ruby> </p> <p> <ruby>日本猫<rp>(</rp><rt>にほんねこ</rt><rp>)</rp></ruby> </p>
■Chromeでの表示結果
■Firefoxでの表示結果
<ruby>日本猫<rp>(</rp><rt>にほんねこ</rt><rp>)</rp></ruby>
↑
Firefoxで有効な書き方
参考サイト：
「ゼロから始めるレスポンシブWebデザイン入門」
http://ascii.jp/elem/000/000/700/700611/
「第2回 HTML5で使い方が変更されたタグをまとめよう - MdN Design Interactive」
http://www.mdn.co.jp/di/articles/2605/?page=3
「ITかあさん」
http://www.kaasan.info/
「Webデザインレシピ」
http://webdesignrecipes.com/
WordPress
https://wordpress.com/
↑
WordPressのページが即座にできる
が、カスタマイズはCodexが必要
（知識が無い人にはカスタマイズがほとんどできない）
注意：
- WordPressは、注意していないと乗っ取られる可能性がある。
- こまめに管理ページ状況をチェックすること
参考書：
「iPhone & WordPressで作るホームページ」
- 作者: 飯野絢一郎
- 出版社/メーカー: カットシステム
- 発売日: 2014/03
- メディア: 単行本
- この商品を含むブログを見る
国産WordPress テンプレート紹介
Stinger3http://stinger3.com/
ダウンロードページ：
http://stinger3.com/dl/
企業向けWordPress テンプレート
http://bizvektor.com/
