LPI-Japan主催イベント

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

講師：大 藤 幹（株式会社クリーク・アンド・リバー社 認定講師）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

この本の著者です本日解説する主な内容

HTML5プロフェッショナル認定試験の概要
新しい出題範囲「Ver2.0」について
HTML5

HTML5.1 HTML5.2での変更点

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

HTML5プロフェッショナル認定試験の概要

HTML5プロフェッショナル認定資格とは？

HTML5プロフェッショナル認定資格は、HTML5・CSS3・JavaScriptなど
最新のマークアップに関する技術力と知識を中立的な立場で認定する認定資格で、2つのレベルに分かれています。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

2つのレベルHTML5 Level.1
Markup Professional

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

HTML5 Level.2

Application Development Professional

システム間連携や最新のマルチメディア技術に対応したWebアプリケー
ションや動的Webコンテンツの開発・設計ができる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

対象となる技術の範囲
HTML/HTML5
マークアップLevel.1
Level.2

グラフィックス

パフォーマンス

Level.1

レスポンシブWebデザイン

ユーザビリティ

通信・デバイス
アクセス系API

マルチメディアJavaScript
プログラミング

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

レベル1試験概要

所要時間90分（機密保持契約とアンケートの時間を含む）

試験問題数

約60問

受験料

￥15,000（税別）

試験実施方式

コンピュータベーストテスト（CBT）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

合格点

合格点は何点？
約７割の正答率で合格
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

回答パターン

回答パターンは？
単一選択・複数選択・記述式
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

認定証・認定カード・認定者ロゴ
認定証

E
L
P

M
A
S

認定カード
E

M

M
A
S

認定者ロゴ（名刺用）
E

PLSAE
L
P

PL
M
A

S

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

試験情報

オフィシャルサイト

http://html5exam.jp/Twitter@html5CertFacebook

https://www.facebook.com/html5exam
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

新しい出題範囲「Ver2.0」について

出題範囲の変更

2017年3月1日に出題範囲が改定されVer2.0となった
2017年8月31日までは古い出題範囲(Ver1.0)でも受験可能だった

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

Ver2.0でどう変わったのか？

✔ クライアント系のみの仕事をしている方に配慮
し、サーバ関連技術に関する出題が減少✔ Webディレクターの方も受験しやすいように、HTML5で何ができるのか（APIの知識）を問う問題が増加

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. 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 2018. All rights reserved.

出題対象となるHTMLの仕様が異なる

Ver1.0Ver2.02014年10月28日 W3C勧告

2016年11月1日 W3C勧告

2017年12月14日 W3C勧告

HTML5HTML5.1

HTML5.2

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

HTML5

HTML5.1

で何が変わったのか？

HTML5.1で新しく追加された要素

HTML5.1で新しく追加された要素

1. picture要素
2. details要素
3. summary要素

レスポンシブイメージ
ディスクロージャーウィジェット

4. menu要素
5. menuitem要素

コンテキストメニュー※HTML5.2で削除
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

Demoレスポンシブイメージの指定方法

レスポンシブイメージ関連の要素と属性

New

1.

srcset属性（img要素・source要素）

New

2.

sizes属性（img要素・source要素）

New

3.

picture要素4.

source要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

img要素のsrc属性のセット

srcset属性

ピクセル密度
ピクセル密度1倍
基準=96dpi

ピクセル密度 2倍
約200dpi

ピクセル密度 4倍
約400dpi

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

srcset属性の使い方（1）<img src="pic100.jpg"
srcset="pic200.jpg 2x, pic300.jpg 3x"
width="100" height="100" alt="">The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

srcset属性の使い方（2）<img sizes="100vw"
srcset="a.jpg 400w, b.jpg 800w, c.jpg 1200w"
src="a.jpg" alt="">The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

条件別の画像サイズの複数指定

sizes属性

CSS3の長さの単位
ビューポートに対するパーセンテージをあらわす単位
単位

意味

vw

viewportのwidthに対する%

vh

viewportのheightに対する%

vmin

viewportの縦横の短い方に対する%

vmax

viewportの縦横の長い方に対する%

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

Demo条件別のさらに詳細な画像指定

picture要素
source要素pictureとsourceの使い方<picture><source media="(条件)" srcset="〜"><source media="(条件)" srcset="〜"><source media="(条件)" srcset="〜"><img src="〜" srcset="〜" alt=""></picture>
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

DemoHTML5.1 HTML5.2
で何が変わったのか？

HTML5.2で新しく追加された要素

HTML5.2で新しく追加された要素

1. dialog要素

ダイアログボックス

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

DemoHTML5.2で削除された要素

HTML5.2で削除された要素※HTML5で追加

1. keygen要素

公開鍵・秘密鍵のペアを生成

2. menu要素
3. menuitem要素

コンテキストメニュー※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 2018. All rights reserved.

HTML5.2で追加された属性

HTML5.2で追加された属性（一部抜粋）※HTML5.1で削除

1. manifest属性

キャッシュ情報のURL

2. longdesc属性

画像の詳細情報のURL※HTML5で削除

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

HTML5.2で削除された属性

HTML5.2で削除された属性（一部抜粋）

1. inputmode属性

入力モード（全角ひらがな等）※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 2018. All rights reserved.

HTML5.2のその他の仕様変更

コメントに -- が入れられるようになった<!------------>The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

<body> 〜 </body>内にCSSを配置できる

1. <link rel="stylesheet" 〜>
2. <style> 〜 </style>

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

dl要素の内容をdiv要素でグループ化できる

<dl>
<div>
<dt> 〜 </dt><dd> 〜 </dd></div><div><dt> 〜 </dt><dd> 〜 </dd></div></dl>>The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.

Open the Future with HTML5.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2018. All rights reserved.