LPI-Japan主催イベント

HTML5 プロフェッショナル認定試験
レベル１ポイント解説セミナー
2017年5月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 2016. All rights reserved.

本日解説する主な内容

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

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 2016. 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 2016. 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 2016. 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 2016. 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 2016. 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 2016. 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 2016. All rights reserved.

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

E
L
P

M
A
S

認定カード
E

M

M
A
S

認定者ロゴ（名刺用）
E

PL

SA

E
L
P

PL

M

SA

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

試験情報

オフィシャルサイト

http://html5exam.jp/
Twitter@html5Cert
Facebook

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 2016. 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 2016. 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 2016. 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 2016. All rights reserved.

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

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

2016年11月1日 W3C勧告

HTML5HTML5.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 2016. All rights reserved.

HTML5

HTML5.1

で何が変わったのか？

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

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

1. picture要素
2. details要素
3. summary要素
4. menu要素
5. menuitem要素

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

コンテキストメニュー

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

Demo見出しとセクションの使い方

h1〜h6要素の定義の違い

HTML4.01
XHTML1.0

HTML5HTML5.1

見出しセクションの見出し

h1が最も重要、以降重要度が低くなる

1〜6の数字はランク

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

セクションとは何か？

section要素
article要素aside要素
nav要素

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

アウトラインとは何か？
<body><h1>見出しA</h1><section><h2>見出しB</h2><section><h3>見出しC</h3></section><section><h3>見出しD</h3></section></section></body>アウトライン
1. 見出しA
1. 見出しB
1. 見出しC
2. 見出しDThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

セクショニングルートとは何か？

内部に独自のアウトラインを持つ要素。
セクショニングルートのアウトラインは、外部のアウトラインとは無関係になる。
例：blockquote要素

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

セクショニングルートとは何か？

セクションのルートになるという意味で、body要素もセクショニングルートに含まれる。

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

セクションに関する重要な仕様

POINT 1
セクション内の最初の見出しが、そのセクションの見出しとなる。

POINT 1<section><h1>見出しA</h1><h2>見出しB</h2><h3>見出しC</h3></section><section><h4>見出しA</h4><h4>見出しB</h4><h6>見出しC</h6></section>

POINT 2
最初の見出しに続く別の見出しがあった場合、前の見出しよりもランクが下なら、そこから暗黙のサブセクションが始まる。
ランクが同じか上なら前のセクションを終了させ、新しい暗黙のセクションが始まる。

POINT 2<body><h1>見出しA</h1><h2>見出しB</h2><p>・・・ </p><h3>見出しC</h3><p>・・・ </p><h2>見出しD</h2><p>・・・ </p></body>アウトライン
1. 見出しA
1. 見出しB
1. 見出しC
2. 見出しDPOINT 2<body><body><h1>見出しA</h1><h3>見出しA</h3><h2>見出しB</h2><h5>見出しB</h5><p>・・・ </p><p>・・・ </p><h3>見出しC</h3><h6>見出しC</h6><p>・・・ </p><p>・・・ </p><h2>見出しD</h2><h1>見出しD</h1><p>・・・ </p><p>・・・ </p></body></body>POINT 3
セクションの要素がある場合、そのセクションを含む最も近いセクションまたはセクショニングルートのサブセクションになる。
※見出しの数字は無視される。

POINT 3<body><h1>見出し</h1><section><h2>見出し</h2><section><h3>見出し</h3></section><section><h3>見出し</h3></section></section></body><body><h6>見出し</h6><section><h4>見出し</h4><section><h1>見出し</h1></section><section><h5>見出し</h5></section></section></body>見出しの使い方

ま と め

HTML5.1の見出しの使い方まとめ 1/2

HTML5.1の仕様としては、見出しとセクションの要素がセットで使われているなら、見出しはh1〜h6のどれを使ってもかまわないことになっている。
ただし、ブラウザや支援技術はその仕様に対応していない。

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

HTML5.1の見出しの使い方まとめ 2/2

HTML5.1では、見出しの数字はセクションの階層に合わせることを推奨している。
これに従った場合、h1要素はセクションのルート要素（body要素）に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 2016. All rights reserved.

HTML5.1の見出しの使い方まとめ<body><h1>見出し1</h1><section><h2>見出し2</h2><section><h3>見出し3</h3></section><section><h3>見出し4</h3></section></section></body>body - h1
section - h2
section - h3

section - h3

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

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

画面の解像度とCSSピクセルについて

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

ピクセル密度
ピクセル密度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 2016. 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 2016. All rights reserved.

Demo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 2016. All rights reserved.