今日からはじめるhtml5 ver.2012
DESCRIPTION
「1st Knock!」Knock! Knock! 静岡のWeb制作者のための勉強会発表資料TRANSCRIPT
![Page 1: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/1.jpg)
今日から始めるH T M L5 var.2012マークアップ編その1
矢部靖人
2012年2月10日Knock! Knock!勉強会
![Page 2: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/2.jpg)
1) イントロダクション
2) マークアップ言語としてのHT ML5
3) 実践 HT ML5 -HTML5 boilerplate
目次
![Page 3: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/3.jpg)
1) イントロダクション
![Page 4: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/4.jpg)
HT ML5使ってますか?
![Page 5: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/5.jpg)
![Page 6: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/6.jpg)
![Page 7: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/7.jpg)
![Page 8: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/8.jpg)
HT ML5で構築されているサイト
![Page 9: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/9.jpg)
![Page 10: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/10.jpg)
![Page 11: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/11.jpg)
![Page 12: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/12.jpg)
![Page 13: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/13.jpg)
![Page 14: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/14.jpg)
![Page 15: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/15.jpg)
![Page 16: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/16.jpg)
そもそもH T M L 5とは
SEMANTICS DEVICE ACCESS CONNECTIVITYOFFLINE & STORAGE
MULTIMEDIA PERFORMANCE & INTEGRATION CSS33D, GRAPHICS & EFFECTS
![Page 17: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/17.jpg)
広義のH T M L 5
狭義のH T M L 5
次世代W eb 構築技術の総称。Web Storage・WebSocket・Geolocation APIなどJavaScriptから利用する機能やCSS3も含む
マークアップ言語としてのH T M L 5
![Page 18: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/18.jpg)
狭義のH T M L 5に限定すると
SEMANTICS
(おおまかに言って、です)
DEVICE ACCESS CONNECTIVITYOFFLINE & STORAGE
MULTIMEDIA PERFORMANCE & INTEGRATION CSS33D, GRAPHICS & EFFECTS
![Page 19: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/19.jpg)
2) マークアップ言語としてのHT ML5
![Page 20: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/20.jpg)
カテゴリーとコンテンツ・モデルHTML4までの
「ブロック要素 / インライン要素」に代わる概念
![Page 21: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/21.jpg)
カテゴリー = HTML5要素の分類
メタデータ・コンテンツフロー・コンテンツセクショニング・コンテンツヘッディング・コンテンツフレージング・コンテンツエンベッディッド・コンテンツインタラクティブ・コンテンツセクショニング・ルート
meta,script,style...a,div,p,form ...article,section,nav,asidehgroup,h1,h2,h3...br,em ,img,strong,span...audio,canvas,img,iframe...a,button,label...body,blockquote,td ...
![Page 22: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/22.jpg)
コンテンツ・モデル ≒内包できるカテゴリー
例)hgroup・・・コンテンツモデル→ヘッディング・コンテンツ hgroup は、「h1,h2,h3・・・」のみを子要素に持てる
本仕様で定義されている要素は、それぞれに、その要素に期待されるコンテンツの種類を表すコンテンツ・モデルを持ちます。HTML 要素には、その要素のコンテンツ・モデルで記述される要件に一致するコンテンツを入れなければいけません。
http://www.html5.jp/tag/models/index.html
![Page 23: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/23.jpg)
・DOCTYPE宣言/文字コード・新しい要素・変更された要素・廃止された要素
![Page 24: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/24.jpg)
DOCTYPE宣言・文字コード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><meta http-equiv="content-type" content="text/html;charset=utf-8">
<!DOCTYPE html><meta charset="UTF-8" />
HTML4
HTML5
![Page 25: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/25.jpg)
新しい要素
・セクショニング要素・video / audio / canvas / (SVG)・フォーム要素群・その他(time要素、ruby要素 etc...)
![Page 26: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/26.jpg)
セクショニング要素
・セマンティクスとアウトライン・ベストプラクティスがまだなく、無理に使う必要はない ・SEO的な効果はない(とグーグルさんは言っている) ・前述の企業でも使っていないものも多い
![Page 27: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/27.jpg)
video / audio / canvas / (SVG)
・動画や音声データをより手軽に利用可能・JavaScriptによる制御が可能(再生/停止/音量etc ...)・解決すべき問題もまだ多い ・著作権保護の仕組みが不備 ・ブラウザごとに異なる形式 MPEG4,MP3 Safari,InternetExplorer
W ebM ,Ogg Chrome,FireFox,InternetExplorer
![Page 28: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/28.jpg)
フォーム要素群
・input要素のtype属性が大量増殖 search,tel,url,email,password,detetime,date, month,week,time,localtime,number,range,color・入力チェック機能 required 属性(必須項目) pattern 属性(正規表現による入力値チェック)
![Page 29: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/29.jpg)
新しい要素 → 時期尚早?・セクショニング要素 → まだ用例がとぼしく使いにくい・video / audio / canvas / (SVG)・フォーム要素群 → ブラウザ互換性から使いにくい
※ただしスマホ専用ページなら話は別
自己責任で道を切り拓け!
![Page 30: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/30.jpg)
変更された要素・a → HTML4のブロック要素にも設定可能・storong / em → 「重要性」と「強調」・dl → 名前と値のリスト・hr → 段落の区切りという意味づけ・small → 細目
などなど
![Page 31: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/31.jpg)
bacefont,big,center,font,s,strike,tt,u,frame,frameset,noframe,acronym ,applet,isindex,dir
廃止された要素
→ もう使ってないだろうけどね
![Page 32: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/32.jpg)
まとめ:今日から始めるHTML5対応
DOCTYPE宣言 → HTML5で行こう新しい要素 → 無理に使わない変更された要素 → 用法に注意廃止された要素 → もう使ってないよね
※あくまでも私見です
![Page 33: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/33.jpg)
3) 実践 HT ML5 -HTML5 boilerplate
![Page 34: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/34.jpg)
HTML5 Boilerplateとは何か?
![Page 35: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/35.jpg)
![Page 36: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/36.jpg)
boilerplate 【名詞】
1 ボイラー板
2 ジャーナリズム(鉛版にされた)共通記事.
3 (契約書などの)画一的な言葉,
共通条項;⦅俗語⦆ インターネット(通信にしばしば使われる)常用文.
![Page 37: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/37.jpg)
・GoogleでChromeを作ってます
・jQueryプロジェクトのコアメンバー
Paul Irishさんが作っています
![Page 38: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/38.jpg)
HT M L5のベスト・プラクティス要するに
![Page 39: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/39.jpg)
Boilerplateがやっていること
![Page 40: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/40.jpg)
・ html5テンプレート(含むスマホ対応)
・ normalize.css・ modernizr.js
![Page 41: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/41.jpg)
html5テンプレート
クリーンなソースCSSハックやIE専用のCSSファイルを読み込まない
表示の高速化外部ファイルの読み込み順や、タイミングへの配慮
レスポンシブW ebデザインrespond.jsでIE8以下でもレスポンシブなデザイン
![Page 42: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/42.jpg)
normalize.css
有用なデフォルトはそのまま多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。
スタイルの正常化さまざまな種類のエレメントのスタイルを正常化します。
バグの修正各ブラウザごとの異なるスタイルやバグを修正します。
![Page 43: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/43.jpg)
modernizr.js
HTML5shimhtml5で追加された多くの新要素を、IE8以下でも使用できるように細工するJavaScript
HTML5 /CSS3の対応状況をチェックbodyタグのclass 属性に対応状況を出力
JavaScriptのローディングを高速化条件分岐で外部ファイルを読み込むJavaScriptライブラリ
![Page 44: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/44.jpg)
マークアップの新常識(になるかもしれない)
![Page 45: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/45.jpg)
![Page 46: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/46.jpg)
レガシー環境(IE8以前への対応)
![Page 47: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/47.jpg)
先にCSSを読み込んでから
JavaScriptを読み込むheadタグ内では読み込まない!?
![Page 48: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/48.jpg)
JavaScriptは最後に読み込む
bodyの閉じタグの直前!
![Page 49: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/49.jpg)
・HTMLタグの記述法
・JavaScriptの読み込み位置
まとめ
![Page 50: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/50.jpg)
H T M L 5の新要素・属性を使いこなすだけでは
マスターしたとは言えない
![Page 51: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/51.jpg)
参考図書徹底解説HTML5マークアップガイド最終草案対応版羽田野 太巳 著秀和システム (2011/11)
羽田野 太巳 著秀和システム (2011/1)
徹底解説 HTML5 APIガイドブック ビジュアル系API編
![Page 52: 今日からはじめるHTML5 ver.2012](https://reader031.vdocuments.site/reader031/viewer/2022020718/558ca380d8b42a37548b45a7/html5/thumbnails/52.jpg)
本日はありがとうございました
ご連絡・ご質問など下記までお願いします
E -m a il : in fo @ ha m n aly .com
T e l : 0 5 5 - 9 9 4 - 9 0 6 2