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

株式会社ケイ・シー・シー
福田 浩之
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

講師プロフィール■会社概要
株式会社ケイ・シー・シー
http://www.kcc.co.jp/■講師紹介
西日本センターユニット ITラーニングセンター所属
Linux、ネットワーク、セキュリティ関連、HTML5、JavaScriptなどのWeb技術、Java、Android、iPhoneコースなど幅広い分野のセミナーを担当。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

アウトライン1. HTML5プロフェッショナル認定資格 レベル1
試験概要

2. 技術解説項目

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5プロフェッショナル認定
資格 レベル1
試験概要

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5プロフェッショナル認定資格の種類

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

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

レベル１とレベル２の資格体系
HTML5プロフェッショナル認定試験レベル１

所要時間：90分（アンケート等の時間を含む）
出題数：約60問
受験料：¥15,000 （税別）
認定条件： HTML5 レベル1試験の合格
認定の有意性の期限：5年間

HTML5プロフェッショナル認定試験レベル２

試験実施形式
コンピュータベーストテスト（CBT）で実施します。
マウスによる選択方式がほとんどですが、キーボード入力問題も多少出題されます。
※ 試験は「ピアソンVUE」より配信されています。
6

所要時間：90分（アンケート等の時間を含む）
試験問題数：40～45問
受験料：¥15,000 （税別）
認定条件：HTML5 レベル2試験に合格し、かつ有意なHTML5レベル1認定を保有していること。
認定の有意性の期限：5年間
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

認定の証明認定証

認定カード

認定者ロゴ（名刺用）
認定証・認定カードは、認定されてから2週間程度でご登録されたご住所にお届けしています。
7

認定者ロゴは、認定後すぐに名刺等でご利用していただけます。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5 レベル1

傾向と対策

• 幅広い出題範囲

ᵒ 出題範囲詳細をもとにして、すべて網羅する
ᵒ 得意分野をつくる• 実務に則した問題

ᵒ 参考書だけの勉強ではなく、実機で確認する
ᵒ CSSなどはサンプルを作成し、実際に確認することで理解が深まる• HTML5レベル1対応 認定教材

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

HTML5 レベル1

傾向と対策

• CBT（Computer Based Testing）試験
ᵒ コンピュータを操作して問題に解答
ᵒ 試験中、問題は何度も繰り返し参照可能
ᵒ 試験終了と同時に結果が判明• 試験時間の有効活用

ᵒ 90分で約60問の問題
ᵒ 四者択一または五者択一、複数選択、記入式の3パターン• 問題はしっかり読む• あやふやな問題はチェックをつけて、後から解答する• 全体的に見直す時間を確保する

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

技術解説項目
1.CSSデザイン
2.要素と属性の意味（セマンティクス）
3.メディアクエリ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

1.CSSデザイン• 重要度
重要度★★★★★★★★★ 9• 望まれるスキル
要件に沿ったデザインをCSSを利用して実現する際に、どのような実現方法が適切か判断でき、仕様に沿った正しいコードを記述する事ができる。

• ポイント解説CSSセレクタ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
以下のsample.htmlファイルをブラウザーで表示した場合、テーブル内背景色の組み合わせとして、正しいものを選択せよ【sample.html】<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>tr:nth-child(2n) td{background-color : #0000ff}
tr:nth-of-type(3) td{background-color : #ff0000}
tr:first-child td{background-color : #00ff00}
tr[id^="test"] td {background-color : #00ffff}</style>次のページに続く</head>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題<body><table border="1" id="t1"><caption align="top">*** 製品一覧表 ***</caption><tbody id="tbody"><tr><td>A100</td><td name="name">デスクトップPC</td></tr><tr id="css_test"><td>B200</td><td name="name">ノートPC</td></tr><tr><td>C300</td><td name="name">プリンタ</td></tr><tr id="test_css"><td>D400</td><td name="name">マウス</td></tr></tbody></table><P id="kekka">商品を選択してください。</P></body></html>The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
Ａ．緑、青、赤、水色
Ｂ．緑、赤、水色、青Ｃ．青、緑、赤、水色
Ｄ．青、赤、水色、青The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

ＣＳＳセレクタ値

用途#idvalue

id属性の値がidvalueの要素

E F

E要素を先祖にもつすべてのF要素

E>F

E要素を親にもつF要素[attribute=value]

属性名attributeの値がvalueをもつ要素[attribute^=value]

属性名attributeの値がvalueから始まる要素[attribute$=value]

属性名attributeの値がvalueで終わる要素

E:nth-child(n)n番目の子であるE要素

E:nth-of-type(n)n番目のE要素と同じ型の要素

E:first-child

最初の子要素であるE要素
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

色指定
値

用途

#f00

# で始まる3桁のカラーコードで指定

rgb(255,0,0)rgb( ) による指定 （0～255）または（0%～100%）rgba(255,0,0,0.2)

rgb( )に透明度「a」(1～0)を加えた指定

hsl(0,100%,50%)

色相、彩度、輝度による指定

hsla(0,100%,50%,0.2) hsl( )に透明度「a」(1～0)を加えた指定
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2.要素と属性の意味（セマンティクス）• 重要度
重要度★★★★★★★★★★ 10• 望まれるスキル
HTML要素や属性のセマンティクスを理解し、コンテンツの意味を解釈しながら適切なHTML要素や属性を使ってHTMLコーディングができる。

・ポイント解説
フォーム：input要素の属性

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
以下の要素の説明として、正しいものをすべて選択せよ<form method="POST" action="sample.php"><label for="sid">商品名</label><input id=“sid” name=“sname” class=“scls”
required pattern="^[0-9A-Za-z]+$" ></form>A. input要素に値が未入力の場合、プレースホルダとして「商品名」が表示される
B. idが"sid"の要素に対して、ラベルとして「商品名」が関連付けられる
C. input要素には半角英数字を入力しなければならない
D. input要素のtype属性が省略されているためエラーとなる
E. input要素の入力は必須である
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

input要素の属性
属性

役割

autofocus

自動的にフォーカスを合わせる

placeholder

入力欄に初期値として表示される

required

入力必須

pattern

入力値のパターンを正規表現で指定する

max/min

最大値/最小値
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

input要素のtype属性に追加された値
値

用途

値

用途

tel

電話番号入力フィールド

number

数値入力フィールド

url

url入力フィールド

range

範囲入力フィールド

email

e-mail入力フィールドcolor

色入力フィールド

date

日付入力フィールド

search検索フィールド

time

時刻入力フィールド
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3.メディアクエリ
• 重要度
重要度★★★★★ 5• 望まれるスキル
メディアクエリを利用して、画面サイズなどの様々な環境に合わせて表示を変えるページを作成する事ができる。

・ポイント解説
メディアクエリ
メディア特性The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

例題
デバイスを横置き (高さより幅が広い表示)の場合に、CSSを適用させるメディアクエリの指定として、正しいものを選択せよ。
A. @media screen and (orientation: landscape)B. @media screen and (device-aspect-ratio: portrait)

C. @media screen and (scan: landscape)D. @media screen and (width: portrait)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

メディアクエリ• デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できる• メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定する

横幅410以上

横幅410未満

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

メディアタイプ/メディア特性@media メディアタイプ

{ メディア特性：値 }• メディア特性• メディアタイプ

値

用途

値

用途

all

すべてのデバイス

width

横幅

print

プリンタ

height高さ

screen画面

orientation

projection

プロジェクタ

横置き :landscape
縦置き :portrait

deviceaspect-ratio

アスペクト比水平ピクセル数 / 垂直ピクセル数

scan

テレビの走査方式

tv

テレビ

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.