Downloaded 16 times
今日からはじめるHTML5 ver.2012
- 1. 今 ら めT M L5クアッ の１ 日か 始 るH マー 2012 var. プ編そ 2012 年 2 月 10 日 Knoc k! Knoc k! 勉強会 矢部靖人
- 2. 目次 １）イントロダクション ２）マークアップ言語と て TM L5 し のH 実 ３） 践 H T M L５ -HTML5 boi erpl e l at
- 3.
- 4. H T ML5 使ってますか？
- 8. H T ML5で構築されているサイト
- 16. そ そ TM L 5と も もH は SE M A N T IC S OFFLINE & STORAGE DEVICE ACCESS CONNECTIVITY M UL T I M E D I A 3D,GRAPHICS & EFFECTS PERFORMANCE & INTEGRATION CSS3
- 17. 広義の H TM L 5 次世代W eb 構築技術の総称。 W eb Storage・W ebSocket・Geolocati APIな on ど JavaScriptから 用す 利 る機能やCSS3も 含む 狭義の H T M L 5 マークアップ言語と て し のH T M L 5
- 18. 狭義の H TM L 5に限定すると SE M A N T IC S OFFLINE & STORAGE DEVICE ACCESS CONNECTIVITY M UL T I M E D I A 3D,GRAPHICS & EFFECTS PERFORMANCE & INTEGRATION CSS3 （おおまかに言っ です） て、
- 19. ２）マークアップ言語と て TM L 5 し のH
- 20. カテゴリーとコンテンツ モデル ・ H T M L4ま の で 「ブ ッ 要 /イ ラ ン 素 に る 念 ロ ク 素 ン イ 要 」 代わ 概
- 21. カテゴリー = HTML5要素の分類 メタデータ コンテンツ ・ m eta,script,style... フロー コンテンツ ・ a,div,p,form ... セクショニング コ ・ ンテンツ article,section,nav,aside ヘッ ング コンテンツ ディ ・ hgroup,h1,h2,h3... フレージング コンテンツ ・ br,em ,img,strong,span... エンベッ ッ ・ ディ ド コンテンツ audio,canvas,i mg,iframe... インタラ ティ ・ ク ブ コンテンツ a,button,label... セクショニング ルート ・ body,blockquote,td ...
- 22. コ テ ・デ ≒内包 き カ ゴ ー ン ンツ モ ル でる テリ 本仕様で定義されている要素は、それぞれに、その要素に期待 されるコンテンツの種類を表すコンテンツ モデルを持ちま ・ す。 要素には、 HTML その要素のコンテンツ モデルで記述される ・ 要件に一致するコンテンツを入れなければいけません。 例）hgroup・ ・コ テ ・ ン ンツモデル→ヘッ ング コンテディ ・ ンツ hgroup は、 「h1,h2,h3 ・ 」 ・ ・ のみを子要素に持てる
- 23. ・D O CT Y P E 宣言 / 文字コード ・新しい要素 ・変更された要素 ・廃止された要素
- 24. DOCTYPE 宣言 文字コード ・ H T ML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <m eta http-equiv="content-type" content="text/html;charset=utf-8"> H T ML5 < ! DOCTYPE h t m l > < m eta chars e t = " U T F - 8 " / >
- 25. 新しい要素 ・セクショニング要素 ・video / audio/ canvas / (SVG) ・フォーム要素群 ・その他（ti e要 ruby要 etc...） m 素、 素
- 26. セクショニング要素 ・セマンティ クスとアウトライン ・ベストプラ ティ ク スがま く 無理に使う だな 、 必要はない ・SEO的な効果はない（とグーグルさんは言っている） ・前述の企業でも使っていないものも多い
- 27. video / audio/ canvas / (SVG) ・動画や音声データをより手軽に利用可能 ・JavaScriptによる制御が可能（再生 / 停止 / 音 etc ...） 量 ・解決すべき問題もまだ多い ・著作権保護の仕組みが不備 ・ブラウザごとに異なる形式 MPEG ４ P,M ３ Safari,InternetExplorer W ebM ,O gg C hrom e,Fi eFox,InternetExplorer r
- 28. フォーム要素群 ・i put要素のtype 属性が大量増殖 n search,tel,url,email,password,detetime,date, month,week,time,localtime,number,range,color ・入力チェック機能 requi 属性（必須項目） red pattern 属性（正規表現による入力値チェック）
- 29. 新しい要素 → 時期尚早？ ・セクショニング要素 → まだ用例がとぼしく使いにくい り拓 け！ を切 / (SVG) ・video / audio道 canvas 任で / 自 己責 ・フォーム要素群 → ブラウザ互換性から使いにくい ※ただしスマホ専用ページなら話は別
- 30. 変更された要素 ・a → HTM L４ のブロック要素にも設定可能 ・storong / em →「重要性」と「強調」 ・dl → 名前と値のリスト ・hr → 段落の区切りという意味づけ ・sm al → 細目 l などなど
- 31. 廃止された要素 bacefont,big,center,font,s,strike, tt,u,fram e,fram eset,noframe,acronym , applet,isindex,dir → もう使ってないだろうけどね
- 32. まとめ: 今日から始めるHTML５対応 DOCTYPE 宣言→ HTML５で行こう 新しい要素 → 無理に使わない 変更された要素 → 用法に注意 廃止された要素 → も 使 て い ね う っな よ ※あくまでも私見です
- 33. 実 ３） 践 HT M L５ -HTML5 boi erpl e l at
- 34. HTML5 Boi lerplate は何か？ と
- 36. boilerplate【名詞】 1 ボイラー板 2 ジャーナリズム （鉛版にされた）共通記事. 3（契約書などの）画一的な言葉, 共通条項 俗語 ； インターネット （通信にしばしば使われる） 常用文.
- 37. Paul Irish さんが作っい す て ま ・GoogleでC hrom eを作っ ま て す ・ Queryプ ジ ク j ロ ェ トのコ メ ア ンバー
- 38. 要するに H T ML 5の ト プラ テ ス ベス ・ ク ィ
- 39. Boi lerplateがっ い こ やて る と
- 40. ・ html5 テプ ト スマホ対応） ン レー （含む ・ normalize.css ・ moderni r.js z
- 41. htm l5テ プト ン レー クリーンなソース CSSハックやIE専用のCSSファイルを読み込まない 表示の高速化 外部ファイルの読み込み順や、 ミ への配慮 タイ ング レスポンシブW ebデザイン respond.jsでIE8以下 もレスポンシブなデザイン で
- 42. norm alize.css 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、 有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。
- 43. modernizr.js H TML5shim html5で追加された多くの新要素を、 IE8以下 も使用できるように細工するJavaScript で H TML5 /CSS3の対応状況 チェ ク を ッ bodyタ のclass グ 属性に対応状況を出力 JavaScri ローデ ン を ptの ィ グ 高速化 条件分岐で外部フ イ ァ ルを読み込むJavaScriptラ ブラリ イ
- 44. マーク ッ ア プの新常識 なるかも れない） （に し
- 46. レガシー環境 （IE8以前への対応）
- 47. 先にCSSを読み込んでから JavaScriptを読み込む headタ 内 は読み込ま い! グで な ?
- 48. JavaScript 後 は最 に読み込む bodyの閉じタ の直 ！ グ 前
- 49. まとめ ・ T MLタの記 H グ 述法 ・JavaScriptの読み込み位置
- 50. H T ML 5 の新要素 属性を ・ 使いこなすだけでは マスターしたとは言えない
- 51. 参考図書 徹底解説 H TM L５ マークアップガイド 最終草案対応版 羽田野 太巳 著 秀和システム (2011/11) 徹底解説 HTML5 APIガイドブッ ビジュアル系API編 ク 羽田野 太巳 著 秀和システム (2011/1)
- 52. 本日はありがとうございました ご連絡ご質問など下記までお願いします ・ E -m a il : in fo @ h a m n aly .com Tel:055-994-9062