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

レベル1

ポイント解説セミナー
2015年9月

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

自己紹介
中島俊治（なかしま・しゅんじ）
経歴• 岡山県生まれ• 放送大学 情報コース卒業• 96年上京、SoftBank、GeoCities JAPAN、Yahoo! JAPAN、Vector、SBIホールディングス、ジョインベスト証券等を経て独立

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

自己紹介
現在• HTML5プロフェッショナル認定資格(レベル２)合格• マイクロソフトMVPアワード 受賞• 放送大学 情報コース 専門科目「HTML5入門」 講師(他2校)• デジハリ・オンラインスクール 講師• 京都コンピュータ学院 講師• (HTML５認定校)東京アプリ・ワークショップ 運営・講師• schoo Webキャンバス 先生

3

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

本日のセミナ内容
HTML５プロフェッショナル試験【レベル１】ポイント解説
1.レベル１の資格概要・ポイント解説（実演）2.HTML5とは
3.試験に向けての勉強方法

本セミナーは試験対策ではなく、試験概要のご説明及びポイント解説です。

4

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

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

1-1. 資格概要>レベル1、レベル2

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

システム間連携や最新のマルチメディア術に対応した Webアプリケーションや動的Webコンテンツの開発・設計ができる。

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

1-2. 資格概要>HTML5の特徴
HTML5マークアップ• 記述が簡単になった。
• 文章の構造化が強化された。
• 入力フォームの部品や機能が増えた。
• 動画や音声の実装が多少楽になった。
• グラフィック的な表現が豊かになった。
• スマートフォンと親和性があるCSS3• リッチなデザインが画像を使わなくてもコーディングで可能になった。
• アニメーションや3次元の表現が可能になった。
7

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

1-3. 資格概要>ポイント解説

試験ではコードリーディング形式での出題もあります。
ですので丸暗記では合格がむずかしいと思われます。
みなさんには、ぜひ実際に手を動かして覚えていただきたいので、実際にコーディングをしながら静的なWebコンテンツの説明をします。

8

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

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

2-1. HTML5とは>いつから？
W3Cから、2014年10月28日に正式勧告

10The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-2. HTML5とは>ふたつの定義

HTML5には２つの定義があります。
広義のHTML5狭義のHTML5

11

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-2. HTML5とは>狭義のHTML5

昔のWebページHTML
文章やデザイン12

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-2. HTML5とは>狭義のHTML5

現在のWebページ

CSS

HTML
文章や（デザイン）

13

デザイン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-2. HTML5とは>広義のHTML5

広義のHTML5
HTML5になると

HTML5

14

文章・意味付

CSS3

JavaScript

デザイン

プログラム（動き・制御）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

API

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-2. HTML5とは>広義のHTML5

広義のHTML5
HTML5になると

HTML5

文章・意味付

レベル１

15

CSS3

JavaScript

デザイン

プログラム（動き・制御）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

API

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-3. HTML5とは>JavaScript

広義のHTML5
HTML5になると

HTML5

文章・意味付

レベル２

16

CSS3

JavaScript

デザイン

プログラム（動き・制御）
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

API

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-3. HTML5とは>JavaScript
レベル1: マルチデバイスに対応した静的なWebコンテンツを、HTML5を使ってデザイン・作成できる。

レベル2:

システム間連携や最新のマルチメディア術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

17

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-3. HTML5とは>JavaScript• WebサイトからWebアプリケーションへの進化する• ブラウザの違い・PCとスマホの違いを意識しなくで、ひとつのコードを書けば、利用者の端末環境にあわせた表示が可能になる• ハイブリッドスマホアプリが作れる

18

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

2-3. HTML5とは>JavaScript

JavaScriptで操作する機能の例を示します。
• DOM（動的コンテンツ書換）• マルチメディア操作• タッチイベント、重力加速度• データ保存• 通信• 位置情報(GPS)19

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. 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/© LPI-Japan 2015. All rights reserved.

3-1. 勉強方法>試験の対象者

プロフェッショナルな資格ですが、デザイン・Web・開発に関わる幅広い職種を対象としています。
• Webデザイナー• グラフィックデザイナー• フロントエンドプログラマー• HTMLコーダー• Webディレクター
• Webシステム開発者• スマートフォンアプリ開発者
21

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-2. 勉強方法>出題範囲
1.Webの基礎知識

2.CSS3

4.レスポンシブデザイン• HTTP・HTTPSプロト• 基本(6)• マルチデバイス対応(4)• CSSデザイン(9)• メディアクエリ(4)• カスケード(優先順位)(2)• スマホサイト最適化(3)3.要素

5.オフラインWebアプリ• HTML4.01以前(7)• 概要とマニフェスト(2)コル(7)• HTMLの書式(8)• ネットワーク・サーバ技術(6)• Web技術(6)• HTML5の新要素・属性(10)• HTML5での廃止タグ(5)
カッコ内は重要度
22

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-3. 参考サイト
HTML5認定試験サイト
http://html5exam.jp/
合格者インタビュー
http://html5exam.jp/merit/success.html

23

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-4-1. 私が勉強した方法
レベル1合格

レベル2合格

独学

スタート

2424

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-4-2. オススメの勉強方法
レベル1合格

レベル2合格認定校(15校)で学習

スタート

2525The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-5. 認定校

26

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.

3-6. 東京アプリ・ワークショップ• 東京アプリ・ワークショップはHTML5講座を開催中です、関西からも東京へおいでになっている方もいらっしゃいますが、お声がけいただければどこででも参ります。

http://bit.ly/tokyoAppWorkShop

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

Open the Future with HTML5.

28

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2015. All rights reserved.