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

(1)

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

 

レベル１ポイント解説セミナー

LPI-Japan主催イベント

講師：大藤幹

（株式会社クリーク・アンド・リバー社

認定講師）

(2)

(3)

(4)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

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

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

HTML5 HTML5.1 HTML5.2での変更点

(5)

HTML5プロフェッショナル

(6)

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

HTML5

・

CSS3

・

JavaScript

など

中立的な立場で認定する認定資格で、

2つのレベル

に分かれています。

(7)

2つのレベル

マルチデバイスに対応した

静的なWebコンテンツ

をHTML5を使って

デザイン・制作できる。

システム間連携や最新のマルチメディア技術に対応したWebアプリケー

ションや

動的Webコンテンツ

の開発・設計ができる。

HTML5

Level.1

HTML5

Level.2

Markup Professional

(8)

対象となる技術の範囲

HTML/HTML5

マークアップ

JavaScript

プログラミング

グラフィックス

レスポンシブ

Webデザイン

通信・デバイス

アクセス系API

マルチメディア

ユーザビリティ

パフォーマンス

Level.1

Level.2

(9)

レベル1試験概要

所要時間

試験問題数

試験実施方式

受験料

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

約60問

(10)

合格点

合格点は何点？

(11)

回答パターン

回答パターンは？

(12)

(13)

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

認定カード

認定証

認定者ロゴ（名刺用）

SAMPLE

(14)

試験情報

http://html5exam.jp/

@html5Cert

https://www.facebook.com/html5exam

オフィシャルサイト

Twitter

(15)

新しい出題範囲

(16)

2017年

3月1日

に出題範囲が改定され

Ver2.0

となった

2017年

8月31日

までは古い出題範囲

(Ver1.0)でも受験可能だった

(17)

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

クライアント系のみの仕事をしている方に配慮

し、

サーバ関連技術

に関する出題が

減少

Webディレクターの方も受験しやすいように、

HTML5で何ができるのか（

APIの知識

）を

問う問題が

増加

✔

(18)

もう一つの重要な変更点！

出題の対象となる仕様が

(19)

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

Ver

1.0 Ver

2.0 HTML

5.1 HTML

5 2016年11月1日 W3C勧告

2014年10月28日 W3C勧告

HTML

5.2

(20)

HTML5 HTML5.1

(21)

新

しく

追加

された

要素

(22)

1. picture要素

2. details要素

3. summary要素

4. menu要素

5. menuitem要素

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

レスポンシブイメージ

ディスクロージャーウィジェット

コンテキストメニュー

(23)

(24)

の指定方法

(25)

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

1. srcset属性

（img要素・source要素）

2. sizes属性

（img要素・source要素）

3. picture要素

4. source要素

New

(26)

srcset属性

(27)

ピクセル密度

1倍

ピクセル密度

2倍

ピクセル密度

4倍

(28)

srcset属性の使い方（1）

<

img src="pic100.jpg"

(29)

srcset属性の使い方（2）

<

img sizes="100vw"

(30)

(31)

CSS3の長さの単位

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

単位

意味

vw

viewport

の

width

に対する%

vh

viewport

の

height

に対する%

vmin

viewport

の縦横の

短い方

に対する%

(32)

(33)

picture要素

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

(34)

pictureとsourceの使い方

<picture>

<source media="(

条件

)" srcset="

∼

">

<source media="(

条件

)" srcset="

∼

">

<source media="(

条件

)" srcset="

∼

">

<img src="

∼

" srcset="

∼

" alt="">

(35)

(36)

HTML5.1 HTML5.2

(37)

新

しく

追加

された

要素

(38)

1. dialog要素

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

(39)

(40)

削除

された

要素

(41)

HTML5.2で削除された要素

1. keygen要素

2. menu要素

3. menuitem要素

公開・秘密のペアを生成

コンテキストメニュー

(42)

追加

された

属性

(43)

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

1. manifest属性

2. longdesc属性

キャッシュ情報のURL

※HTML5で削除

画像の詳細情報のURL

(44)

削除

された

属性

(45)

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

1. inputmode属性

※HTML5.1で追加

(46)

その他

の

仕様変更

(47)

コメントに -- が入れられるようになった

(48)

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

1. <link rel="stylesheet" ∼>

(49)

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

<dl>

<div>

<dt>

∼

</dt>

<dd>

∼

</dd>

</div>

<div>

<dt>

∼

</dt>

<dd>

∼

</dd>

</div>

(50)

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

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

レベル１ ポイント解説セミナー

LPI-Japan主催イベント

講師：大 藤 幹

（株式会社クリーク・アンド・リバー社

認定講師）

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

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

HTML5 HTML5.1 HTML5.2での変更点

HTML5プロフェッショナル

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

HTML5

・

CSS3

・

JavaScript

など

最新のマークアップに関する技術力と知識を

中立的な立場で認定する認定資格で、

2つのレベル

に分かれています。

2つのレベル

マルチデバイスに対応した

静的なWebコンテンツ

をHTML5を使って

デザイン・制作できる。

システム間連携や最新のマルチメディア技術に対応したWebアプリケー

ションや

動的Webコンテンツ

の開発・設計ができる。

HTML5

Level.1

HTML5

Level.2

Markup Professional

対象となる技術の範囲

HTML/HTML5

マークアップ

JavaScript

プログラミング

グラフィックス

レスポンシブ

Webデザイン

通信・デバイス

アクセス系API

マルチメディア

ユーザビリティ

パフォーマンス

Level.1

Level.2

レベル1試験概要

所要時間

試験問題数

試験実施方式

受験料

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

約60問

合格点

合格点は何点？

回答パターン

回答パターンは？

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

認定カード

認定証

認定者ロゴ（名刺用）

SAMPLE

SAMPLE

SAMPLE

試験情報

http://html5exam.jp/

@html5Cert

https://www.facebook.com/html5exam

オフィシャルサイト

Twitter

新しい出題範囲

2017年

3月1日

に出題範囲が改定され

Ver2.0

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

レベル１ポイント解説セミナー

講師：大藤幹