『HTML5プロフェッショナル認定資格レベル1 教科書』サンプルPDF

Size: px

Start display at page:

Download "『HTML5プロフェッショナル認定資格レベル1 教科書』サンプルPDF"

れんかかみいしづ
9 years ago
Views:

2 本書について HTML5 NTT 免責事項 URL HTML5 Level.1 LPI-Japan HTML5 HTML5 ATM LPI-Japan LPI-Japan

3 Contents 1 章 Webの基礎知識 HTTP/HTTPS 1 HTTP(HyperText Transfer Protocol)... 1 HTTPS... 2 HTTPのメッセージ構造... 3 HTTPのリクエストメッセージ... 3 HTTPのレスポンスメッセージ... 5 HTTPでの認証... 6 HTTP cookie(クッキー) HTML について 8 HTMLのバージョンについて... 8 HTMLの構成... 9 DOCTYPE 宣言 ( 文書型宣言 )... 9 ヘッダに関する要素文字参照 URI/URLの概念 12 URI(Uniform Resource Identifier) URL(Uniform Resource Locator) ネットワークサーバ技術の概要 13 OSI 参照モデル TCP/IP ドメイン Webサーバ関連技術データベース関連技術ネットワーク上の脅威対策... 23

.. 9 DOCTYPE 宣言 ( 文書型宣言 )... 9 ヘッダに関する要素... 10 文字参照... 12 1.3 URI/URLの概念 12 URI(Uniform Resource Identifier).

4 Contents 1.5 Web 関連技術の概要 24 JavaScript Ajax DOM マイクロデータ RDFa OGP (Open Graph Protocol) データURL カスタムデータ属性 XHTML セッションインタレース画像ファイルフォーマット MVCアーキテクチャ CMS Base Webサイトへの不正な攻撃手法 SEO 検索ロボット Web 広告 ROI コンバージョンレート章 HTML5の要素 HTML4.01の要素 40 ヘッダの代表的要素ボディの代表的要素 HTML5 文書の構文 43 DOCTYPE 宣言... 43

.. 32 MVCアーキテクチャ... 32 CMS... 33 Base64... 33 Webサイトへの不正な攻撃手法... 34 SEO... 38 検索ロボット... 38 Web 広告... 38 ROI.

5 文字エンコーディングの指定言語の指定文章構造化のためにHTML5で追加された要素その他のHTML5 追加要素 46 video 要素 audio 要素 ruby 関連要素 canvas 要素 HTML5で変更された要素 HTML5で削除された要素 55 CSSで扱うべき情報のため削除ユーザビリティやアクセシビリティに影響するため削除あまり使用されておらず混乱の元になるため削除要素のカテゴリ 56 メタデータコンテンツフローコンテンツセクショニングコンテンツヘディングコンテンツフレージングコンテンツエンベディッドコンテンツインタラクティブコンテンツパルパブルコンテンツスクリプトサポート要素 HTML5でのグローバル属性 HTML5で追加された属性 60 type 属性... 62

.. 55 ユーザビリティやアクセシビリティに影響するため削除... 56 あまり使用されておらず混乱の元になるため削除... 56 2.7 要素のカテゴリ 56 メタデータコンテンツ... 57 フローコンテンツ... 57 セクショニングコンテンツ.

6 Contents バリデーション関連属性 HTML5で変更された属性 HTML5で削除された属性ブラウザの対応状況調査 69 3 章 CSS CSS および CSS3 とは 70 CSSとは CSS3とは CSSの基本 71 CSSの使い方 CSSの書き方 CSS セレクタ 73 シンプルセレクタ結合子擬似クラス擬似要素カスケード 81 継承カスケード処理 CSS プロパティ 86 ベンダプレフィックスについてボックスモデルについてボックスの大きさ... 88

.. 71 CSSの書き方... 73 3.3 CSS セレクタ 73 シンプルセレクタ... 74 結合子... 75 擬似クラス... 76 擬似要素... 80 3.

7 paddingとmarginの指定サイズ値の単位についてボックスのdisplayプロパティボックスのvisibilityプロパティボックスのレイアウトについて floatの解除ボックスのoverflowプロパティ z-indexプロパティ CSS3での段組レイアウト CSS3での可変ボックスレイアウトボックスの枠線に関するプロパティボックスの背景に関するプロパティ色に関するプロパティボックスに影をつけるプロパティボックスを切り抜くプロパティフォント関連プロパティ Webフォントテキスト関連プロパティリスト関連プロパティテーブル( 表 ) 関連プロパティ CSSによる変形移動関連プロパティ CSSによるアニメーション関連プロパティ章マルチデバイス対応レスポンシブ Web デザイン 121 レスポンシブWebデザインとはレスポンシブWebデザインのメリットとデメリットレスポンシブWebデザインに必要な技術 Media Queries(メディアクエリ) Fluid Grid( 可変グリッド) Fluid Image( 可変イメージ)

.. 108 フォント関連プロパティ... 109 Webフォント... 110 テキスト関連プロパティ... 111 リスト関連プロパティ... 113 テーブル( 表 ) 関連プロパティ... 114 CSSによる変形移動関連プロパティ... 116 CSSによるアニメーション関連プロパティ.

8 Contents Viewport リセットCSS スマートフォン最適化 128 CSSスプライト高解像度画面向け対応ホーム画面ショートカットアイコンスタンドアローンモード a 要素での電話発信 async 属性 /defer 属性章オフラインWebアプリケーションオフラインWebアプリケーションの概要キャッシュマニフェストの利用 134 キャッシュマニフェストの記述方法 HTMLファイルからの指定キャッシュファイルの更新 MIMEタイプの設定アプリケーションキャッシュの確認削除 137 Google Chrome Firefox Internet Explorer 問題集 139 問題集解答 158

1 オフラインWebアプリケーションの概要 133 5.2 キャッシュマニフェストの利用 134 キャッシュマニフェストの記述方法... 134 HTMLファイルからの指定... 136 キャッシュファイルの更新.

9 まえがき HTML5 Web Web Web PC Web / Web / HTML5 HTML5 技術者認定資格とは LPI-Japan Web HTML5 Web Web HTML IT 1 Web HTML5 2 Web Web 本書籍について LPI-Japan HTML5 1

10 : HTML5 1 出題範囲 Web CSS3 Web Web 本書での対応箇所 1. Webの基礎知識 3. CSS3 2. HTML5の要素 4. マルチデバイス対応 5. オフラインWebアプリケーション LPI-Japan HTML5 認定教材のロゴの意味するもの HTML5 LPI-Japan LPI-Japan HTML5 HTML5 ATM LPI-Japan LPI-Japan LPI-Japan HTML5 認定教材制度とは HTML5 LPI-Japan HTML5 詳細情報 HTML5 URL

11 HTTP/HTTPS 章 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

12 1 章 Webの基礎知識 HTTP HTTP/1.1 RFC2616 HTTP/ W3C : HTTP 1-1 HTTPS HTTP HTTPS TSL SSL HTTPS HTTPS RFC TSL TSL1.2 RFC5246 : HTTPS 1-2 SSL/TSL HTTP 図 1-2:HTTPS 通信 2

txt HTTP 1-1 HTTPS HTTP HTTPS TSL SSL HTTPS HTTPS RFC TSL

13 HTTP/HTTPS 1.1 HTTPのメッセージ構造 HTTP CRLF CRLF 2 1 図 1-3: HTTPのメッセージ構造 HTTPのリクエストメッセージ HTTP/ GET POST GET 1-4 HTTP 3

14 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

GET URI URI URI URI SSL 図 1-4: リクエストメッセージの例 GET URL?

15 HTTP/HTTPS 1.1 name=john&age=20 HTTPのレスポンスメッセージ HTTP 1-5 HTTP 図 1-5:レスポンスメッセージの例表 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-2:ステータスコードステータスコード 1xx 2xx 3xx 4xx 5xx 概要 Informational Success 200 OK

16 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

If-Modified-Since Last-Modified Referer User-Agent 概要 HTTP GET URI HTTPでの認証

17 HTTP/HTTPS 1.1 図 1-6:Basic 認証図 1-7:Digest 認証 HTTP HTTPS HTTP cookie(クッキー) HTTP Web Web Web HTTP 7

18 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 HTML2.0 RFC1866 IETF HTML3.2 W3C HTML HTML4.0 CSS Strict Transitional Frameset 3 8

2 HTMLについて HTML HTMLのバージョンについて HTML HTML 1-5 表 1-5:HTMLの歴史年バージョン説明

19 HTMLについて HTML4.0.1 HTML Q Q4 HTML5.0 HTML5.1 W3C HTML WG CR HTML , Q4 1: 2: 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" " Strict HTML4.01 Frameset Transitional HTML5 DOCTYPE HTML

html HTMLの構成 HTML 3 表 1-6:HTMLの構成要素構成要素説明 HTML DOCTYPE head body DOCTYPE 宣言 ( 文書型宣言 ) HTML4.01 DTD Transitional HTML4.

20 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

21 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

22 2 章 HTML5の要素 2 章 HTML5の要素 HTML5 HTML4.01 HTML HTML4.01 HTML5 "Web " " " 2.1 HTML4.01の要素 HTML 3 HTML5 HTML4.01 ヘッダの代表的要素 HTML 表 2-1:HTML4.01での代表的ヘッダ要素要素名 title meta link 説明 HTML HTML Web HTML meta

23 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=" 検索キーワード"> ボディの代表的要素 HTML 表 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

24 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

25 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

26 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

27 文章構造化のために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

28 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

29 その他の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

30 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

31 その他の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

32 本書は電子書籍として発売されている HTML5プロフェッショナル認定資格レベル1 教科書 (NTTソフトウェア株式会社発行 2014 年 2 月 18 日改訂版 )を元に制作された紙書籍版です内容は電子書籍版と同等となっています STAFF 執筆鈴木雅貴重田尚孝立川敬行にん HTML5 プロフェッショナル認きょうレベル1 教科書かしょ 2014 年 3 月 28 日紙書籍版発行 v1.0 てい定し資かく格著者 NTT ソフトウェア株式会社発行者中川信行発行所株式会社マイナビ東京都千代田区一ツ橋 TEL: ( 販売 ) TEL: ( 編集 ) [email protected] URL: パレスサイドビル 2014 NTT Software Corporation ISBN 定価はカバーに記載してあります乱丁落丁についてのお問い合わせは TEL: ( 販売 ) 電子メール: [email protected]までお願いいたします本書は著作権法上の保護を受けています本書の一部あるいは全部について著者発行者の許諾を得ずに無断で複写複製することは禁じられています

0序文‐1章.indd

0序文‐1章.indd 本書に記載されたURL 等は執筆時点でのものであり予告なく変更される場合があります本書の使用 ( 本書のとおりに操作を行う場合を含む)により万一直接的間接的に損害が発生しても出版社および著者は一切の責任を負いかねますのであらかじめご了承下さい Microsoft

『HTML5プロフェッショナル認定資格 レベル1 教科書』サンプルPDF

『HTML5プロフェッショナル認定資格レベル1 教科書』サンプルPDF