Embed Size (px)
Citation preview
本書について本書は電子書籍として発売されている『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） ........................... 1HTTPS ....................................................................... 2HTTPのメッセージ構造 ................................................... 3HTTPのリクエストメッセージ ........................................... 3HTTPのレスポンスメッセージ ........................................... 5HTTPでの認証 .............................................................. 6HTTP cookie（クッキー） ............................................... 7
1.2 HTMLについて 8
HTMLのバージョンについて ............................................. 8HTMLの構成 ................................................................ 9DOCTYPE宣言（文書型宣言） ........................................... 9ヘッダに関する要素 ....................................................... 10文字参照 .................................................................... 12
1.3 URI/URLの概念 12
URI（Uniform Resource Identifier） .............................. 13URL（Uniform Resource Locator） ............................... 13
1.4 ネットワーク・サーバ技術の概要 13
OSI参照モデル ............................................................ 13TCP/IP ..................................................................... 14ドメイン .................................................................... 16Webサーバ関連技術 ...................................................... 18データベース関連技術 .................................................... 22ネットワーク上の脅威対策 ............................................... 23
Contents
1.5 Web関連技術の概要 24
JavaScript ................................................................ 24Ajax ......................................................................... 25DOM ........................................................................ 26マイクロデータ ............................................................ 27RDFa ........................................................................ 28OGP （Open Graph Protocol） ...................................... 28データURL ................................................................. 29カスタムデータ属性 ....................................................... 30XHTML ..................................................................... 30セッション .................................................................. 31インタレース ............................................................... 31画像ファイルフォーマット ............................................... 32MVCアーキテクチャ ..................................................... 32CMS ......................................................................... 33Base64 .................................................................... 33Webサイトへの不正な攻撃手法 ........................................ 34SEO ......................................................................... 38検索ロボット ............................................................... 38Web広告 ................................................................... 38ROI .......................................................................... 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要素 .................................................................. 48audio要素 .................................................................. 49ruby関連要素 .............................................................. 50canvas要素 ............................................................... 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とは .................................................................... 70CSS3とは .................................................................. 70
3.2 CSSの基本 71
CSSの使い方 .............................................................. 71CSSの書き方 .............................................................. 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ボックスのレイアウトについて ......................................... 92floatの解除 ................................................................. 94ボックスのoverflowプロパティ ....................................... 95z-indexプロパティ ....................................................... 96CSS3での段組レイアウト ............................................... 96CSS3での可変ボックスレイアウト .................................... 98ボックスの枠線に関するプロパティ .................................. 101ボックスの背景に関するプロパティ .................................. 103色に関するプロパティ .................................................. 105ボックスに影をつけるプロパティ .................................... 107ボックスを切り抜くプロパティ ....................................... 108フォント関連プロパティ ............................................... 109Webフォント ............................................................ 110テキスト関連プロパティ ............................................... 111リスト関連プロパティ .................................................. 113テーブル（表）関連プロパティ ....................................... 114CSSによる変形・移動関連プロパティ .............................. 116CSSによるアニメーション関連プロパティ ......................... 117
4章 マルチデバイス対応 ............................................. 121
4.1 レスポンシブWebデザイン 121
レスポンシブWebデザインとは ...................................... 121レスポンシブWebデザインのメリットとデメリット ............. 122レスポンシブWebデザインに必要な技術 ........................... 122Media Queries（メディアクエリ） ................................. 123Fluid Grid（可変グリッド） ........................................... 125Fluid Image（可変イメージ） ......................................... 126
Contents
Viewport ................................................................ 126リセットCSS ............................................................ 128
4.2 スマートフォン最適化 128
CSSスプライト ......................................................... 128高解像度画面向け対応 .................................................. 129ホーム画面ショートカットアイコン .................................. 131スタンドアローンモード ............................................... 131a要素での電話発信 ..................................................... 132async属性/defer属性 ................................................ 132
5章 オフラインWebアプリケーション ................. 133
5.1 オフラインWebアプリケーションの概要 133
5.2 キャッシュマニフェストの利用 134
キャッシュマニフェストの記述方法 .................................. 134HTMLファイルからの指定 ............................................ 136キャッシュファイルの更新 ............................................. 137
5.3 MIMEタイプの設定 137
5.4 アプリケーションキャッシュの確認・削除 137
Google Chrome ....................................................... 138Firefox ................................................................... 138Internet 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の基礎知識 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/
1
1.1HTTP/HTTPS
1章 Webの基礎知識HTML5プロフェッショナル認定試験では、「デザイナ/コーダ」「Webプログラ
マ」「サーバ/ネットワークエンジニア」の3カテゴリにまたがるスキルや知識が必要とされており、実際、現場では単独の領域を越える知識が求められています。HTML5プロフェッショナル認定試験 レベル1では、それらがHTML5を学ぶ上で知っておいたほうがよい「Webの基礎知識」として出題範囲に含まれております。なお、出題構成でのパーセンテージは30％とされています。本章では、そのWeb
の基礎知識について解説します。
1.1 HTTP/HTTPSWebサイト及びWebアプリケーションの通信に用いられるHTTPとHTTPSに
ついて解説します。
HTTP（HyperText Transfer Protocol）HTTPとは、HTMLや画像などの表示を提供するサーバ（Webサーバと呼ばれます）とWebブラウザに代表されるクライアント間でHTML文書などのテキスト
図1-1： HTTP通信
2
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通信
3
1.1HTTP/HTTPS
HTTPのメッセージ構造HTTPのメッセージ構造を図1-3に示します。メッセージは、開始行、0行以上のヘッダフィールド、CRLFの改行、メッセージボディから成ります。さらに、開始行とヘッダフィールドにおける各ヘッダの最後には、区切りのためにCRLFの改行が入ります。つまり、ヘッダフィールドとメッセージボディの間には、都合2つ
の改行（空白行1つ）が入ることになります。
HTTPのリクエストメッセージHTTP/1.1で、リクエストメッセージとして指定可能なメソッドは表1-1の8種類です。このうち最も利用されるメソッドはGETとPOSTです。
GETを利用したリクエストメッセージを出した例を図1-4に示します。メッセージ構造はHTTPのメッセージ構造と同じです。
図1-3： HTTPのメッセージ構造
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： リクエストメッセージの例
5
1.1HTTP/HTTPS
に付加されます。次に例を示します。
name=John&age=20
HTTPのレスポンスメッセージHTTPのレスポンスメッセージ例を図 1-5に示します。メッセージ構造は
HTTPのメッセージ構造と同じです。
開始行にはレスポンスの状態を3桁の数字で表すステータスコードが含まれます。ステータスコードは表1-2のように分類されます。
表1-2： ステータスコード
ステータスコード 概要
1xx Informational（情報）
2xxSuccess（成功）（例） 200 OK
3xxRedirection（転送）（例） 301 Moved Permanently、 307 Temporary Redirect
4xxClient Error（クライアントエラー）（例） 400 Bad Request、 404 Not Found
5xxServer Error（サーバエラー）（例） 500 Internal Server Error、 503 Service Unavailable
図1-5： レスポンスメッセージの例
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に示します。
7
1.1HTTP/HTTPS
より安全な認証をするためには、HTTPではなく通信路を暗号化するHTTPS
を利用することが望ましいです。
HTTP cookie（クッキー）HTTPは、システムの現在の状態を保持しない（ステートレスと呼ばれます）プロトコルです。よって、WebサーバとWebブラウザとの間の状態管理はできません。そこで、Webブラウザにクッキーと呼ばれる状態管理情報を保存することで、HTTPでの状態管理を実現します。状態管理するプロトコルをクッキーと呼ぶこともあります。
図1-6： Basic認証
図1-7： Digest認証
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として提示されたものの通称（※1）
1995年 HTML2.0 RFC1866 IETF
1997年1月 HTML3.2 W3Cの公式な仕様として勧告されたHTML
1997年12月 HTML4.0文書体裁や構成などのレイアウトはCSSで定義互換性を保つために、Strict、 Transitional、 Framesetの3バージョンが制定
9
HTMLについて 1.2
1999年12月 HTML4.0.1 HTML4.0を全般的に改訂したもの
2014年Q4 HTML5.0W3CのHTML WGで検討2012年12月に勧告候補（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は文書型宣言、ヘッダ、ボディの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より簡略化され、次のよ
10
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に示します。
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属性を利用した例です。目次ページと前ページの関係を明示しています。
40
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 HTML文書のタイトル
metaHTML文書のメタ情報ブラウザには表示されない
link WebサイトにおけるHTML文書の相対的場所
meta要素では表2-2のようなメタ情報を記述することができます。
41
2.1HTML4.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に示します。
42
2 章 HTML5の要素
表2-4： HTML4.01でのtype属性の例
type属性の値 説明
text 1行のテキスト入力フィールド
textarea 複数行のテキスト入力フィールド
radio 選択式ラジオボタン
checkbox選択式チェックボックスボタン複数選択可能
select ドロップダウンメニュー
submit Webサーバへのデータ送信に使用するボタン
button 汎用ボタン
例として、図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">
図2-1： HTML4.01でのフォーム例
43
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">
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 文書やアプリケーションにおけるメインコンテンツを表す
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>
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要素について詳しく解説します。
47
その他のHTML5追加要素 2.4
表2-6： その他の追加要素
要素名 説明
video 動画の再生に使用する要素
audio 音声の再生に使用する要素
track
メディアのトラック情報を指定するための要素種別として、字幕、見出し、メディア概要説明、チャプタータイトル、メタデータを指定可能
embed外部アプリケーションやインタラクティブ・コンテンツ（Flashなど）を埋め込む場合に使用する要素
mark ユーザが参照しやすいようテキストをハイライトする要素
progress タスクの進捗状況を示すために使用する要素
meter 既知の範囲にある数量や、割合を表すような値を表す要素（ディスク使用量など）
time 日付や時刻を表記するために使用する要素
datavalue属性にコンピュータが解釈可能なデータが入った、データを表記するために使用する要素
dialog 閲覧者が操作することが可能なダイアログを表示する要素
ruby、 rt、 rpコンテンツにルビ注釈を入れる場合に使用する要素rubyでルビ付加対象、rt要素でルビテキストを指定し、rp要素では、ルビ機能未対応時のフォールバック用にルビのテキストを囲む括弧等の記号を指定する
bdi
双方向のテキストにおいて、マークアップしたテキストが周辺の文字の影響を受けないようにするアラビア文字などのように右から左に記述するテキストを含める場合に使用する
wbr テキストを改行してもよい位置を指示する
canvas
グラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスに用いられる実際に図形を描くにはスクリプト（JavaScript）を使用する
details ユーザが必要に応じ追加で見られる、備考や操作手段などの詳細情報
summary詳細情報の要約や説明文を表すdetails要素の子要素
datalist input要素の新しいlist属性と組み合わせることでコンボボックスを作成する
keygen フォームの送信時に暗号鍵（秘密鍵と公開鍵のペア）を生成する
output スクリプトなどによる計算結果の出力欄を表す
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予めデータを読み込むか否かをauto（ブラウザ任せ）/metadata（メタデータのみ読み込み）/none（読み込みなし）のいずれかで指定する
width 動画の幅を指定する
height 動画の高さを指定する
src 動画ファイルを指定する
mediagroup
動画の属するメディアグループを指定する音声を含む複数のメディアに同じメディアグループ名を指定することで、それらを同期して再生することが可能になる
crossorigin
クロスドメイン通信（CORS: Cross-Orign Resource Sharing）を行う場合、認証情報フラグを指定するanonymous（認証情報フラグをセットしない）/use-credentials（認証情報フラグをセットする）
また、子要素としてsource要素を使用することで、複数の動画ファイルを再生候補にすることができます。ブラウザによって異なるデータ形式を指定する際などに用いることができます。この時にはvideo要素のsrc属性を用いることはでき
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要素とほぼ同様に使うことができます。
<audio src=“audio.ogg” controls preload="none">
<p>「再生にはaudio要素をサポートするブラウザが必要であることを通知
するコメント」</p>
</audio>
図2-2： video要素の例
※本書は電子書籍として発売されている『HTML5プロフェッショナル認定資格 レベル１ 教科書』（NTTソフトウェア株式会社・発行、2014年2月18日改訂版）を元に制作された紙書籍版です。内容は電子書籍版と同等となっています。
STAFF執筆 鈴木 雅貴、重田 尚孝、立川 敬行
HTML5プロフェッショナル認に ん
定て い
資し
格か く
レベル１ 教きょう
科か
書し ょ
2014年3月28日 紙書籍版発行 v1.0
著 者 NTTソフトウェア株式会社発行者 中川 信行発行所 株式会社マイナビ 〒100-0003 東京都千代田区一ツ橋1-1-1 パレスサイドビル TEL：03-6267-4477（販売） TEL：03-6267-4431（編集） E-Mail：[email protected] URL：http://book.mynavi.jp
©2014 NTT Software CorporationISBN978-4-8399-5125-2
・定価はカバーに記載してあります。・ 乱丁・落丁についてのお問い合わせは、TEL：03-6267-4477（販売）、電子メール：
[email protected]までお願いいたします。・ 本書は著作権法上の保護を受けています。本書の一部あるいは全部について、著者、
発行者の許諾を得ずに、無断で複写、複製することは禁じられています。
