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

レベル1

ポイント解説無料セミナー
2015年6月

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

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

0. 自己紹介中島俊治（なかしま・しゅんじ）
経歴• 岡山県生まれ• 放送大学 情報コース卒業• 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 2014. All rights reserved.

0. 自己紹介
現在• 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 2014. All rights reserved.

0. 本日のセミナ内容
HTML５プロフェッショナル試験【レベル１】ポイント解説
1.HTML5?
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/© LPI-Japan 2014. 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/© LPI-Japan 2014. All rights reserved.

1. HTML5>何？
触れてみよう！

http://bit.ly/LPI0621

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

1. HTML5>何？
１：HTML5コーディング・CSS3★
２：レスポンシブWebデザイン★
３：入力フォーム★
４：CSS3★
５：CSS３アニメーション
６：対話するWebアプリ
７：重力センサを利用したWebアプリ

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

1. HTML5>何？
HTML5には２つの定義があります。
• 広義のHTML5• 狭義のHTML5

キーワード：
HTML、CSS、Web(orホーム)ページ、W3C、HTML5、セマンティック、CSS3、JavaScript、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 2014. All rights reserved.

1. HTML5>何？

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

1. HTML5>何？

現在のWebページ

CSS

HTML
文章や（デザイン）

10

デザイン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

1. HTML5>何？

広義のHTML5
HTML5になると

HTML5

11

文章・意味付

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

1. HTML5>何？

広義のHTML5
HTML5になると

HTML5

文章・意味付

レベル１

12

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

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

キーワード：
W3C、WHATWG、IE7,8、ブラウザ

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

1. HTML5>何ができる？
• コードがセマンティックになる（コンテンツの内容をマークアップ）• マルチメディアが容易に使える（audio・video）• 入力フォームが増えた（input）• Webサイトの表現が豊かになる（CSS3・canvas）• WebサイトからWebアプリケーションへの進化（JavaScript・API）• ブラウザの違い・PCとスマホの違いを意識しなくで、ひとつのコードを書けば、利用者の端末環境にあわせた表示が可能になる（RWD・スマホ対応コード）• ハイブリッドスマホアプリが作れる
14

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

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

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

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)
カッコ内は重要度
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 2014. All rights reserved.

2. ポイント解説>出題範囲>HTML書式・HTML5新要素
HTMLの記述方法をご紹介します。

キーワード：(書式)DTD、charset、viewport(HTML5)セマンティック、header、nav、main、footer、inputのtype属性、audio、video、canvas
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 2014. All rights reserved.

2. ポイント解説>出題範囲>CSSのデザイン
CSSの記述方法をご紹介します

キーワード：
影、角丸、グラデーション、反射、CSS3アニメーション
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 2014. 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 2014. All rights reserved.

3. 勉強方法 ①
HTML5認定試験サイト
http://html5exam.jp/
合格者インタビュー
http://html5exam.jp/merit/success.html

キーワード：
HTML5認定教科書、アカデミック認定校
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 2014. All rights reserved.

3. 勉強方法 ②
レベル1合格

レベル2合格認定校で学習
独学

スタート

2222

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

3. 認定校

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

3. 東京アプリ・ワークショップ• 東京アプリ・ワークショップはHTML5講座を都内で開催中です。
HTML5攻略テキストも販売しています。
http://www.facebook.com/tokyoAppWorkShop

24

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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

Open the Future with HTML5.

25

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

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