今 ら め T M L5クアッ の1
 日か 始 るH   マー
                 2012
              var.
                 プ編そ
                      2012 年 2 月 10 日
                Knoc k! Knoc k! 勉強会

               矢部靖人
目次
1)イントロダクション
2)マークアップ言語と て T M L5
           し のH
  実
3) 践 H T M L5 -HTML5 boi erpl e
                       l at
1)イントロダクション
H T M L5 使ってますか?
H T M L5で構築されているサイト
そ そ T M 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
広義の H T M L 5
次世代W eb 構築技術の総称。
W eb Storage・W ebSocket・Geolocati APIな
                                 on   ど
JavaScriptから 用す 利 る機能やCSS3も         含む

          狭義の H T M L 5
     マークアップ言語と て
              し のH T M L 5
狭義の H T M 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
                                                                 (おおまかに言っ です)
                                                                         て、
2)マークアップ言語と て T M L 5
           し のH
カテゴリーとコンテンツ モデル
           ・
 H T M L4ま の
          で
「ブ ッ 要 /イ ラ ン 素 に る 念
    ロ ク 素 ン イ 要 」 代わ 概
カテゴリー = HTML 5要素の分類
メタデータ コンテンツ
      ・          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 ...
コ テ ・ デ ≒内包 き カ ゴ ー
 ン ンツ モ ル  でる テリ
本仕様で定義されている要素は、それぞれに、その要素に期待
されるコンテンツの種類を表すコンテンツ モデルを持ちま
                    ・
す。 要素には、
 HTML   その要素のコンテンツ モデルで記述される
                  ・
要件に一致するコンテンツを入れなければいけません。


例)hgroup・ ・コ テ
         ・ ン ンツモデル→ヘッ ング コンテディ ・ ンツ
 hgroup は、
         「h1,h2,h3 ・ 」
                  ・ ・ のみを子要素に持てる
・D O C T Y P E 宣言 / 文字コード
・新しい要素
・変更された要素
・廃止された要素
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 " / >
新しい要素

・セクショニング要素
・video / audio / canvas / (SVG)
・フォーム要素群
・その他(ti e要 ruby要 etc...)
          m 素、       素
セクショニング要素
・セマンティ クスとアウトライン
・ベストプラ ティ
       ク スがま く 無理に使う
            だな 、    必要はない
 ・SEO的な効果はない(とグーグルさんは言っている)
 ・前述の企業でも使っていないものも多い
video / audio / canvas / (SVG)
・動画や音声データをより手軽に利用可能
・JavaScriptによる制御が可能(再生 / 停止 / 音 etc ...)
                               量
・解決すべき問題もまだ多い
 ・著作権保護の仕組みが不備
 ・ブラウザごとに異なる形式
   MPEG 4 P,M 3 Safari,InternetExplorer
   W ebM ,O gg  C hrom e,Fi eFox,InternetExplorer
                          r
フォーム要素群
・i put要素のtype 属性が大量増殖
 n
  search,tel,url,email,password,detetime,date,
  month,week,time,localtime,number,range,color
・入力チェック機能
  requi 属性(必須項目)
       red
  pattern 属性(正規表現による入力値チェック)
新しい要素 → 時期尚早?
・セクショニング要素
   → まだ用例がとぼしく使いにくい
                    り拓 け!
               を切 / (SVG)
・video / audio道 canvas
          任で /
   自 己責
・フォーム要素群
   → ブラウザ互換性から使いにくい
       ※ただしスマホ専用ページなら話は別
変更された要素
・a → HT M L4 のブロック要素にも設定可能
・storong / em →「重要性」と「強調」
・dl → 名前と値のリスト
・hr → 段落の区切りという意味づけ
・sm al → 細目
      l
                       などなど
廃止された要素
bacefont,big,center,font,s,strike,
tt,u,fram e,fram eset,nofram e,acronym ,
applet,isindex,dir
 → もう使ってないだろうけどね
まとめ: 今日から始めるHTML5対応

DOCTYPE 宣言 → HTML5で行こう
新しい要素      → 無理に使わない
変更された要素 → 用法に注意
廃止された要素 → も 使 て い ね
              う っな よ
                 ※あくまでも私見です
実
3) 践 H T M L5 -HTML5 boi erpl e
                       l at
HTML5 Boi
        lerplate は何か?
                と
boilerplate【名詞】
1 ボイラー板
2 ジャーナリズム
        (鉛版にされた)共通記事.
3(契約書などの)画一的な言葉,
 共通条項 俗語
     ;
 インターネット
       (通信にしばしば使われる)
                   常用文.
Paul Irish さんが作っ い す
                  て ま

・GoogleでC hrom eを作っ ま
                   て す
・ Queryプ ジ ク
 j      ロ ェ トのコ メ ア ンバー
要するに
H T M L 5の ト プラ テ ス
          ベス ・ ク ィ
Boi
  lerplateが っ い こ
           やて る と
・ html5 テ プ ト スマホ対応)
          ン レー (含む
・ normalize.css
・ moderni r.js
         z
htm l5テ プ ト
       ン レー
クリーンなソース
 CSSハックやIE専用のCSSファイルを読み込まない

表示の高速化
 外部ファイルの読み込み順や、 ミ への配慮
              タイ ング

レスポンシブW ebデザイン
 respond.jsでIE8以下 もレスポンシブなデザイン
                 で
norm alize.css
有用なデフォルトはそのまま
 多くのリセット用スタイルシートは異なり、
 有用なデフォルトのスタイルは維持します。

スタイルの正常化
 さまざまな種類のエレメントのスタイルを正常化します。

バグの修正
 各ブラウザごとの異なるスタイルやバグを修正します。
modernizr.js
H TML5shim
  html5で追加された多くの新要素を、
  IE8以下 も使用できるように細工するJavaScript
        で

H TML5 /CSS3の対応状況 チェ ク
                 を ッ
  bodyタ のclass 
       グ      属性に対応状況を出力

JavaScri ローデ ン を
        ptの ィ グ 高速化
  条件分岐で外部フ イ
          ァ ルを読み込むJavaScriptラ ブラリ
                             イ
マーク ッ
   ア プの新常識 なるかも れない)
          (に   し
レガシー環境
     (IE8以前への対応)
先にCSSを読み込んでから



JavaScriptを読み込む
   headタ 内 は読み込ま い!
         グで     な ?
JavaScript 後
                    は最 に読み込む

bodyの閉じタ の直 !
        グ 前
まとめ
・ T MLタ の記
 H     グ 述法
・JavaScriptの読み込み位置
H T M L 5 の新要素 属性を
              ・
   使いこなすだけでは
マスターしたとは言えない
参考図書
徹底解説 H T M L5
マークアップガイド
最終草案対応版
羽田野 太巳 著
秀和システム (2011/11)




  徹底解説 HTML5
  APIガイドブッ ビジュアル系API編
          ク
  羽田野 太巳 著
  秀和システム (2011/1)
本日はありがとうございました
  ご連絡 ご質問など下記までお願いします
      ・
   E -m a il : in fo @ h a m n aly .com
       Tel:055-994-9062

今日からはじめるHTML5 ver.2012

  • 1.
    今 ら めT M L5クアッ の1 日か 始 るH マー 2012 var. プ編そ 2012 年 2 月 10 日 Knoc k! Knoc k! 勉強会 矢部靖人
  • 2.
    目次 1)イントロダクション 2)マークアップ言語と て TM L5 し のH 実 3) 践 H T M L5 -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.
  • 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 4 P,M 3 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 L4 のブロック要素にも設定可能 ・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.
    まとめ: 今日から始めるHTML5対応 DOCTYPE 宣言→ HTML5で行こう 新しい要素 → 無理に使わない 変更された要素 → 用法に注意 廃止された要素 → も 使 て い ね う っな よ ※あくまでも私見です
  • 33.
    実 3) 践 HT M L5 -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 L5 マークアップガイド 最終草案対応版 羽田野 太巳 著 秀和システム (2011/11) 徹底解説 HTML5 APIガイドブッ ビジュアル系API編 ク 羽田野 太巳 著 秀和システム (2011/1)
  • 52.
    本日はありがとうございました ご連絡ご質問など下記までお願いします ・ E -m a il : in fo @ h a m n aly .com Tel:055-994-9062