HTML5, きちんと。
-
Upload
masataka-yakura -
Category
Technology
-
view
798.488 -
download
7
description
Transcript of HTML5, きちんと。
![Page 1: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/1.jpg)
HTML5, きちんと。masataka yakura
![Page 2: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/2.jpg)
こんばんは。矢倉といいます。
![Page 3: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/3.jpg)
http://www.mitsue.co.jp/
![Page 4: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/4.jpg)
Web標準Bloghttp://standards.mitsue.co.jp/
![Page 5: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/5.jpg)
OperaWeb標準カリキュラムhttp://dev.opera.com/articles/view/801
![Page 6: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/6.jpg)
Web Designing2009年11月号(10月17日発売)
![Page 7: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/7.jpg)
「HTML5&CSS3でWebは変わるのか?」
![Page 8: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/8.jpg)
監修しました →(11月21日発売)
![Page 9: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/9.jpg)
「プロクリエイターの作例に学ぶ
XHTML+CSS達人テクニック」
![Page 10: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/10.jpg)
本日のテーマ:HTML5
![Page 11: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/11.jpg)
まだまだ情報が少ない。
![Page 12: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/12.jpg)
背景や目的についてもある程度は知ってて欲しい。
![Page 13: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/13.jpg)
HTML5とは?XHTMLはどうなる?もうひとつの目的HTML5の新機能
HTML5のセクション勧告はいつごろ?どう使っていくか
![Page 14: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/14.jpg)
HTML5とは?
![Page 15: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/15.jpg)
「Webプラットフォーム」その中核をなす仕様。
![Page 16: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/16.jpg)
HTML4やXHTML1は「文書」の作成が目的だった。
![Page 17: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/17.jpg)
HTML5では新たに「アプリケーション」が加わる。
![Page 18: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/18.jpg)
これまでのあゆみ
![Page 19: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/19.jpg)
1998年2月
XML 1.0が勧告。
![Page 20: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/20.jpg)
W3CはXMLへの移行を計画。
![Page 21: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/21.jpg)
HTMLは段階を経て
XMLに移行するプランに。
![Page 22: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/22.jpg)
XHTML 1.0 ― HTML4をXML化
XHTML 1.1 ― 機能を細分化
XHTML 2.0 ― 新しく作り直し
![Page 23: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/23.jpg)
2002年~ブログが普及しだす。
![Page 24: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/24.jpg)
「XHTML+CSS」が広まる。
![Page 25: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/25.jpg)
ほとんどが text/htmlXMLとして使われなかった。
![Page 26: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/26.jpg)
![Page 27: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/27.jpg)
Webアプリが台頭し
今のHTMLでは機能不足に。
![Page 28: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/28.jpg)
新しい機能の実現に
XMLの普及を待つ必要がある?
![Page 29: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/29.jpg)
2004年6月
W3Cのワークショップにて
![Page 30: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/30.jpg)
ベンダー「HTMLの拡張を!」
![Page 31: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/31.jpg)
W3C「うちではやりませんがお好きにどうぞ。」
![Page 32: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/32.jpg)
Apple, Mozilla, OperaWHATWGを立ち上げる。
![Page 33: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/33.jpg)
ベンダーによって
HTMLの拡張が始められた。
![Page 34: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/34.jpg)
ベンダーが関わった仕様は開発者から評価を得ていく。
![Page 35: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/35.jpg)
2006年10月
Tim Berners-Leeのブログにて
![Page 36: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/36.jpg)
It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML […] all at once didn’t work.― Tim Berners‐Lee: “Reinventing HTML”
![Page 37: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/37.jpg)
「XMLへの移行はいっせいには進まなかった。」
![Page 38: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/38.jpg)
2007年3月
新HTML WG設立。
![Page 39: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/39.jpg)
WHATWGと協力して
HTML5の策定をスタート。
![Page 40: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/40.jpg)
2009年5月
Google I/Oで大プッシュ。
![Page 41: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/41.jpg)
少しずつ実装も進んでいる。
![Page 42: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/42.jpg)
XHTMLはどうなる?
![Page 43: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/43.jpg)
XHTML2 WGが
2009年末で活動終了と発表。
![Page 44: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/44.jpg)
XHTML 2.0は終了。
でも、XHTMLはなくならない。
![Page 45: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/45.jpg)
HTML5はXMLとして
扱うことも可能(XHTML5)
![Page 46: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/46.jpg)
HTML5のHTML構文でも
「XMLっぽく」書けるように。
![Page 47: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/47.jpg)
<img> ← 今までのHTML<img /> ← こっちもOKに!
※ 混在もできます。
![Page 48: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/48.jpg)
というわけで、ご心配なく。
![Page 49: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/49.jpg)
Misunderstanding Markuphttp://standards.mitsue.co.jp/resources/mm_comic/
![Page 50: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/50.jpg)
もうひとつの目的
![Page 51: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/51.jpg)
「機能の拡張」もあるけれど「互換性」も重要なテーマ。
![Page 52: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/52.jpg)
1. ブラウザーの互換性
![Page 53: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/53.jpg)
![Page 54: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/54.jpg)
Webアプリの開発には
JavaScriptやDOMが不可欠。
![Page 55: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/55.jpg)
![Page 56: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/56.jpg)
クロスブラウザー対応は厄介。互換性に問題がある。
![Page 57: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/57.jpg)
非互換を生む2つの「ない」
![Page 58: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/58.jpg)
実装がない。→ 対応状況が異なる
![Page 59: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/59.jpg)
仕様がない。→ 実装に違いが生まれる
![Page 60: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/60.jpg)
実装はベンダー依存だが仕様は定義して対応できる。
![Page 61: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/61.jpg)
HTML5では詳細な処理規則を定義。
![Page 62: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/62.jpg)
2. 既存の実装との互換性
![Page 63: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/63.jpg)
今のブラウザーやサイトとも互換性をある程度は保つ。
![Page 64: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/64.jpg)
大きな変更はできないが今の環境を捨てずに済む。
![Page 65: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/65.jpg)
互換性を持つことで
Webを段階的に進化させられる。
![Page 66: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/66.jpg)
HTML5の新機能
![Page 67: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/67.jpg)
APIの追加やマークアップの拡張など。
![Page 68: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/68.jpg)
<canvas>
![Page 69: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/69.jpg)
スクリプトから画像を扱う。応用はさまざま。
![Page 70: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/70.jpg)
Bespinhttps://bespin.mozilla.com/
![Page 71: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/71.jpg)
<canvas>で作られたエディタ。
![Page 72: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/72.jpg)
![Page 73: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/73.jpg)
Chrome Experimentshttp://www.chromeexperiments.com/
![Page 74: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/74.jpg)
最新技術のショーケース。
![Page 75: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/75.jpg)
![Page 76: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/76.jpg)
<video> & <audio>
![Page 77: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/77.jpg)
<img> みたく、簡単に動画・音声を扱えるように。
![Page 78: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/78.jpg)
<video src=“intro_html5.vid”><a …> ダウンロード </a>
</video>
![Page 79: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/79.jpg)
![Page 80: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/80.jpg)
プラグインじゃないので
CSSやSVGと組み合わせが可能。
![Page 81: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/81.jpg)
マークアップ
![Page 82: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/82.jpg)
マークアップにも数多くの拡張や変更が。
![Page 83: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/83.jpg)
<canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
![Page 84: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/84.jpg)
よく使われるclass/idを要素として採用する。
![Page 85: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/85.jpg)
<div id=“header”>
→ <header>
<div class=“section”>
→ <section>
![Page 86: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/86.jpg)
定型句はよりシンプルに。
![Page 87: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/87.jpg)
<!DOCTYPE html>
![Page 88: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/88.jpg)
<meta charset=“UTF-8”>
![Page 89: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/89.jpg)
古いブラウザーでも機能する。
![Page 90: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/90.jpg)
フォームの拡張も。
![Page 91: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/91.jpg)
<input type=text ...><input type=password ...>
![Page 92: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/92.jpg)
<input type=email ...><input type=range ...><input type=color ...><input type=datetime ...>...
![Page 93: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/93.jpg)
名 前 (必須):
メール (必須):
![Page 94: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/94.jpg)
<input type=“text” ... required><input type=“email” ... required>
![Page 95: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/95.jpg)
サイト内検索: キーワードを入力
![Page 96: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/96.jpg)
<input type=“search”placeholder=“キーワードを入力”>
![Page 97: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/97.jpg)
HTML5のセクション
![Page 98: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/98.jpg)
文書構造をより明示的に表せる。
![Page 99: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/99.jpg)
<section>章や節などの、ひとまとまり
![Page 100: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/100.jpg)
<section><h3> section 要素 </h3><p> 章や節などを表す。</p>...
</section>
<section><h3> nav 要素 </h3><p> 主要なナビゲーションを表す。</p>...
</section>
![Page 101: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/101.jpg)
<section><h3> article 要素 </h3><p> 自己完結するセクションを表す。</p>
<section><h4> サンプル </h4>...
</section>
</section>
![Page 102: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/102.jpg)
<nav>主要なナビゲーション
![Page 103: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/103.jpg)
<nav class=“global”><ul><li> <a ...> ホーム </a><li> <a ...> お知らせ </a><li> <a ...> HTML5 Niteって? </a><li> <a ...> これまでのNite </a><li> <a ...> お問い合わせ </a>
</ul></nav>
![Page 104: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/104.jpg)
UAが<nav>を利用することでアクセシビリティも高まる?
![Page 105: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/105.jpg)
<article>記事など、自己完結するセクション
![Page 106: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/106.jpg)
<article class=“entry” id=“vol40”>
<h2> CSS Nite in Ginza, Vol. 40 </h2><p> 4周年記念となるVol.40では… </p>
<section><h3> 事前登録について </h3>...
</section>...
</article>
![Page 107: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/107.jpg)
フィードの<item>や
<entry>などをイメージ。
![Page 108: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/108.jpg)
<aside>補足的な情報や、サイドバー
![Page 109: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/109.jpg)
<section><h2> nav 要素 </h2><p> 主要なナビゲーションを表します。 </p>
<aside><p> 海外では「navi」よりも
「nav」の方が多いみたいです。</p></aside>
</section>
![Page 110: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/110.jpg)
<header> ... </header><div class=wrap><div class=main>...
</div>
<aside class=sidebar>...
</aside></div><footer> ... </footer>
![Page 111: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/111.jpg)
セクションと見出しからアウトラインができる。
![Page 112: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/112.jpg)
<article><h1> HTML5 のセクション </h1><nav> ... </nav>...<section><h2> nav 要素 </h2>...<aside><h3>「navi」ではなく「nav」</h3>...
</aside>...
</section>...
![Page 113: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/113.jpg)
HTML5 のセクション
(見出しなしの目次)
section 要素
nav 要素
「navi」ではなく「nav」
article 要素
aside 要素
![Page 114: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/114.jpg)
見出しだけでもアウトラインはできる。
![Page 115: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/115.jpg)
<h1> HTML5 のセクション </h1>
<h2> section 要素 </h2>
<h2> nav 要素 </h2>
<h3>「navi」ではなく「nav」</h3>
<h2> article 要素 </h2>
...
![Page 116: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/116.jpg)
HTML5 のセクション
section 要素
nav 要素
「navi」ではなく「nav」
article 要素
aside 要素
![Page 117: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/117.jpg)
注意!
![Page 118: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/118.jpg)
使い方を間違えるとアウトラインが壊れてしまう。
![Page 119: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/119.jpg)
特に<section>は気をつけて。
![Page 120: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/120.jpg)
<article class=“entry”><header><h2> タイトル </h2>
</header>
<section class=“body”><p> 本文 </p><p> テキストテキスト </p>
</section>
<footer> ... </footer></article>
![Page 121: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/121.jpg)
<header id=logo><section><h1> <img src=logo ...> </h1>
</section></header>
![Page 122: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/122.jpg)
<section id=wrapper><section id=main><article><section><header> ... </header>...
</section></article>
</section>...
</section>
![Page 123: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/123.jpg)
セクションは意味的なもの。アウトラインを意識して。
![Page 124: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/124.jpg)
レイアウト目的なら<div>で。
![Page 125: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/125.jpg)
勧告はいつごろ?
![Page 126: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/126.jpg)
![Page 127: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/127.jpg)
「2010年9月」とある。でも、むりです。
![Page 128: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/128.jpg)
「勧告」とは?
![Page 129: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/129.jpg)
仕様がすべて実装されすぐに使える状態。
![Page 130: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/130.jpg)
実装が終わるのは?
![Page 131: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/131.jpg)
「2022年」と……
![Page 132: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/132.jpg)
「使えないじゃん!」
![Page 133: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/133.jpg)
そんなことはないです。
![Page 134: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/134.jpg)
たとえば、CSS 2.1はまだ「勧告候補」です。
![Page 135: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/135.jpg)
勧告されていませんが広く使われてます。
![Page 136: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/136.jpg)
実装されている機能から使っていけばいい。
![Page 137: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/137.jpg)
実装の本格的なスタートは「勧告候補」になった時。
![Page 138: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/138.jpg)
2012年あたりになる?
![Page 139: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/139.jpg)
実装状況を知るには?
![Page 140: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/140.jpg)
1. 開発者向けサイト
![Page 141: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/141.jpg)
Mozilla Developer Centerhttps://developer.mozilla.org/ja
![Page 142: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/142.jpg)
Safari Dev Centerhttp://developer.apple.com/safari/
![Page 143: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/143.jpg)
2. 仕様書のステータス表示
![Page 144: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/144.jpg)
![Page 145: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/145.jpg)
![Page 146: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/146.jpg)
どう使っていくか
![Page 147: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/147.jpg)
「実装されてる機能から使え」とは言ったものの……
![Page 148: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/148.jpg)
![Page 149: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/149.jpg)
![Page 150: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/150.jpg)
対応しないブラウザーはどう対処すればよいのか?
![Page 151: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/151.jpg)
1. JavaScriptで対処
![Page 152: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/152.jpg)
ExplorerCanvashttp://excanvas.sourceforge.net/
![Page 153: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/153.jpg)
IEに<canvas>を。
![Page 154: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/154.jpg)
Modernizrhttp://www.modernizr.com/
![Page 155: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/155.jpg)
対応状況をチェックする。
classもつけてくれたりする。
![Page 156: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/156.jpg)
2. 対応度合いにあわせて利用
![Page 157: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/157.jpg)
最低限なものは、全ての環境で。できる子には、高機能なものを。
![Page 158: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/158.jpg)
Progressive Enhancementって言われてるやつです。
![Page 159: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/159.jpg)
placeholder属性無くても不都合はない。
![Page 160: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/160.jpg)
難しいことは確か。
![Page 161: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/161.jpg)
HTML5やCSS3は勧告までとても時間がかかる。
![Page 162: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/162.jpg)
今までと異なる考え方で取り組んでいく必要がある。
![Page 163: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/163.jpg)
今は何をすれば?
![Page 164: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/164.jpg)
実装も出てきたけれど仕様はまだまだ策定中。
![Page 165: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/165.jpg)
「<article>と<section>を区別する必要はあるのか。」
![Page 166: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/166.jpg)
「<section>の誤用が多い。いっそのこと削除しては?」
![Page 167: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/167.jpg)
仕様がドラスティックに変更される可能性も……
![Page 168: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/168.jpg)
使う際には、リスクの認識を。
![Page 169: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/169.jpg)
おわりに
![Page 170: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/170.jpg)
「情報が少ない」といいました。
![Page 171: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/171.jpg)
みんなが使っていく仕様情報はみんなで共有したい。
![Page 172: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/172.jpg)
調べたことをまとめて情報を増やしていって欲しい。
![Page 173: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/173.jpg)
ありがとうございました。
![Page 174: HTML5, きちんと。](https://reader034.fdocument.pub/reader034/viewer/2022050720/54953e35b4795976588b460e/html5/thumbnails/174.jpg)
Contact:[email protected]