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

(1)

(2)

本書について 本書は電子書籍として発売されている『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に留保されています。 •

(3)

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

(4)

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

(5)

文字エンコーディングの指定 ... 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

(6)

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

(7)

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

(8)

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

(9)

まえがき

HTML5は、Webプラットフォームの中核となる仕様であり、Webの多様化・複雑化・リアルタイム化が進むうえでも、これからの_Webコンピューティングの世界で中核を成す技術標準です。そして、スマートフォンアプリ、タブレット_PC、スマートテレビ、車載情報システムなど、高度なリッチインターフェースを持つマルチメディア_Webサイトを作るためには必須の技術となっています。上記の時代の流れを受けて、いわゆるデザイナ/コーダ、Webプログラマ、サーバ_/ネットワークエンジニアは、自分の担当部分だけではなく自らの領域を越えた知識やスキルが必要とされています。そのような状況に対応できる人材育成を推進すべく、HTML5技術者認定資格は誕生しました。 HTML5技術者認定資格とは 特定非営利活動法人エルピーアイジャパン（LPI-Japan）が、次世代の_Webプロフェッショナルのスキルの向上に貢献するために、HTML5を活用した_Webページや_Webアプリケーションなどのデザイン、設計、構築に関する体系だった知識とスキルを備えた_HTML5のプロフェッショナルを中立的な立場で公平かつ厳正に認定する資格制度です。本認定制度には「レベル₁」と「レベル₂（策定中）」の₂つのレベルがあり、それぞれ下記のスキルを備えている_IT技術者であることを認定します。 レベル1：マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデ ザイン・作成できる レベル2：システム間連携や最新のマルチメディア技術に対応したWebアプリケー ションや動的Webコンテンツの開発・設計ができる 本書籍について 本書籍は、LPI-Japanが提示する_HTML5プロフェッショナル認定試験レベル₁ の出題範囲（※）を対象とし、網羅的・体系的にまとめたものとなっています。

(10)

また、最後に想定問題集をつけてあります。本書を資格取得において活用していただければ幸いです。 ※: http://www.html5exam.jp/outline/objectives.html#lv1 なお、HTML5プロフェッショナル認定試験レベル₁の出題範囲と本書は次のように対応しています。出題範囲本書での対応箇所 Webの基礎知識 1. Webの基礎知識 CSS3 3. CSS3 要素 2. HTML5の要素 レスポンシブWebデザイン 4. マルチデバイス対応 オフラインWebアプリケーション 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/

(11)

1 1.1 HTTP/HTTPS

1章 Webの基礎知識

HTML5プロフェッショナル認定試験では、「デザイナ_/コーダ」「Webプログラマ」「サーバ_/ネットワークエンジニア」の₃カテゴリにまたがるスキルや知識が必要とされており、実際、現場では単独の領域を越える知識が求められています。 HTML5プロフェッショナル認定試験レベル₁では、それらが_HTML5を学ぶ上で知っておいたほうがよい「Webの基礎知識」として出題範囲に含まれております。なお、出題構成でのパーセンテージは₃₀％とされています。本章では、その_Web の基礎知識について解説します。

1.1　HTTP/HTTPS

Webサイト及び_Webアプリケーションの通信に用いられる_HTTPと_HTTPSについて解説します。

HTTP（HyperText Transfer Protocol）

HTTPとは、HTMLや画像などの表示を提供するサーバ（Webサーバと呼ばれます）と_Webブラウザに代表されるクライアント間で_HTML文書などのテキスト

(12)

2 1 章 Webの基礎知識 メッセージを受け渡すためのアプリケーションレベルのプロトコルです。現行バージョンの_HTTPは_HTTP/1.1であり、RFC2616（※）で標準化されたものです。新しいバージョンの_HTTP/2.0は₂₀₁₄年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通信

(13)

3 1.1 HTTP/HTTPS HTTPのメッセージ構造 HTTPのメッセージ構造を図1-3に示します。メッセージは、開始行、0行以上のヘッダフィールド、CRLFの改行、メッセージボディから成ります。さらに、開始行とヘッダフィールドにおける各ヘッダの最後には、区切りのために_CRLFの改行が入ります。つまり、ヘッダフィールドとメッセージボディの間には、都合2つの改行（空白行1つ）が入ることになります。 HTTPのリクエストメッセージ HTTP/1.1で、リクエストメッセージとして指定可能なメソッドは表1-1の₈種類です。このうち最も利用されるメソッドは_GETと_POSTです。 GETを利用したリクエストメッセージを出した例を図1-4に示します。メッセージ構造は_HTTPのメッセージ構造と同じです。 図1-3： HTTPのメッセージ構造

(14)

4 1 章 Webの基礎知識 表1-1： HTTPのリクエストメッセージで指定可能なメソッド メソッド名説明 GET _{リクエストURI で}識別されるリソースを取得 HEAD GET_と同等ですがヘッダのみを取得 POST リクエストURIで識別されるリソースの子リソースの作成、リソースへのデータの追加などを要求 PUT リクエストURI に対してエンティティ（メッセージボディ）に含まれる情報を保存することを要求 OPTIONS _{リクエストURI がサポートしているメソッドを}取得 DELETE _{リクエストURI で}識別されるリソースの削除を要求 TRACE 自分宛にリクエストメッセージを返却するループバック試験に使用 CONNECT プロキシ動作のトンネル接続への変更（SSLトンネリングなど）のために使用 GETメソッドでリクエストパラメータが指定された場合、リクエストパラメータはリクエスト_URLに付加されます。? 以降の文字列がクエリストリングやクエリ文字列と呼ばれ、リクエストパラメータの内容を表します。次に例を示します。 GET /index.html?name=John&age=20 HTTP/1.1 この場合のクエリストリングは?name=John&age=20 です。 POSTメソッドでリクエストパラメータが指定された場合は、メッセージボディ 図1-4：リクエストメッセージの例

(15)

5 1.1 HTTP/HTTPS に付加されます。次に例を示します。 name=John&age=20 HTTPのレスポンスメッセージ HTTPのレスポンスメッセージ例を図1-5に示します。メッセージ構造は HTTPのメッセージ構造と同じです。開始行にはレスポンスの状態を₃桁の数字で表すステータスコードが含まれます。ステータスコードは表1-2のように分類されます。 表1-2：ステータスコード ステータスコード概要 1xx Informational（情報） 2xx Success（成功）（例） 200 OK 3xx Redirection（転送）

（例） 301 Moved Permanently、 307 Temporary Redirect

4xx Client Error（クライアントエラー）（例） 400 Bad Request、 404 Not Found

5xx Server Error（サーバエラー）

（例） 500 Internal Server Error、 503 Service Unavailable

(16)

6 1 章 Webの基礎知識 また、ヘッダフィールドにはメッセージの外部情報（メタ情報）を扱うための HTTPヘッダが含まれます。HTTPヘッダとして代表的なものを表1-3に示します。 表1-3：代表的なHTTPヘッダ ヘッダ名概要 Accept 受け入れ可能なメディアタイプを指定 Authorization _HTTP認証の認証情報 Cache-Control キャッシュの振る舞いを指示 Content-Language エンティティの自然言語を表す Content-Length メッセージボディの大きさ Content-Type メッセージボディのメディアタイプ Expires レスポンスの有効期間 If-Modified-Since 指定時刻以降に更新されているかを確認条件付きGETとともに使用 Last-Modified リソースの最終更新時刻 Referer リンクされている元のリソースのURI User-Agent ユーザエージェントの名前 HTTPでの認証 HTTPでは、特定のファイルへのアクセス制限をするために認証をすることが可能です。主な認証方法を表1-4に示します。 表1-4： HTTPでの主な認証方法 認証名概要 Basic認証ユーザ名とパスワードをコロン":"で接続し、Base64でエンコードして送信することで認証を実施盗聴や改ざんが簡単にできてしまう Digest認証盗聴や改ざんを防ぐため、ユーザ名とパスワードをMD5でハッシュ化して送信し、認証を実施 Basic認証のイメージ図を図1-6に、Digest認証のイメージ図を図1-7に示します。

(17)

7 1.1 HTTP/HTTPS より安全な認証をするためには、HTTPではなく通信路を暗号化する_HTTPS を利用することが望ましいです。 HTTP cookie（クッキー） HTTPは、システムの現在の状態を保持しない（ステートレスと呼ばれます）プロトコルです。よって、Webサーバと_Webブラウザとの間の状態管理はできません。そこで、Webブラウザにクッキーと呼ばれる状態管理情報を保存することで、 HTTPでの状態管理を実現します。状態管理するプロトコルをクッキーと呼ぶこともあります。 図1-6： Basic認証 図1-7： Digest認証

(18)

8 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とし 1995年 HTML2.0 RFC1866 IETF 1997年1月 HTML3.2 W3Cの公式な仕様として勧告されたHTML 1997年12月 HTML4.0 文書体裁や構成などのレイアウトはCSSで定義

互換性を保つために、Strict、 Transitional、 Framesetの3バージョンが制定

(19)

9 HTMLについて 1.2 1999年12月 HTML4.0.1 HTML4.0を全般的に改訂したもの 2014年Q4 HTML5.0 W3CのHTML WGで₂₀₁₂_年₁₂_月_に_{勧告候補（}検討_CR_）_が_公開 2016年Q4 HTML5.1 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は文書型宣言、ヘッダ、ボディの₃要素から構成されます。 表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 に加えてフレームを使えるようにしたルールに従う）が存在します。

(20)

10

1 章 Webの基礎知識

うに_DTDは必要なくシンプルになっています。

<!DOCTYPE html>

ヘッダに関する要素

ヘッダに関連する要素として、title 要素、meta 要素、link 要素があります。 title要素 title要素は、文書にタイトルをつけるために利用します。head 要素内には必ず₁つのtitle要素を記述してください。 meta要素 meta要素は、文書についての情報を記述するために利用します。meta 要素は必ずヘッダ内に記述してください。例えば、meta 要素を用いて文書の文字コードを_UTF-8に指定する場合、 HTML4.01までの記法では次のようになります。これは_HTML5でも利用可能です。

HTML5では次のように書くことができます。

文書の作者がwhoamiであることを表す場合は次のように書きます。

link要素

link要素は目次ページや検索ページなどの関連文書を指定し、現在の文書との関係を定義するための要素です。link 要素はヘッダ内に記述します。link 要素の代表的な属性を表1-7に示します。

(21)

11 HTMLについて 1.2 表1-7： link要素の代表的属性 属性名概要 rel 関連文書との関係 href 関連文書のURI type 関連文書のMIMEタイプ charset 関連文書の文字コード hreflang 関連文書の言語コード media 関連文書の出力メディアタイプ関係を表すrel属性には、表1-8の値を指定可能です。 表1-8： rel属性に指定可能な値 値説明 alternate 代替文書 stylesheet 外部スタイルシート start 最初の文書 next 次の文書 prev 前の文書 contents 目次 index 索引 chapter 章 section 節 subsection 項 glossary 用語集 copyright 著作権について書かれた文書 appendix 付録 help ヘルプ bookmark ブックマーク次はrel属性を利用した例です。目次ページと前ページの関係を明示しています。

(22)

40 2 章 HTML5の要素

2章 HTML5の要素

HTML5では、リッチなユーザインタフェースやセマンティクスの実現を目的に、数多くの要素や属性が新しく追加されています。また、HTML4.01から変更・追加・削除されたものもあります。HTML5プロフェッショナル認定試験レベル₁では、それらが「要素」として出題範囲に含まれております。なお、出題構成でのパーセンテージは₃₇％とされています。本章では、HTML4.01について簡単に触れた後、HTML5を中心とした要素・属性について解説します。また、本章以降、特に断りの無い限り、"Webブラウザ_"を意味する言葉として_" ブラウザ_"を用います。

2.1　HTML4.01の要素

前述したように、HTMLは文書型宣言、ヘッダ、ボディの₃つから構成されています。ここでは、HTML5のベースになっている_HTML4.01の要素を、ヘッダとボディそれぞれから簡単に紹介します。 ヘッダの代表的要素 HTML4.01での代表的なヘッダ要素を表2-1に示します。前述したものと同じです。 表2-1： HTML4.01での代表的ヘッダ要素 要素名説明 title _HTML文書のタイトル meta HTML文書のメタ情報ブラウザには表示されない link _{WebサイトにおけるHTML}文書の相対的場所 meta要素では表2-2のようなメタ情報を記述することができます。

(23)

41

2.1 HTML4.01の要素

表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 見出し h1要素が最大レベル p 段落 br 改行 hr 水平線 table 表 tr要素で表の横1行を定義し、その中にtd要素やth要素（表の見出しセル用）でセルを定義して表を作成 form フォーム input要素でユーザの入力を受け付ける場所を定義フォームは、ブラウザからサーバに対しての情報送信を実現するために用意された仕組みです。これにより、Webサイトは双方向メディアとなることができます。フォームの例を図2-1に示します。フォームでユーザの入力を受け付けるinput要素は、type 属性を変更することで図2-1のように形を変更することができます。 type属性の例を表_2-4に示します。

(24)

42 2 章 HTML5の要素 表2-4： HTML4.01でのtype属性の例 type属性の値説明 text 1行のテキスト入力フィールド textarea 複数行のテキスト入力フィールド radio 選択式ラジオボタン checkbox 選択式チェックボックスボタン複数選択可能 select ドロップダウンメニュー submit _{Webサーバへのデータ}送信に使用するボタン button 汎用ボタン例として、図2-1のフォームが表示される_HTMLを次に示します。

　　テキスト: <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> 　　ドロップダウン：

(25)

43 HTML5文書の構文 2.2 　　　<option>ああああ</option> 　　　<option>いいいい</option> 　　　<option>うううう</option> 　　</select><br>

　　<textarea name="textarea" rows="4" cols="40">テキスト複数行</ textarea><br>

2.2　HTML5文書の構文

前述されていますが、再度HTML5文書の構文を、HTML4.01との比較を中心に紹介します。 DOCTYPE宣言 HTML5では、ファイルの先頭に次のような_DOCTYPE宣言を含める必要があります。大文字小文字は区別されません。 <!DOCTYPE html> このように、HTML5には公式の_DTDが存在しません。 文字エンコーディングの指定 HTML5では、文字エンコーディングの指定にmeta要素のcharset属性を使用することができます。 <meta charset="UTF-8"> 文章の₁₀₂₄バイト以内に記述するようにしてください。

もしくは、ファイルの先頭に付加する_BOM（Byte Order Mark）を利用した指定ができます。

また、従来通りのContent-Typeを用いた指定も可能です。

(26)

44 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 文書やアプリケーションにおける一般的なセクションを表す h1∼h6要素と共に使用して文書構造を表すことができる article 単体で完結できるセクションとして、Blogのエントリや新聞記事など、それぞれ独立した文書を表す main 文書やアプリケーションにおけるメインコンテンツを表す

(27)

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

(28)

46 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 要素について詳しく解説します。

(29)

47 その他のHTML5追加要素 2.4 表2-6：その他の追加要素 要素名説明 video 動画の再生に使用する要素 audio 音声の再生に使用する要素 track メディアのトラック情報を指定するための要素種別として、字幕、見出し、メディア概要説明、チャプタータイトル、メタデータを指定可能 embed 外部アプリケーションやインタラクティブ・コンテンツ（Flashなど）を埋め込む場合に使用する要素 mark ユーザが参照しやすいようテキストをハイライトする要素 progress タスクの進捗状況を示すために使用する要素 meter 既知の範囲にある数量や、割合を表すような値を表す要素（ディスク使用量など） time 日付や時刻を表記するために使用する要素 data value属性にコンピュータが解釈可能なデータが入った、データを表記するために使用する要素 dialog 閲覧者が操作することが可能なダイアログを表示する要素 ruby、rt、rp コンテンツにルビ注釈を入れる場合に使用する要素 rubyでルビ付加対象、rt要素でルビテキストを指定し、rp要素では、ルビ機能未対応時のフォールバック用にルビのテキストを囲む括弧等の記号を指定する bdi 双方向のテキストにおいて、マークアップしたテキストが周辺の文字の影響を受けないようにするアラビア文字などのように右から左に記述するテキストを含める場合に使用する wbr テキストを改行してもよい位置を指示する canvas グラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスに用いられる実際に図形を描くにはスクリプト（JavaScript）を使用する details ユーザが必要に応じ追加で見られる、備考や操作手段などの詳細情報 summary 詳細情報の要約や説明文を表す details要素の子要素

datalist input要素の新しいlist属性と組み合わせることでコンボボックスを作成する

keygen フォームの送信時に暗号鍵（秘密鍵と公開鍵のペア）を生成する

(30)

48 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 予めデータを読み込むか否かをa u t o（ブラウザ任せ）/m e t a d a t a（メタデータのみ読み込み）/none（読み込みなし）のいずれかで指定する width 動画の幅を指定する height 動画の高さを指定する src 動画ファイルを指定する mediagroup 動画の属するメディアグループを指定する音声を含む複数のメディアに同じメディアグループ名を指定することで、それらを同期して再生することが可能になる crossorigin

クロスドメイン通信（CORS: Cross-Orign Resource Sharing）を行う場合、認証情報フラグを指定する anonymous（認証情報フラグをセットしない）/use-credentials（認証情報フラグをセットする）また、子要素としてsource要素を使用することで、複数の動画ファイルを再生候補にすることができます。ブラウザによって異なるデータ形式を指定する際などに用いることができます。この時にはvideo要素のsrc属性を用いることはでき

(31)

49

その他の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のようになります。 audio要素 audio要素はvideo要素とほぼ同様に使うことができます。

　<p>「再生にはaudio要素をサポートするブラウザが必要であることを通知するコメント」</p>

</audio>

(32)

※本書は電子書籍として発売されている『HTML5 プロフェッショナル認定資格レベル１教科書』（NTT ソフトウェア株式会社・発行、2014 年 2 月 18 日改訂版）を元に制作された紙書籍版です。内容は電子書籍版と同等となっています。 STAFF 執筆　鈴木雅貴、重田尚孝、立川敬行