LPI-Japan主催

HTML5プロフェッショナル認定試験
レベル1 ポイント解説無料セミナー
2014年6月

講師：林 拓也（株式会社クリーク・アンド・リバー社 認定講師）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

資格・試験概要※オフィシャルサイトより引用

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

特定非営利活動法人エルピーアイジャパン（LPI-Japan）が、
HTML5,CSS3,Javascriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定資格
HTML5プロフェッショナル認定資格 レベル1

（Markup Professional）→マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる。

HTML5プロフェッショナル認定資格 レベル2（※策定中）（Application Development Professional）→システム間連携や最新のマルチメディア術に対応したWebアプリ
ケーションや動的Webコンテンツの開発・設計ができる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

資格概要

マルチデバイスに対応した静的なWebコンテンツをHTML5を使ってデザイン・作成できる

所要時間

90分（機密保持契約とアンケートを含む）

試験問題数

約60問

受験料

￥15,000 (税抜)

認定条件

HTML5 レベル1試験に合格すること有意性の期限5年
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

資格概要

システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる

所要時間

90分（機密保持契約とアンケートを含む）

試験問題数

未定

受験料

未定

認定条件

HTML5 レベル2試験に合格し、かつ有意なHTML5
レベル1認定を保有していること

有意性の期限5年
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

Webの基礎知識

30%

CSS3
要素

20%
37%

レスポンシブWebデザイン

10%

オフラインWebアプリケーション（概要とマニフェスト）

3%

合格ライン：70%
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

認定証

認定カード

認定者ロゴ（名刺用）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

オフィシャルサイト
http://www.html5exam.jp/
Twitter@html5Cert
Facebook
https://www.facebook.com/html5exam
受験予約
http://www.pearsonvue.com/japan/Registration/
クリーク＆リバー社 LEVEL1試験直前対策講座＋LEVEL1試験
http://bit.ly/SSfPZD
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

1.1 Webの基礎知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.1.1 HTTP, HTTPSプロトコル○ 重要度：☆☆☆☆☆☆☆（7）○ HTML5を使ったコンテンツを作成するにあたって、知っておくべきHTTP,HTTPSプロトコルに関する基礎知識について問う○ ピックアップポイント

HTTPのリクエストメッセージで使用可能なメソッド
HTTPのレスポンスメッセージにおけるステータスコード
Basic認証とDigest認証

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

メソッド名説明

GET

リクエストURIで識別されるリソースを取得

HEAD

GETと同等だが、ヘッダのみを取得

POST

リクエストURIで識別されるリソースの子リソースの作成、リソースへのデータの追加などを要求

PUT

リクエストURIに対してエンティティ（メッセージボディ）に含まれる情報を保存することを要求

OPTIONS

リクエストURIがサポートしているメソッドを取得

DELETE

リクエストURIで識別されるリソースの削除を要求

TRACE

自分宛にリクエストメッセージを返却するループバック試験に使用

CONNECT

プロキシ動作のトンネル接続への変更（SSLトンネリングなど）のために使用
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

ステータスコード 概要
1xx

Information（情報）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
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

認証名

概要

Basic認証

ユーザ名とパスワードをコロン「:」で接続し、Base64でエンコードして送信することで認証を実施
盗聴や改ざんが簡単にできてしまう

Digest認証

盗聴や改ざんを防ぐため、ユーザ名とパスワードをMD5でハッシュ化
して送信し、認証を実施

より安全な認証を行うには、HTTPではなく通信路を暗号化するHTTPSを利用する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.1.2 HTMLの書式○ 重要度：☆☆☆☆☆☆☆☆（8）○ 規格に準拠したHTMLを正しく記述するために必要な書式に関する知識について問う○ ピックアップポイント

HTML5の概要
文書型宣言meta要素link要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

HTML5の概要
W3CはXHTML1.1の後、それまでのHTML／XHTML仕様と互換性のない
XHTML 2.0を推進。
ブラウザメーカーの反発からApple、Mozilla Foundation、Opera
SoftwareによりWHATWG（Web Hypertext Application Technology
Working Group）が設立。
WHATWGが提唱するWeb Application 1.0がW3Cに採用され、HTML5として共同開発されることとなった。
XHTML 2.0は2009年に開発中止に。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

HTML5の文書型宣言（何も見ずに書けるように）<!DOCTYPE html>

HTML 4.01 Strict DTD<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

文字コードの指定<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8"><meta charset="UTF-8">

検索エンジン用キーワードの指定<meta name="keywords" content="キーワード1,キーワード2">

検索エンジン用概要の指定<meta name="description" content="ページの概要を表す短文">

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

検索エンジンへの指示(インデックス/キャッシュ/リンク評価の拒否)<meta name="robots" content="noindex,noarchive,nofollow">

文書の作者の指定<meta name="author" content="作者名">

文書の主言語の指定<meta http-equiv="content-language" content="ja">
他の言語の指定 en（英語）、zh（中国語）、ko（韓国語）、de（ドイツ語）、fr（フランス語）、it（イタリア語）、es（スペイン語）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

link要素にはrel属性（リンクタイプ）とhref属性（アドレス）が必須<link rel="リンクタイプ” href="文書のURL">

link要素の代表的な属性
rel

関連文書との関係を表すキーワード（必須）href

関連文書のURL（必須）

media

外部リソースの適用メディアを表すキーワード

hreflang

関連文書の言語コード

type

外部リソースのMIMEタイプ

sizes

外部リソースがアイコンの場合の大きさ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

rel属性に指定できるキーワード（キーワードによって、リンク文書がハイパーリンクか外部リソースか決まる）
ワード

リンク 説明ワード

リンク 説明alternate HL

代替表現

next

HL

次の文書

authorHL

作者の情報

prefetchER

先読みファイル

help

HL

ヘルプ

prev

HL

前の文書

icon

ER

アイコン

searchHL

検索に使う文書

licenseHL

ライセンス情報 stylesheetER

スタイルシートファイル

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.1.3 ネットワーク・サーバ関連技術の概要○ 重要度：☆☆☆☆☆☆（6）○ HTML5のコンテンツを作るプロジェクトの一員として最低限知ってお

くべき、ネットワーク、サーバに関する知識について問う○ ピックアップポイント

プロキシ
SQL

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

Webプロキシ○ 内部ネットワークのクライアントから外部ネットワークへの接続を中継有害サイトやウィルス等のフィルタリング
キャッシュによるアクセルの高速化

リバースプロキシ○ 外部ネットワークから内部ネットワークのWebサーバへの接続を中継Webサーバが直接外部ネットワークにさらされることを防ぐ
負荷の分散に利用されることがある

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

リレーショナルデータベースを操作するための言語の1つ
主なDDL（データ定義言語）

主なDML（データ操作言語）

CREATE テーブルや制約条件などを定義

SELECT レコードを抽出

DROP

INSERT テーブルにレコードを挿入

テーブルなどを削除

DELETE レコードを削除

主なDCL（データ制御言語）
BEGIN

トランザクション開始の宣言

COMMIT

トランザクション終了の宣言

UPDATE レコードを更新

ROLLBACK トランザクションの取り消し
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.1.4 Web関連技術の概要○ 重要度：☆☆☆☆☆☆（6）○ HTML5のコンテンツを作るにあたって、要件やプロジェクトの目標、

アーキテクチャなどを理解した上で作成する際に必要になるWeb関連技
術に関する知識について問う○ ピックアップポイント

Ajax
カスタムデータ属性

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

Asynchronous JavaScript＋XMLの略○ Webブラウザ内で非同期通信と動的ページ切り替えを行う

JavaScriptのXMLHttpRequestオブジェクトによる非同期通信転送データとしてJSONが使われることが多いページ全体の再読み込みなしにコンテンツを更新できる

JavaScriptプログラミングは出題範囲外だが、JavaScriptの一般的な知識に関する問題は出題される可能性あり

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

データを格納するにふさわしい要素や属性がない場合に作成できる独自の属性
サイトの内部のスクリプトなどで利用することを想定して用意されたもの※サイトの外部から利用するためのものではない属性名は必ず「data-」ではじめる「data-」のあとに1文字以上必要
どの要素にいくつでも、任意の値で指定可能

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

カスタムデータ属性の使用例（楽曲の長さを表す）<ol><li data-duration="11m22s">木管四重奏曲第1番</li><li data-duration="08m54s">木管四重奏曲第2番</li><li data-duration="12m24s">木管四重奏曲第3番</li><li data-duration="13m16s">木管四重奏曲第4番</li><li data-duration="05m10s">木管四重奏曲第5番</li></ol>

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

1.2 CSS3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.2.1 スタイルシートの基本○ 重要度：☆☆☆☆☆☆（6）○ CSSを利用したコンテンツを作るにあたって必要な、書式やセレクタについての基本的知識について問う○ ピックアップポイント

属性セレクタ結合子（セレクタの組み合わせ）構造疑似クラス

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

[属性名][属性名="属性値全体"][属性名~="属性値の一つ"][属性名|="属性値の｢-｣区切りの前部分"][属性名^="開始文字列"][属性名$="終了文字列"][属性名*="含まれる文字列"]
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

セレクタA セレクタB Aの中に含まれるB
セレクタA>セレクタ Aの子要素であるB
セレクタA+セレクタB Aの直後にあるB
セレクタA~セレクタB Aよりも後にあるB

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

:first-child

最初の要素:first-of-type 最初の要素（同一要素）:last-child

最後の要素:last-of-type 最後の要素（同一要素）:only-child

唯一の子要素:only-of-type 同一の兄弟要素が他に無い要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

:nth-child(式)前からn番目の子要素:nth-last-child(式)後ろからn番目の子要素:nth-of-type(式) 前からn番目の子要素（同一要素）:nth-last-of-type(式) 後ろからn番目の子要素（同一要素）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.2.2 CSSデザイン○ 重要度：☆☆☆☆☆☆☆☆☆（9）○ CSSを使ったデザインを、要件やデザイン仕様に従って適切に記述する事ができるかについて問う○ ピックアップポイント

CSSデザインの出題傾向
マルチカラム背景The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

「CSSデザイン」については、CSSが提示され、継承やセレク

単独のCSSプロパティの知識をタの競合による優先度の判断が問うようなシンプルな問題に比必要な状況で、表示結果を問う

べて、より実践的な知識と理解

ようなものなどです。

を問う問題が多い傾向にありま

この点を踏まえて、全般的な知す。
例えば、サンプルのHTMLと識と理解の底上げを考えましょう。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

column-count

カラム数

column-width カラム幅
columns カラム幅とカラム数
column-gap カラムの間隔
column-rule-color カラムの区切り線の色
column-rule-style カラムの区切り線のスタイル
column-rule-width カラムの区切り線の幅
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

background-color 背景色
background-image 背景画像
background-position 背景画像の表示開始位置
background-repeat 背景画像の繰り返し方法
background-attachment 背景画像の固定・移動
background-clip

背景の適用範囲

background-origin 背景の基準位置
background-size 背景画像のサイズ
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.2.3 カスケード（優先順位）○ 重要度：☆☆（2）○ CSSにおける、カスケードの概念および、指定プロパティが衝突した場合の優先順位に関する知識について問う○ ピックアップポイント

セレクタの優先度

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

同一の要素を参照するセレクタが複数あった場合、セレクタの構成により優先されるものが決まる○ セレクタに含まれるIDが多いものが優先される○ IDが同数の場合、セレクタに含まれるクラス、属性、疑似クラスが多い

ものが優先される○ クラス、属性、疑似クラスも同数の場合、セレクタに含まれる要素、疑似要素が多いものが優先される○ 要素、疑似要素の数も同数の場合、後に定義されたものが優先される○ 要素にstyle属性で定義されるインラインスタイルは最優先される
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

1.3 要素The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.3.1 HTML4.01以前の要素および属性○ 重要度：☆☆☆☆☆☆☆（7）○ HTML4.01以前の要素に関する用途および属性も含めた記述方法に関して問う○ ピックアップポイント

フォーム：INPUT要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

フォームはHTML5で大きく変わった部分の1つです。
input要素のtype属性で指定できる値も増えました。
HTML 4.01で指定できる値は以下のものとなります。
button 汎用ボタン

checkbox

チェックボックス

submit 送信・リセットボタン password パスワード入力欄
image

画像ボタン

hidden

非表示データtext

1行テキストボックス

file

ファイル送信radio

ラジオボタン
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.3.2 HTML5で新しく加わった要素および属性○ 重要度：☆☆☆☆☆☆☆☆☆☆（10）○ HTML5で利用できる要素および属性に関して、要件に従い正しく記述するための知識について問う○ ピックアップポイント

構造化のための新要素ビデオ、オーディオ
HTML 4.01から意味が変わった要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

構造化のための新要素
section

一般的なセクションを定義する。

article新聞の記事やブログのエントリのように、それだけで転載可能な独立性の高いセクションを定義する。

aside

補足記事やコラムなど、本文と関連しているが区別して掲載したいセクションを定義する。

nav

主要なナビゲーションとしてのセクションを定義する。

headerセクションの見出し、イントロダクション、ナビゲーションなどのグループを定義する。

footer直近の祖先にあたるセクションのフッターを定義する。

main

文書のメインコンテンツを定義します。文書に2つ以上定義してはならず、
article, aside, footer, header, navの子孫にしてもいけない。

figure

本文から参照されるような図表を定義する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

video

動画の再生に利用。src属性（動画ファイル）、poster属性（動画のヒント画像）、preload属性（データの読み込み方法）、autoplay属
性（自動再生）、loop属性（ループ再生）、controls属性（操作イン
ターフェイス）などを利用できる。
フォールバックコンテンツを子として指定可能。

audio

音声の再生に利用。src属性（動画ファイル）、preload属性（データの読み込み方法）、autoplay属性（自動再生）、loop属性（ループ再生）、controls属性（操作インターフェイス）などを利用できる。
フォールバックコンテンツを子として指定可能。

sourcevideo要素やaudio要素の子として使うことで、複数のメディアファイ
ルの候補を定義可能。その場合、video要素やaudio要素にはsrc属性は指定せず、source要素にsrc属性が必須となる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

address

文書に関する連絡先情報 → 直近のarticleかbodyに関する連絡先情報に。

cite

情報の出典に関する情報（タイトル、著者など）→ 作品タイトルに限定。

b

太字表示 → 他と区別するテキスト。印刷物で太字表示されるもの。キーワー
ドや製品名などが代表例。

iイタリック表示 →他と区別するテキスト。印刷物でイタリック表示されるもの。専門用語、思考の内容などが代表例。

s

打ち消し線表示 → すでに正確でなくなった情報、関連がなくなった情報。

u

下線表示 → 伝わりにくい表記、本来とは異なる表記のテキスト。

small

テキストを小さく表示 → 注釈や細則（免責条項、警告、法的制約など）。

strong

強い強調 → 強い重要性を付加し、ネストすることでより強い重要性を表現。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.3.3 HTML5で廃止されたタグ○ 重要度：☆☆☆☆☆（5）○ HTML5で廃止になった要素、属性に関する理解について問う○ ピックアップポイント

HTML5で廃止になった要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

acronym

頭字語（各単語の頭文字を続けframeてできた略語）フレームの内容を指定

appletJavaアプレット

フレームの区切り方の定義

basefont

基準フォントの種類・色・サイ
isindex
ズの指定

1行の入力フィールド

big

大きな文字

noframes

フレームが表示できない環境用の内容

center中央揃え

strike

取消線を引いて表示

dir

ディレクトリ・リスト

tt等幅フォントで表示

font

フォントの種類・色・サイズの指定

frameset

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

1.4 レスポンシブWebデザイン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.4.1 マルチデバイス対応ページの作成○ 重要度：☆☆☆☆（4）○ 一つのソースで、複数の画面サイズが違うデバイスに対応できるWeb

ページを作成する技術に関して問う○ ピックアップポイント

レスポンシブWebデザインのメリット／デメリット

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

51

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

メリット○ 1つのURLなのでSEOの観点から有利○ 現在存在しないデバイスにもある程度対応可能○ 1ソースなので、内容の修正時にモレがないデメリット○ 設計、制作難度が高い○ 各レイアウトで、不要なコンテンツも読み込まれる可能性がある○ スマートフォンでPC向けのサイトが見られない（別途対応の必要性）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

52

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

Media Queriesとは○ CSS3仕様の1つで、デバイスの特性に応じてCSSを切り替える技術○ メディアタイプ(出力デバイス)とメディア属性(サイズや解像度の情報など)を切り替えの条件として指定可能。

HTML(link要素)での指定書式○ <link media="メディアタイプ and (メディア特性: 値)"…

>CSSでの指定書式○ @media メディアタイプ and (メディア特性: 値) { … }The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

53

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

all

すべてのデバイス

speech

読み上げ出力（CSS2.1では「aural」）

braille点字触覚デバイス

embossed

点字出力プリンタ

handheld

携帯機器(小さい画面で通信帯域が制限されたもの)

print

プリンタ

projection

プロジェクタなどの映写デバイス

screenPCやスマートフォンなどの画面

tty

固定ピッチ幅の文字グリッドを使用したメディア

tv

テレビに代表される低解像度、カラー、スクロールが制限されたカラーデバイス
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

54

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

width表示領域の幅（スクロールバーも含む）

min-width

表示領域の最小の幅（スクロールバーも含む）

max-width

表示領域の最大の幅（スクロールバーも含む）

height表示領域の高さ（スクロールバーも含む）

device-width

出力メディアの画面の幅

min-device-width

出力メディアの画面の最小の幅

max-device-width

出力メディアの画面の最大の幅

resolution

出力メディアの解像度

orientation

縦長・縦横同じ(portrait)／横長(landscape)aspect-ratio

ビューポートのアスペクト比

color

デバイスの色のビット数(カラーでない場合は0)
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

55

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験範囲とポイント

1.5 オフラインWebアプリケーション（概要とマニフェスト）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

56

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

1.5.1 オフラインWebアプリケーション（概要とマニフェスト）○ 重要度：☆☆（2）○ HTML5で作成したコンテンツをオフライン状態で動作させる方法について概要とマニフェストファイルに関して問う○ ピックアップポイント

キャッシュマニフェストの概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

57

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニフェストとは？
○ キャッシュするファイル、キャッシュしないファイル、その他関連情報の指示ファイル（テキスト形式）

キャッシュマニュフェストのルール○ 文字コードはUTF-8。改行はCR／LF／CR+LFいずれでもOK。
○ 1行目にCACHE MANIFESTと記述してキャッシュマニフェストである

ことを示す。
○ 次ページに示す3つのセクションでキャッシュするファイル、しない

ファイル、代替ファイルを指定する。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

58

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニュフェストの3つのセクション
CACHE:

キャッシュするファイルを記述するセクション。
「CACHE:」は省略可能。

NETWORK:

キャッシュしないで、オンラインから取得するファイルを記述するセクション。

FALLBACK:

キャッシュファイルが存在しない場合に表示する代替フ
ァイルを記述するセクション。

キャッシュマニュフェストファイルの拡張子は特に決められていませんが、
HTTPサーバではMIMEタイプを「text/cache-manifest」と設定しておく必要があります。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

59

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

キャッシュマニュフェストの記述例
CACHE MANIFEST

必ず1行目に記述

CACHE:
styles/default.css
images/background.png

キャッシュさせて使うファイルの指定NETWORK:
comm.cgi

常にネットから取得するファイルの指定FALLBACK:

取得失敗時の代替ファイルの指定

offline.html

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

60

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

HTMLでのキャッシュマニフェストの指定○ オフラインWebアプリケーションではHTMLファイル内でキャッシュマ

ニュフェストファイルをhtml要素に指定する○ 以下は｢sample.appcache｣というファイル名のキャッシュマニュフェ

ストを指定する例○ <html lang="ja" manifest="sample.appcache">

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

61

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

試験に向けた意識と対策

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

62

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

暗記する必要がある○ 実務上では都度調べればよいが、試験では暗記しないといけない○ 「いかにも」なところはガンバって暗記全問正解する必要はない○ 70%で合格なので、分からない問題が続いても慌てない必要に応じてサンプルを作ってみる○ CSSなどは実際に試してみることで理解が深まる部分が多々ある

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

63

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

64

Unported by the W3C; http://creativecommons.org/lic en ses/b y/3.0/© LPI-Japan 2014. All rights reserved.