OSC 2017 Tokyo / Fall

HTML5プロフェッショナル認定資格 レベ
ル1ポイント解説セミナー
2017年9月9日（土）@OSC 2017 Tokyo / Fall

吉原 健
株式会社フォーク
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2017. All rights reserved.

自己紹介
Web専門学校を卒業後、2015年に新卒で株式会社フォーク入社。
HTML/CSS/JavaScriptを用いた幅広いWeb
サイト制作業務に従事。

吉原 健

2016年12月にHTML5プロフェッショナル Lv1
取得。

24歳（1992/12/24）
HTML5プロフェッショナル Lv2取得に向け学習中。

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

2© LPI-Japan 2017. All rights reserved.

会社紹介

株式会社フォーク
＠渋谷、札幌（ HTML5アカデミック認定校）
従業員数：161名（2017年8月24日現在）
HTML5プロフェッショナル認定資格
合格者
Lv1: 38名
Lv2: 5名※2017年8月22日現在

https://www.fork.co.jp/
https://www.facebook.com/forkcorp/
研究開発サイト4009.jp
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

3© LPI-Japan 2017. All rights reserved.

本日解説する主な内容
1. HTML5プロフェッショナル認定資格とは
2. HTML5になって変わったこと
3. この資格をお勧めする理由
4. 試験概要
5. 試験のポイント
6. 学習方法・受験した感想

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

4© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とはHTML5プロフェッショナル認定資格とはThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

5© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは > 概要

HTML5, CSS3, JavaScriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定資格。

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

6© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは > 資格体系

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

7© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは > Lv.1の対象職種

Webデザイナー

グラフィックデザイナー

フロントエンドプログラマー

HTMLコーダー

Webディレクター

Webシステム開発者

スマートフォンアプリ開発者

サーバサイドエンジニア

HTMLコーダー/フロントエンドプログラマーだけではない。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

8© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは > Lv.1取得に求められるもの• HTML5を使って静的なWebコンテンツを制作することができる。
• ユーザー体験を考慮したWebコンテンツを設計・制作することができる。
• スマートフォンや組み込み機器など、ブラウザが利用可能な様々なデバイスに対応したコンテンツ制作ができる。
• HTML5で何ができるのか、どういった技術を使うべきかの広範
囲の基礎知識を有する。

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

9© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは > 人気のある資格「今後取得したい資格」の項目でNo.1!!

「今後取得したいベンダーニュートラル資格」で「HTML5プロフェッショナル認定資格」が1位、LPICが2位となった。現在必要なスキル分野というだけでなく、今後伸び続けるスキル分野として、「HTML5プ
ロフェッショナル認定資格」が高く評価されていることの証といえる。
出典：「＠IT スキル調査 2015.09」アイティメディア株式会社
http://html5exam.jp/merit/top1.html
調査期間 2015/9/29-2015/11/2 有効回答数 1,064件
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10© LPI-Japan 2017. All rights reserved.

1. HTML5プロフェッショナル認定資格とは> Web資格の中で最も求められている理由

様々な分野でHTML5が活用されている。

多くの技術者が習得したい!!

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

11© LPI-Japan 2017. All rights reserved.

2. HTML5になって変わったこと

HTML5になって変わったこと

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

12© LPI-Japan 2017. All rights reserved.

2. HTML5になって変わったこと > 概要

HTML4.01では実現が難しかったウェブアプリケーションの構築が容易になり、文書構造を明確に書けるようになった。
•動画や音声をシンプルに扱えるようになった。
•新たな属性が増え、フォーム周りの機能が強化された。
•文書構造を表すタグが増え、明確な文書構造を示すことができるようになった。
•様々なAPIが追加され、高度な機能を持ったウェブアプリケー
ションを構築できるようになった。
など
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

13© LPI-Japan 2017. All rights reserved.

2. HTML5になって変わったこと > DOCTYPE宣言

HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5<!DOCTYPE html>

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

14© LPI-Japan 2017. All rights reserved.

2. HTML5になって変わったこと > 廃止されたタグ・属性

廃止されたタグ（抜粋）<blink>

文字の点滅

<big>

大きめの文字<center>

テキストや画像等のセンタリング<strike>

取り消し線

廃止された属性（抜粋）<h1> - <h6>

align

<img>

longdesc, name, align, border, hspace, vspace<table>summary, width, frame, rules,
cellspacing, cellpadding, align, bgcolor<input>align, usemap, ismap

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

15© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由

この資格をお勧めする理由

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

16© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > Webディレクター

Webディレクター

デザイナー

サーバサイドエンジニア

フロントエンドエンジニア

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

17© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > Webディレクター

•実現可能になった技術を把握し、顧客に対してより具体的な提案ができるようになる。
•エンジニアに対して説得力のある提言ができるようになる。

コミュニケーションが円滑になり、スムーズに仕事を進めることができるため、非技術者であってもビジネススキルを向上させることができる。

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

18© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > デザイナー

Webディレクター

デザイナー

サーバサイドエンジニア

フロントエンドエンジニア

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

19© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > デザイナー•レスポンシブWebデザインにおける実現方法をイメージしながらデザインできる。
•アニメーション等の演出の実装イメージがつく。

エンジニアの作業を具体的にイメージしながらデザインを検討することができる。
演出の実現の可否の判断も可能。

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

20© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > サーバサイドエンジニア

Webディレクター

デザイナー

サーバサイドエンジニア

フロントエンドエンジニア

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

21© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > サーバサイドエンジニア•フロントエンドとの連携が以前より複雑になってきている。
（動的な処理をサーバサイドで担うか、JavaScriptで担うか等）

最適な実装方法を導き出すには、サーバサイドの人もフロントエンドの理解が不可欠。

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

22© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > フロントエンドエンジニア

Webディレクター

デザイナー

サーバサイドエンジニア

フロントエンドエンジニア

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

23© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > フロントエンドエンジニア•ネットワークやサーバのWebの基礎知識を身につけることができる。
•曖昧な理解のまま書いていたコードを、正しい文書構造でマークアップすることができる。

フロントエンドのことだけではなく、周辺の基礎知識も身につけることができるので、知識の幅が広がる。明確な認識でマークアップすることができる。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

24© LPI-Japan 2017. All rights reserved.

3. この資格をお勧めする理由 > まとめ

チーム内での共通言語が持て、さらに各々の知識の幅を広げることができるため、コミュニケーションを図りやすくなる。

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

25© LPI-Japan 2017. All rights reserved.

4. 試験概要

試験概要

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

26© LPI-Japan 2017. All rights reserved.

4. 試験概要 > 概要

試験実施方式

試験方式はコンピュータベーストテスト（CBT）※ほとんどの問題が選択式

合否結果

試験終了と同時

所要時間

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

問題数

約60問

合格ライン

約7割

受験料

￥15,000 （税別）

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

27© LPI-Japan 2017. All rights reserved.

4. 試験概要 > 出題範囲

1.1 Webの基礎知識
1.2 CSS
1.3 要素1.4 レスポンシブWebデザイン
1.5 APIの基礎知識

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

28© LPI-Japan 2017. All rights reserved.

4. 試験概要 > 出題範囲改定について（Ver1.0→Ver2.0）

2017年3月1日に出題範囲を改定
背景「HTML5プロフェショナル認定資格」の提供を始めて約3年が経過し、その間にHTML5を取り巻く環境が変化した。
・適用分野の拡大・部分技術の陳腐化
・新技術の盛り込み
これらの変化に対応する目的で、出題範囲の一部をアップデート。

http://html5exam.jp/images/outline/html5_ver2.pdf
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

29© LPI-Japan 2017. All rights reserved.

4. 試験概要 > 出題範囲改定について（Ver1.0→Ver2.0） > 改定内容

レベル1
● サーバ関連技術に関する出題が減少。
⇒ クライアント系のみの仕事をされる方に配慮した内容に改定。
● HTML5で何が出来るかの知識やWebアプリの知識を問う問題が増加。
⇒ 認定者の対象として、Webディレクターをより意識した内容に改定。

レベル2● スマートフォン等の携帯デバイスへ対応ができる技術を出題範囲に追加。
⇒ ネイティブアプリに近い機能を組み込んだ先端のWebアプリケーション開発に対応。
● セキュリティに関する出題範囲を追加。
⇒ エンタープライズ利用に対応できるセキュリティモデルの知識を求める内容に改定。

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

30© LPI-Japan 2017. All rights reserved.

5. 試験のポイント

試験のポイント

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

31© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 出題範囲

1.1 Webの基礎知識
1.2 CSS
1.3 要素1.4 レスポンシブWebデザイン
1.5 APIの基礎知識

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

32© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識

1.1 Webの基礎知識
範囲

重要度

1.1.1 HTTP, HTTPSプロトコル★★★★★★★★★★

1.1.2 HTMLの書式★★★★★★★★★★

1.1.3 Web関連技術の概要★★★★★★★★★★

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

33© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.1 HTTP, HTTPSプロトコル

1.1.1 HTTP, HTTPSプロトコル

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

34© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.1 HTTP, HTTPSプロトコル> HTTP通信

HTTP通信
①●●の情報ほしい！（HTTPリクエスト）ブラウザ②●●の情報あげる！（HTTPレスポンス）

WEBサーバ

ブラウザの開発者ツールで詳細を確認可能です。

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

35© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.1 HTTP, HTTPSプロトコル> HTTP, HTTPSの違い

HTTP, HTTPSの違い
httpsの「s」は Secure＝「安全な」という意味で、データを暗号化した状態で通信しています。
運営する側としては多少の予算がかかる場合がありますが、ユーザーからの信頼性、セキュリティ向上といったメリットがあります。
検索エンジンでは、httpsか否かがSEO評価に影響する動きを見せています。そのため、入力フォームなどがない静的なサイトでもSSLを導入するケースが増えてきています。

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

36© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.2 HTMLの書式

1.1.2 HTMLの書式

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

37© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.2 HTMLの書式> DOCTYPE宣言

DOCTYPE宣言
文書がどのバージョンのHTMLやXHTMLで作成されているかを示す記述です。
HTML5ではとてもシンプルな書き方になりましたが、ルールがあります。

ルール• 基本形は「<!DOCTYPE」＋ 1個以上のスペース ＋「HTML」＋ 0個以上のス
ペース ＋「>」。
• 大文字、小文字は問わない。
• 「HTML」は含まないといけない。

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

38© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.1 Webの基礎知識 > 1.1.2 HTMLの書式> 文字コードの指定

文字コードの指定値としてutf-8, shift_jis, euc-jpなどがあげれられます。
こちらも大文字小文字は問いません。

<meta charset="UTF-8">

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

39© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS

1.2 CSS範囲

重要度

1.2.1 スタイルシートの基本★★★★★★★★★★

1.2.2 CSSデザイン★★★★★★★★★★

1.2.3 カスケード（優先順位）★★★★★★★★★★

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

40© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.1 スタイルシートの基本

1.2.1 スタイルシートの基本

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

41© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.1 スタイルシートの基本 > セレクタ

セレクタ
たくさんの種類があります。
覚えておく必要はありますが、あまり乱用すると見づらくなり、後々修正がしづ
らくなるので、シンプルな表記を心がけて使用しましょう。
E:nth-child(n)

親要素のn番目の子要素

E:nth-of-type(n)親要素内の兄弟関係にあるE要素のn番目

E~F

E要素の後にあるすべてのF要素

E>F

E要素の子であるすべてのF要素

E+F

E要素の直後にあるF要素

E[foo]

foo属性を持つE要素など

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

42© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.1 スタイルシートの基本> nth-childとnth-of-typeの違い

nth-childとnth-of-typeの違い
div p:nth-child(5){color : red;}

div p:nth-of-type(5){color : red;}

<div><p>1つ目のpタグ</p><p>2つ目のpタグ</p><p>3つ目のpタグ</p><h6>間にh6タグ</h6><p>4つ目のpタグ</p><p>5つ目のpタグ</p><p>6つ目のpタグ</p></div><div><p>1つ目のpタグ</p><p>2つ目のpタグ</p><p>3つ目のpタグ</p><h6>間にh6タグ</h6><p>4つ目のpタグ</p><p>5つ目のpタグ</p><p>6つ目のpタグ</p></div>The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

43© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.2 CSSデザイン

1.2.2 CSSデザイン

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

44© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.2 CSSデザイン > アニメーション

アニメーション
CSS3のアニメーションにより、軽くスムーズに動作するアニメー
ションが導入しやすくなりました。
利用シーンも非常に多く、スマートフォンのハンバーガーメ
ニューの演出などにも利用できます。

メリット• JavaScriptを使わなくてもcssだけで実装ができる。
• 単純なアニメーションならJavaScriptを利用するより簡単に実装ができる。
• JavaScriptを利用したアニメーションと比べ、遜色がないパフォーマンス。（むしろパフォーマンスが優れる場合もある）

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

45© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.2 CSSデザイン > アニメーション> アニメーション実装方法 - transition

アニメーション実装方法 - transition
各transitionプロパティの値を設定してアニメーションさせる。
transition-propertytransition効果を適用するCSSプロパティ名を指定

transition-duration

変化に要する時間を指定

transition-timing-function

イージングを指定

transition-delay

変化が始まるまでの時間を指定

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

46© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.2 CSSデザイン > アニメーション> アニメーション実装方法 - @keyframes

アニメーション実装方法 - @keyframes
アニメーションの開始から終了までの任意の経過地点にプロパティを設定できる。（animationプロパティで実行）
div {animation: name 1s ease infinite alternate;}@keyframes name {0% { width: 50px; }50% { width: 100px; }100% { width: 200px; }}The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

47© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.2 CSS > 1.2.2 CSSデザイン > アニメーション > デモ

デモ

デモ： CodePen

一例）.thumbnail > img {transition: opacity 0.4s ease-out;}

JSFiddleやCodePenで実際にコードを書いてみると理解がより深まり、実務へも活かせると思います。

.thumbnail > img:hover {opacity : 0.8;}
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

48© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素

1.3 要素範囲

重要度1.3.1 要素と属性の意味（セマンティクス）★★★★★★★★★★

1.3.2 メディア要素★★★★★★★★★★

1.3.3 インタラクティブ要素★★★★★★★★★★

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

49© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素 > 1.3.1 要素と属性の意味（セマンティクス）

1.3.1 要素と属性の意味（セマンティクス）

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

50© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素 > 1.3.1 要素と属性の意味（セマンティクス）> セクショニングコンテンツ

セクショニングコンテンツ
HTML5から文書構造を明確にするタグが追加されました。
セクショニングコンテンツはセクションの範囲を定義するコンテンツです。

<article>

内容が単体で完結する。

<section>

章、節、項のような見出しとそれに関する内容を示す。
したがってh1などの見出しが必要。

<nav>

ナビゲーションを示す。

<aside>

余談、補足情報を示す。

<header>, <footer>はセクショニングコンテンツではありません。

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

51© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素 > 1.3.3 インタラクティブ要素

1.3.3 インタラクティブ要素

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

52© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素 > 1.3.3 インタラクティブ要素> インタラクティブコンテンツ

インタラクティブコンテンツ
ユーザーが操作できるコンテンツです。
<video>

動画を再生する際に使用します。
属性によって、自動再生、ループ再生、コントローラーの表示などを制御できます。
<video controls autoplay poster="image.jpg"><source src="sample.mp4"><source src="sample.ogv"><source src="sample.webm"><p>動画を再生するにはvideoタグをサポートしたブラウザが必要です</p></video><audio>

音声を再生する際に使用します。
記述の仕方はvideoタグとほぼ一緒です。
など
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

53© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.3 要素 > 1.3.3 インタラクティブ要素> インタラクティブコンテンツ > その他のインタラクティブコンテンツ

その他のインタラクティブコンテンツ
日付入力

カラー選択

<input type="date"><input type="color">

入力候補

デモ： CodePen<input type="text" list="dogs"><datalist id="dogs"><option value="ミニチュア・シュナウザー"><option value="ミニチュア・ダックスフンド"><option value="ミニチュア・ピンシャー"></datalist>
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

54© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン

1.4 レスポンシブWebデザイン
範囲

重要度

1.4.1 マルチデバイス対応ページの作成★★★★★★★★★★

1.4.2 メディアクエリ

★★★★★★★★★★

1.4.3 スマートフォンサイト最適化★★★★★★★★★★

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

55© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン> 1.4.1 マルチデバイス対応ページの作成

1.4.1 マルチデバイス対応ページの作成

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

56© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン> 1.4.1 マルチデバイス対応ページの作成 > フルードグリッド

フルードグリッド
ページ内の各ブロックを格子状のグリッドにわけ、CSSで％指定を使うことで、閲覧するデバイスの画面サイズによってレイアウトを組み替えるテクニックです。
これは実務でも非常によく使う習得必須のテクニックです。
PC

タブレット

スマートフォン

33％

50％

100％

1

2

3

1

2

1
2

3
3

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

57© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン > 1.4.2 メディアクエリ

1.4.2 メディアクエリ

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

58© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン > 1.4.2 メディアクエリ
> メディアクエリ

メディアクエリcss2でも大まかなメディア用スタイルを指定することはできましたが、スマー
トフォン、タブレットが普及されたことあり、機能が強化されました。
JavaScriptで対応する方法もありますが、メディアクエリを使えばシンプルに振り分けられます。

メディアタイプの一部
all

すべてのメディアscreen一般的なディスプレイ

tv

テレビ

print

プリンタ

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

59© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン > 1.4.2 メディアクエリ
> メディアクエリ〇メリット• 1ソース管理なのでメンテナンスが容易。
• URLが同一のためリダイレクトの設定が不要。

△デメリット• 様々なデバイスや画面幅に応じた設計をする必要がある。
• 開発工数、および難易度が上がる。

メリット/デメリットを理解したうえで最適な方法を選択することが重要です。とはいえ検索エンジン的にも推奨されているので、デメリットを軽減できるよう工夫しながら取り入れていきましょう。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

60© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.4 レスポンシブWebデザイン > 1.4.2 メディアクエリ
> メディアクエリ

ファイルを分割する場合<link href="css/style.css" rel="stylesheet" media="screen and (max-width: 320px)" >1つのファイルに記述する場合@media screen and (max-width: 320px){
ブラウザ幅が320px以下に適用}@media screen and (min-width: 321px) and (max-width: 768px){
ブラウザ幅が321px以上、768px以下に適用}@media screen and (orientation: portrait) {デバイスの向きが縦の場合}@media screen and (orientation: landscape) {デバイスの向きが横の場合}

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

61© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.5 APIの基礎知識

1.5 APIの基礎知識
範囲

重要度

1.5.1 マルチメディア・グラフィックス系API概要★★★★★★★★★★

1.5.2 デバイスアクセス系API概要★★★★★★★★★★

1.5.3 オフライン・ストレージ系API概要★★★★★★★★★★

1.5.4 通信系API概要★★★★★★★★★★

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

62© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.5 APIの基礎知識> 1.5.1 マルチメディア・グラフィックス系API概要

1.5.1 マルチメディア・グラフィックス系
API概要

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

63© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.5 APIの基礎知識> 1.5.1 マルチメディア・グラフィックス系API概要 > Canvas

Canvas
マルチメディア・グラフィックス系APIの一つとして、Bitmapデータを扱うためのCanvas APIがあります。
<canvas>要素をhtmlに配置し、JavaScriptを使用して図形や文字などを描画し、色や影をつけたり回転させたりなどが可能です。
アニメーションさせることもできますが、実際にはCanvas APIにそれらの機能はなく、JavaScriptで描画自体を繰り返して実現させます。

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

64© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.5 APIの基礎知識> 1.5.3 オフライン・ストレージ系API概要

1.5.3 オフライン・ストレージ系API概要

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

65© LPI-Japan 2017. All rights reserved.

5. 試験のポイント > 1.5 APIの基礎知識> 1.5.3 オフライン・ストレージ系API概要> オフラインウェブアプリケーション

オフラインウェブアプリケーション
オフライン状態でもウェブアプリケーションを利用できるようにするため、キャッシュマニフェストという仕様が追加されました。
ブラウザのキャッシュをコントロールし、サーバの負荷を軽減したり、オフライン時でも動作するウェブアプリケーションを作ることが可能です。

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

66© LPI-Japan 2017. All rights reserved.

6. 学習方法・受験した感想

学習方法・受験した感想

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

67© LPI-Japan 2017. All rights reserved.

6. 学習方法・受験した感想 > 学習方法

教材
• LPI-Japan HTML5認定教材を使用。

通勤時間を有効活用• 通勤時間の往復2時間を有効活用して、短期間で2周通読しました。
実際に書く• JSFiddleやCodePenなど、ブラウザ上で即座に確認できるサービスを使用し、実際にコードを書いて理解を深めました。

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

68© LPI-Japan 2017. All rights reserved.

6. 学習方法・受験した感想 > 受験した感想

試験時間は十分にあり、余裕をもって解答することが出来ました。試験
本番では30分程度時間が余り、残り時間を見直しに使用しました。
分からない問題は解答時に問題にチェックを付けておき、後で一気に見直すことができるので、あまり最初から1問に時間を掛けず、テンポよく解答を進めたほうがよいと感じました。
見直しの段階で修正した解答が多くあったので、見直しは徹底して行うことが重要だと思います。

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

69© LPI-Japan 2017. All rights reserved.

最後に
私は専門学校でHTML/CSSの基礎は学んでおりましたが、HTML5やCSS3の新機能や変更点、Webの基礎知識についての理解が浅いままでした。
この資格を取得したことで、制作にあたって積極的に発言したり、議論に参加できるようになりました。
コーディングでは文書構造に対して自信を持てるようになり、実装する手段の幅も広がりました。
また、実務に直結する知識を身につけることができるため、とてもお勧めしたい資格です。

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

70© LPI-Japan 2017. 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/

71© LPI-Japan 2017. 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/

72© LPI-Japan 2017. 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/

73© LPI-Japan 2017. All rights reserved.