Embed Size (px)
DESCRIPTION
「1st Knock!」Knock! Knock! 静岡のWeb制作者のための勉強会発表資料
Citation preview
今日から始めるH T M L5 var.2012マークアップ編その１
矢部靖人
2012年2月10日Knock! Knock!勉強会
１） イントロダクション
２） マークアップ言語としてのHT ML5
３） 実践 HT ML５ -HTML5 boilerplate
目次
１） イントロダクション
HT ML5使ってますか？
HT ML5で構築されているサイト
そもそもH T M L 5とは
SEMANTICS DEVICE ACCESS CONNECTIVITYOFFLINE & STORAGE
MULTIMEDIA PERFORMANCE & INTEGRATION CSS33D, GRAPHICS & EFFECTS
広義のH T M L 5
狭義のH T M L 5
次世代W eb 構築技術の総称。Web Storage・WebSocket・Geolocation APIなどJavaScriptから利用する機能やCSS3も含む
マークアップ言語としてのH T M L 5
狭義のH T M L 5に限定すると
SEMANTICS
（おおまかに言って、です）
DEVICE ACCESS CONNECTIVITYOFFLINE & STORAGE
MULTIMEDIA PERFORMANCE & INTEGRATION CSS33D, GRAPHICS & EFFECTS
２） マークアップ言語としてのHT ML5
カテゴリーとコンテンツ・モデルHTML4までの
「ブロック要素 / インライン要素」に代わる概念
カテゴリー = 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 ...
コンテンツ・モデル ≒内包できるカテゴリー
例）hgroup・・・コンテンツモデル→ヘッディング・コンテンツ hgroup は、「h1,h2,h3・・・」のみを子要素に持てる
本仕様で定義されている要素は、それぞれに、その要素に期待されるコンテンツの種類を表すコンテンツ・モデルを持ちます。HTML 要素には、その要素のコンテンツ・モデルで記述される要件に一致するコンテンツを入れなければいけません。
http://www.html5.jp/tag/models/index.html
・DOCTYPE宣言/文字コード・新しい要素・変更された要素・廃止された要素
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
新しい要素
・セクショニング要素・video / audio / canvas / (SVG)・フォーム要素群・その他（time要素、ruby要素 etc...）
セクショニング要素
・セマンティクスとアウトライン・ベストプラクティスがまだなく、無理に使う必要はない ・SEO的な効果はない（とグーグルさんは言っている） ・前述の企業でも使っていないものも多い
video / audio / canvas / (SVG)
・動画や音声データをより手軽に利用可能・JavaScriptによる制御が可能（再生/停止/音量etc ...）・解決すべき問題もまだ多い ・著作権保護の仕組みが不備 ・ブラウザごとに異なる形式 MPEG４,MP３ Safari,InternetExplorer
W ebM ,Ogg Chrome,FireFox,InternetExplorer
フォーム要素群
・input要素のtype属性が大量増殖 search,tel,url,email,password,detetime,date, month,week,time,localtime,number,range,color・入力チェック機能 required 属性（必須項目） pattern 属性（正規表現による入力値チェック）
新しい要素 → 時期尚早？・セクショニング要素 → まだ用例がとぼしく使いにくい・video / audio / canvas / (SVG)・フォーム要素群 → ブラウザ互換性から使いにくい
※ただしスマホ専用ページなら話は別
自己責任で道を切り拓け！
変更された要素・a → HTML４のブロック要素にも設定可能・storong / em → 「重要性」と「強調」・dl → 名前と値のリスト・hr → 段落の区切りという意味づけ・small → 細目
などなど
bacefont,big,center,font,s,strike,tt,u,frame,frameset,noframe,acronym ,applet,isindex,dir
廃止された要素
→ もう使ってないだろうけどね
まとめ:今日から始めるHTML５対応
DOCTYPE宣言 → HTML５で行こう新しい要素 → 無理に使わない変更された要素 → 用法に注意廃止された要素 → もう使ってないよね
※あくまでも私見です
３） 実践 HT ML５ -HTML5 boilerplate
HTML5 Boilerplateとは何か？
boilerplate 【名詞】
1 ボイラー板
2 ジャーナリズム（鉛版にされた）共通記事.
3 （契約書などの）画一的な言葉,
共通条項；｟俗語｠ インターネット（通信にしばしば使われる）常用文.
・GoogleでChromeを作ってます
・jQueryプロジェクトのコアメンバー
Paul Irishさんが作っています
HT M L5のベスト・プラクティス要するに
Boilerplateがやっていること
・ html5テンプレート（含むスマホ対応）
・ normalize.css・ modernizr.js
html5テンプレート
クリーンなソースCSSハックやIE専用のCSSファイルを読み込まない
表示の高速化外部ファイルの読み込み順や、タイミングへの配慮
レスポンシブW ebデザインrespond.jsでIE8以下でもレスポンシブなデザイン
normalize.css
有用なデフォルトはそのまま多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。
スタイルの正常化さまざまな種類のエレメントのスタイルを正常化します。
バグの修正各ブラウザごとの異なるスタイルやバグを修正します。
modernizr.js
HTML5shimhtml5で追加された多くの新要素を、IE8以下でも使用できるように細工するJavaScript
HTML5 /CSS3の対応状況をチェックbodyタグのclass 属性に対応状況を出力
JavaScriptのローディングを高速化条件分岐で外部ファイルを読み込むJavaScriptライブラリ
マークアップの新常識（になるかもしれない）
レガシー環境（IE8以前への対応）
先にCSSを読み込んでから
JavaScriptを読み込むheadタグ内では読み込まない!?
JavaScriptは最後に読み込む
bodyの閉じタグの直前！
・HTMLタグの記述法
・JavaScriptの読み込み位置
まとめ
H T M L 5の新要素・属性を使いこなすだけでは
マスターしたとは言えない
参考図書徹底解説HTML５マークアップガイド最終草案対応版羽田野 太巳 著秀和システム (2011/11)
羽田野 太巳 著秀和システム (2011/1)
徹底解説 HTML5 APIガイドブック ビジュアル系API編
本日はありがとうございました
ご連絡・ご質問など下記までお願いします
E -m a il : in fo @ ha m n aly .com
T e l : 0 5 5 - 9 9 4 - 9 0 6 2
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.document.onl/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
