本 書 について HTML5 NTT 2014 2 18 免 責 事 項 2013 12 URL HTML5 Level.1 http://www.html5exam.jp/outline/objectives.html#lv1 LPI-Japan HTML5 HTML5 ATM LPI-Japan LPI-Japan
Contents 1 章 Webの 基 礎 知 識... 1 1.1 HTTP/HTTPS 1 HTTP(HyperText Transfer Protocol)... 1 HTTPS... 2 HTTPのメッセージ 構 造... 3 HTTPのリクエストメッセージ... 3 HTTPのレスポンスメッセージ... 5 HTTPでの 認 証... 6 HTTP cookie(クッキー)... 7 1.2 HTML について 8 HTMLのバージョンについて... 8 HTMLの 構 成... 9 DOCTYPE 宣 言 ( 文 書 型 宣 言 )... 9 ヘッダに 関 する 要 素... 10 文 字 参 照... 12 1.3 URI/URLの 概 念 12 URI(Uniform Resource Identifier)... 13 URL(Uniform Resource Locator)... 13 1.4 ネットワーク サーバ 技 術 の 概 要 13 OSI 参 照 モデル... 13 TCP/IP... 14 ドメイン... 16 Webサーバ 関 連 技 術... 18 データベース 関 連 技 術... 22 ネットワーク 上 の 脅 威 対 策... 23
Contents 1.5 Web 関 連 技 術 の 概 要 24 JavaScript... 24 Ajax... 25 DOM... 26 マイクロデータ... 27 RDFa... 28 OGP (Open Graph Protocol)... 28 データURL... 29 カスタムデータ 属 性... 30 XHTML... 30 セッション... 31 インタレース... 31 画 像 ファイルフォーマット... 32 MVCアーキテクチャ... 32 CMS... 33 Base64... 33 Webサイトへの 不 正 な 攻 撃 手 法... 34 SEO... 38 検 索 ロボット... 38 Web 広 告... 38 ROI... 39 コンバージョンレート... 39 2 章 HTML5の 要 素... 40 2.1 HTML4.01の 要 素 40 ヘッダの 代 表 的 要 素... 40 ボディの 代 表 的 要 素... 41 2.2 HTML5 文 書 の 構 文 43 DOCTYPE 宣 言... 43
文 字 エンコーディングの 指 定... 43 言 語 の 指 定... 44 2.3 文 章 構 造 化 のためにHTML5で 追 加 された 要 素 44 2.4 その 他 のHTML5 追 加 要 素 46 video 要 素... 48 audio 要 素... 49 ruby 関 連 要 素... 50 canvas 要 素... 51 2.5 HTML5で 変 更 された 要 素 54 2.6 HTML5で 削 除 された 要 素 55 CSSで 扱 うべき 情 報 のため 削 除... 55 ユーザビリティやアクセシビリティに 影 響 するため 削 除... 56 あまり 使 用 されておらず 混 乱 の 元 になるため 削 除... 56 2.7 要 素 のカテゴリ 56 メタデータコンテンツ... 57 フローコンテンツ... 57 セクショニングコンテンツ... 57 ヘディングコンテンツ... 57 フレージングコンテンツ... 58 エンベディッドコンテンツ... 58 インタラクティブコンテンツ... 58 パルパブルコンテンツ... 58 スクリプトサポート 要 素... 58 2.8 HTML5でのグローバル 属 性 59 2.9 HTML5で 追 加 された 属 性 60 type 属 性... 62
Contents バリデーション 関 連 属 性... 64 2.10 HTML5で 変 更 された 属 性 65 2.11 HTML5で 削 除 された 属 性 67 2.12 ブラウザの 対 応 状 況 調 査 69 3 章 CSS3... 70 3.1 CSS および CSS3 とは 70 CSSとは... 70 CSS3とは... 70 3.2 CSSの 基 本 71 CSSの 使 い 方... 71 CSSの 書 き 方... 73 3.3 CSS セレクタ 73 シンプルセレクタ... 74 結 合 子... 75 擬 似 クラス... 76 擬 似 要 素... 80 3.4 カスケード 81 継 承... 81 カスケード 処 理... 83 3.5 CSS プロパティ 86 ベンダプレフィックスについて... 86 ボックスモデルについて... 87 ボックスの 大 きさ... 88
paddingとmarginの 指 定... 89 サイズ 値 の 単 位 について... 90 ボックスのdisplayプロパティ... 90 ボックスのvisibilityプロパティ... 91 ボックスのレイアウトについて... 92 floatの 解 除... 94 ボックスのoverflowプロパティ... 95 z-indexプロパティ... 96 CSS3での 段 組 レイアウト... 96 CSS3での 可 変 ボックスレイアウト... 98 ボックスの 枠 線 に 関 するプロパティ... 101 ボックスの 背 景 に 関 するプロパティ... 103 色 に 関 するプロパティ... 105 ボックスに 影 をつけるプロパティ... 107 ボックスを 切 り 抜 くプロパティ... 108 フォント 関 連 プロパティ... 109 Webフォント... 110 テキスト 関 連 プロパティ... 111 リスト 関 連 プロパティ... 113 テーブル( 表 ) 関 連 プロパティ... 114 CSSによる 変 形 移 動 関 連 プロパティ... 116 CSSによるアニメーション 関 連 プロパティ... 117 4 章 マルチデバイス 対 応... 121 4.1 レスポンシブ Web デザイン 121 レスポンシブWebデザインとは... 121 レスポンシブWebデザインのメリットとデメリット... 122 レスポンシブWebデザインに 必 要 な 技 術... 122 Media Queries(メディアクエリ)... 123 Fluid Grid( 可 変 グリッド)... 125 Fluid Image( 可 変 イメージ)... 126
Contents Viewport... 126 リセットCSS... 128 4.2 スマートフォン 最 適 化 128 CSSスプライト... 128 高 解 像 度 画 面 向 け 対 応... 129 ホーム 画 面 ショートカットアイコン... 131 スタンドアローンモード... 131 a 要 素 での 電 話 発 信... 132 async 属 性 /defer 属 性... 132 5 章 オフラインWebアプリケーション... 133 5.1 オフラインWebアプリケーションの 概 要 133 5.2 キャッシュマニフェストの 利 用 134 キャッシュマニフェストの 記 述 方 法... 134 HTMLファイルからの 指 定... 136 キャッシュファイルの 更 新... 137 5.3 MIMEタイプの 設 定 137 5.4 アプリケーションキャッシュの 確 認 削 除 137 Google Chrome... 138 Firefox... 138 Internet Explorer... 138 問 題 集 139 問 題 集 解 答 158
まえがき HTML5 Web Web Web PC Web / Web / HTML5 HTML5 技 術 者 認 定 資 格 とは LPI-Japan Web HTML5 Web Web HTML5 1 2 2 IT 1 Web HTML5 2 Web Web 本 書 籍 について LPI-Japan HTML5 1
: http://www.html5exam.jp/outline/objectives.html#lv1 HTML5 1 出 題 範 囲 Web CSS3 Web Web 本 書 での 対 応 箇 所 1. Webの 基 礎 知 識 3. CSS3 2. HTML5の 要 素 4. マルチデバイス 対 応 5. オフラインWebアプリケーション LPI-Japan HTML5 認 定 教 材 のロゴの 意 味 するもの 2013 12 HTML5 LPI-Japan LPI-Japan HTML5 HTML5 ATM LPI-Japan LPI-Japan LPI-Japan HTML5 認 定 教 材 制 度 とは HTML5 LPI-Japan HTML5 詳 細 情 報 HTML5 URL http://www.html5exam.jp/
HTTP/HTTPS 1.1 1 章 Webの 基 礎 知 識 HTML5 / Web / 3 HTML5 1 HTML5 Web 30 Web 1.1 HTTP/HTTPS Web Web HTTP HTTPS HTTP(HyperText Transfer Protocol) HTTP HTML Web Web HTML 図 1-1: HTTP 通 信 1
1 章 Webの 基 礎 知 識 HTTP HTTP/1.1 RFC2616 HTTP/2.0 2014 11 W3C : http://www.ietf.org/rfc/rfc2616.txt HTTP 1-1 HTTPS HTTP HTTPS TSL SSL HTTPS HTTPS RFC TSL TSL1.2 RFC5246 : http://www.ietf.org/rfc/rfc5246.txt HTTPS 1-2 SSL/TSL HTTP 図 1-2:HTTPS 通 信 2
HTTP/HTTPS 1.1 HTTPのメッセージ 構 造 HTTP 1-3 0 CRLF CRLF 2 1 図 1-3: HTTPのメッセージ 構 造 HTTPのリクエストメッセージ HTTP/1.1 1-1 8 GET POST GET 1-4 HTTP 3
1 章 Webの 基 礎 知 識 表 1-1:HTTPのリクエストメッセージで 指 定 可 能 なメソッド メソッド 名 GET HEAD POST PUT OPTIONS DELETE TRACE CONNECT 説 明 URI GET URI URI URI URI SSL 図 1-4: リクエストメッセージの 例 GET URL? GET /index.html?name=john&age=20 HTTP/1.1?name=John&age=20 POST 4
HTTP/HTTPS 1.1 name=john&age=20 HTTPのレスポンスメッセージ HTTP 1-5 HTTP 図 1-5:レスポンスメッセージの 例 3 1-2 表 1-2:ステータスコード ステータスコード 1xx 2xx 3xx 4xx 5xx 概 要 Informational Success 200 OK Redirection 301 Moved Permanently 307 Temporary Redirect Client Error 400 Bad Request 404 Not Found Server Error 500 Internal Server Error 503 Service Unavailable 5
1 章 Webの 基 礎 知 識 HTTP HTTP 1-3 表 1-3: 代 表 的 なHTTPヘッダ ヘッダ 名 Accept Authorization Cache-Control Content-Language Content-Length Content-Type Expires If-Modified-Since Last-Modified Referer User-Agent 概 要 HTTP GET URI HTTPでの 認 証 HTTP 1-4 表 1-4:HTTPでの 主 な 認 証 方 法 認 証 名 Basic Digest 概 要 ":" Base64 MD5 Basic 1-6 Digest 1-7 6
HTTP/HTTPS 1.1 図 1-6:Basic 認 証 図 1-7:Digest 認 証 HTTP HTTPS HTTP cookie(クッキー) HTTP Web Web Web HTTP 7
1 章 Webの 基 礎 知 識 Web EC Web Web HTTP Set-Cookie Web Web Web / Cookie Web JavaScript Web 1.2 HTMLについて HTML HTMLのバージョンについて HTML HTML 1-5 表 1-5:HTMLの 歴 史 年 バージョン 説 明 1993 HTML1.0 Internet Draft 1 1995 HTML2.0 RFC1866 IETF 1997 1 HTML3.2 W3C HTML 1997 12 HTML4.0 CSS Strict Transitional Frameset 3 8
HTMLについて 1.2 1999 12 HTML4.0.1 HTML4.0 2014 Q4 2016 Q4 HTML5.0 HTML5.1 W3C HTML WG 2012 12 CR HTML5.0 5.1, 5.2 2 2016 Q4 1: http://www.w3.org/markup/draft-ietf-iiir-html-01.txt 2: http://dev.w3.org/html5/decision-policy/html5-2014-plan.html HTMLの 構 成 HTML 3 表 1-6:HTMLの 構 成 要 素 構 成 要 素 説 明 HTML DOCTYPE head body DOCTYPE 宣 言 ( 文 書 型 宣 言 ) HTML4.01 DTD Transitional HTML4.01 DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/tr/html4/loose.dtd"> Strict HTML4.01 Frameset Transitional HTML5 DOCTYPE HTML4.0.1 9
1 章 Webの 基 礎 知 識 DTD <!DOCTYPE html> ヘッダに 関 する 要 素 title meta link title 要 素 title head 1 title meta 要 素 meta meta meta UTF-8 HTML4.01 HTML5 <meta http-equiv="content-type" content="text/html; charset=utf-8"> HTML5 <meta charset="utf-8"> whoami <meta name="author" content="whoami"> link 要 素 link link link 1-7 10
HTMLについて 1.2 表 1-7:link 要 素 の 代 表 的 属 性 属 性 名 rel href type charset hreflang media 概 要 URI MIME rel 1-8 表 1-8:rel 属 性 に 指 定 可 能 な 値 値 alternate stylesheet start next prev contents index chapter section subsection glossary copyright appendix help bookmark 説 明 rel 11
2 章 HTML5の 要 素 2 章 HTML5の 要 素 HTML5 HTML4.01 HTML5 1 37 HTML4.01 HTML5 "Web " " " 2.1 HTML4.01の 要 素 HTML 3 HTML5 HTML4.01 ヘッダの 代 表 的 要 素 HTML4.01 2-1 表 2-1:HTML4.01での 代 表 的 ヘッダ 要 素 要 素 名 title meta link 説 明 HTML HTML Web HTML meta 2-2 40
HTML4.01の 要 素 2.1 表 2-2:meta 要 素 で 表 記 できるメタ 情 報 メタ 情 報 記 述 例 <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="author" content=" 制 作 者 名 "> <meta name="description" content="サイトの 解 説 "> <meta name="keywords" content=" 検 索 キーワード"> ボディの 代 表 的 要 素 HTML4.01 2-3 表 2-3:HTML4.01での 代 表 的 なボディ 要 素 要 素 名 h1 h2 h3 h4 h5 h6 p br hr table form 説 明 h1 tr 1 td th input Web 2-1 input type 2-1 type 2-4 41
2 章 HTML5の 要 素 図 2-1: HTML4.01でのフォーム 例 表 2-4:HTML4.01でのtype 属 性 の 例 type 属 性 の 値 text textarea radio checkbox select submit button 説 明 1 Web 2-1 HTML <form method="post" action="url"> <p> テキスト: <input type="text" name="name"><br> ラジオボタン: <input type="radio" name="radio" value="a" checked="checked" /> 選 択 肢 A <input type="radio" name="radio" value="b" /> 選 択 肢 B<br> チェックボックス: <input type="checkbox" name="check" value="1" /> 選 択 肢 1 <input type="checkbox" name="check" value="2" /> 選 択 肢 2 <input type="checkbox" name="check" value="3" /> 選 択 肢 3<br> ドロップダウン: <select name="drop"> 42
HTML5 文 書 の 構 文 2.2 <option>ああああ</option> <option>いいいい</option> <option>うううう</option> </select><br> <textarea name="textarea" rows="4" cols="40">テキスト 複 数 行 </ textarea><br> <input type="submit" value=" 送 信 " /> <input type="reset" value=" 取 り 消 し" /> </p> </form> 2.2 HTML5 文 書 の 構 文 HTML5 HTML4.01 DOCTYPE 宣 言 HTML5 DOCTYPE <!DOCTYPE html> HTML5 DTD 文 字 エンコーディングの 指 定 HTML5 meta charset <meta charset="utf-8"> 1024 BOM Byte Order Mark Content-Type <meta http-equiv="content-type" content="text/html; charset=utf-8"> 43
2 章 HTML5の 要 素 言 語 の 指 定 HTML5 html lang <html lang="ja"> HTML5 <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>document</title> </head> <body> <p> 本 文 </p> </body> </html> 2.3 文 章 構 造 化 のためにHTML5で 追 加 された 要 素 HTML5 HTML4.01 div id class 2-5 表 2-5: 文 章 構 造 化 のための 追 加 要 素 要 素 名 section article main 説 明 h1 h6 Blog 44
文 章 構 造 化 のためにHTML5で 追 加 された 要 素 2.3 aside header footer nav figure figcaption figure HTML5 h1 body section article aside nav <section> <h1>みかんについて</h1> <p>みかんについて 解 説 します </p> <section> <h1>みかんとは</h1> <p> 果 物 で 正 確 にはウンシュウミカンを 指 します </p> </section> </section> <section> <h1>みかんの 食 べ 方 </h1> <p>みかんの 食 べ 方 を 解 説 します </p> <section> <h1> 生 で 食 べる</h1> 45
2 章 HTML5の 要 素 <p> 手 で 皮 をむいて 食 べます </p> </section> <section> <h1>ジュースとして 飲 む</h1> <p> 絞 って 出 た 果 汁 をそのまま 飲 めます </p> </section> </section> <section> <h1>みかんの 入 手 方 法 </h1> <p> 主 に 八 百 屋 や 果 物 屋 で 買 うことができます </p> </section> 1. みかんについて 2. みかんの 食 べ 方 2.1 生 で 食 べる 2.2 ジュースとして 飲 む 3. みかんの 入 手 方 法 2.4 その 他 のHTML5 追 加 要 素 HTML5 2-6 HTML5 video audio ruby canvas 46
その 他 のHTML5 追 加 要 素 2.4 表 2-6:その 他 の 追 加 要 素 要 素 名 video audio track embed mark progress meter time data dialog ruby rt rp bdi wbr canvas details summary datalist keygen output 説 明 Flash value ruby rt rp JavaScript details input list 47
2 章 HTML5の 要 素 video 要 素 video HTML4.01 Adobe Flash HTML5 video src URL <video src="video_file_name"></video> 2-7 表 2-7:video 要 素 で 使 用 可 能 な 属 性 属 性 名 controls autoplay loop muted poster preload width height src mediagroup crossorigin 説 明 auto /metadata /none CORS: Cross-Orign Resource Sharing anonymous /use-credentials source video src 48
その 他 のHTML5 追 加 要 素 2.4 video <video controls autoplay poster="video-image.jpg" preload="none" width="800" height="450"> <source src="video.mp4"> <source src="video.ogv"> <p> 再 生 にはvideo 要 素 をサポートするブラウザが 必 要 であることを 通 知 するコメント </p> </video> 2-2 図 2-2:video 要 素 の 例 audio 要 素 audio video <audio src= audio.ogg controls preload="none"> <p> 再 生 にはaudio 要 素 をサポートするブラウザが 必 要 であることを 通 知 するコメント </p> </audio> 49
本 書 は 電 子 書 籍 として 発 売 されている HTML5プロフェッショナル 認 定 資 格 レベル1 教 科 書 (NTTソフトウェア 株 式 会 社 発 行 2014 年 2 月 18 日 改 訂 版 )を 元 に 制 作 された 紙 書 籍 版 です 内 容 は 電 子 書 籍 版 と 同 等 となっています STAFF 執 筆 鈴 木 雅 貴 重 田 尚 孝 立 川 敬 行 に ん HTML5 プロフェッショナル 認 きょう レベル1 教 科 書 か し ょ 2014 年 3 月 28 日 紙 書 籍 版 発 行 v1.0 て い 定 し 資 か く 格 著 者 NTT ソフトウェア 株 式 会 社 発 行 者 中 川 信 行 発 行 所 株 式 会 社 マイナビ 100-0003 東 京 都 千 代 田 区 一 ツ 橋 1-1-1 TEL:03-6267-4477( 販 売 ) TEL:03-6267-4431( 編 集 ) E-Mail:pc-books@mynavi.jp URL:http://book.mynavi.jp パレスサイドビル 2014 NTT Software Corporation ISBN978-4-8399-5125-2 定 価 はカバーに 記 載 してあります 乱 丁 落 丁 についてのお 問 い 合 わせは TEL:03-6267-4477( 販 売 ) 電 子 メール: sas@mynavi.jpまでお 願 いいたします 本 書 は 著 作 権 法 上 の 保 護 を 受 けています 本 書 の 一 部 あるいは 全 部 について 著 者 発 行 者 の 許 諾 を 得 ずに 無 断 で 複 写 複 製 することは 禁 じられています