© 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/
HTML5プロフェッショナル認定試験
レベル１ ポイント解説セミナー
LPI-Japan主催イベント
講師：大 藤 幹
（株式会社クリーク・アンド・リバー社
認定講師）
HTML5プロフェッショナル認定試験の概要
新しい出題範囲「Ver2.0」について
HTML5 HTML5.1で何が変わったのか？
HTML5プロフェッショナル
HTML5プロフェッショナル認定資格は、
HTML5
・
CSS3
・
JavaScript
など
最新のマークアップに関する技術力と知識を
中立的な立場で認定する認定資格で、
2つのレベル
に分かれています。
© 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/
2つのレベル
マルチデバイスに対応した
静的なWebコンテンツ
をHTML5を使って
デザイン・制作できる。
システム間連携や最新のマルチメディア技術に対応したWebアプリケー
ションや
動的Webコンテンツ
の開発・設計ができる。
HTML5
Level.1
HTML5
Level.2
Markup Professional
対象となる技術の範囲
HTML/HTML5
マークアップ
グラフィックス
レスポンシブ
Webデザイン
通信・デバイス
アクセス系API
マルチメディア
ユーザビリティ
パフォーマンス
Level.1
Level.2
© 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/
レベル1試験概要
所要時間
試験問題数
試験実施方式
受験料
90分（機密保持契約とアンケートの時間を含む）
約60問
合格点
合格点は何点？
© 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/
認定証・認定カード・認定者ロゴ
認定カード
認定証
認定者ロゴ（名刺用）
SAMPLE
SAMPLE
SAMPLE
試験情報
http://html5exam.jp/
@html5Cert
https://www.facebook.com/html5exam
オフィシャルサイト
新しい出題範囲
2017年
3月1日
に出題範囲が改定され
Ver2.0
となった
2017年
8月31日
までは古い出題範囲
(Ver1.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/
Ver2.0でどう変わったのか？
クライアント系のみの仕事をしている方に配慮
し、
サーバ関連技術
に関する出題が
減少
Webディレクターの方も受験しやすいように、
HTML5で何ができるのか（
APIの知識
）を
問う問題が
増加
✔
もう一つの重要な変更点！
出題の対象となる仕様が
© 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/
出題対象となるHTMLの仕様が異なる
Ver1.0
Ver2.0
HTML5.1
HTML5
HTML5 HTML5.1
新
しく
追加
された
要素
1.
picture要素
2.
details要素
3.
summary要素
4.
menu要素
5.
menuitem要素
HTML5.1で新しく追加された要素
レスポンシブイメージ
ディスクロージャーウィジェット
使い方
© 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/
h1∼h6要素の定義の違い
HTML4.01
XHTML1.0
HTML5
HTML5.1
見出し
h1が最も重要、以降
重要度が低くなる
© 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/
セクションとは何か？
セクションは
見出しとセット
で使うのが基本。
ただし、
見出しのないセクション
もあれば、
アウトラインとは何か？
<body>
<h1>見出しA</h1>
<section>
<h2>見出しB</h2>
<section>
<h3>見出しC</h3>
</section>
<section>
<h3>見出しD</h3>
</section>
</section>
1.
見出しA
1.
見出しB
1.
見出しC
2.
見出しD
© 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/
セクショニングルートとは何か？
内部に
独自のアウトラインを持つ
要素。
セクショニングルートのアウトラインは、
外部の
アウトライン
とは無関係
になる。
セクショニングルートとは何か？
セクションのルート
になるという意味で、
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>
POINT 2
最初の見出しに続く別の見出しがあった場合、前の見出し
よりも
ランクが下なら、そこから暗黙のサブセクションが
始まる。
<body>
<h1>見出しA</h1>
<h2>見出しB</h2>
<p>・・・ </p>
<h3>見出しC</h3>
<p>・・・ </p>
<h2>見出しD</h2>
<p>・・・ </p>
</body>
POINT 2
1.
見出しA
1.
見出しB
1.
見出しC
2.
見出しD
POINT 2
<body>
<h1>見出しA</h1>
<h2>見出しB</h2>
<p>・・・ </p>
<h3>見出しC</h3>
<p>・・・ </p>
<h2>見出しD</h2>
<p>・・・ </p>
<body>
<h3>見出しA</h3>
<h5>見出しB</h5>
<p>・・・ </p>
<h6>見出しC</h6>
<p>・・・ </p>
<h1>見出しD</h1>
POINT 3
セクションの要素がある場合、
そのセクションを含む
最も近いセクションまたは
セクショニングルートのサブセクションになる
。
POINT 3
<body>
<h1>見出し</h1>
<section>
<h2>見出し</h2>
<section>
<h3>見出し</h3>
</section>
<section>
<h3>見出し</h3>
</section>
</section>
<body>
<
h6
>見出し</
h6
>
<section>
<
h4
>見出し</
h4
>
<section>
<
h1
>見出し</
h1
>
</section>
<section>
<
h5
>見出し</
h5
>
</section>
見出しの使い方
HTML5.1の見出しの使い方まとめ 1/2
HTML5.1の仕様
としては、見出しとセクションの要素が
セットで使われているなら、見出しは
h1∼h6のどれを使っ
てもかまわない
ことになっている。
© 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/
HTML5.1の見出しの使い方まとめ 2/2
HTML5.1では、
見出しの数字はセクションの階層に合
わせることを推奨
している。
HTML5.1の見出しの使い方まとめ
<body>
<h1>見出し1</h1>
<section>
<h2>見出し2</h2>
<section>
<h3>見出し3</h3>
</section>
<section>
<h3>見出し4</h3>
</section>
</section>
body -
h1
section -
h2
section -
h3
の指定方法
© 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/
