HTML5プロフェッショナル認定試験レベル1 ポイント解説無料セミナー

(1)

HTML5

認定

試験

1 無料技術セ

ー

2017

年

1 月

株式会社

・ー・ー

(2)

■会社概要

株式会社

http://www.kcc.co.jp/

● タ

IT

研修専用

http://www.kcc-itlearning.com/

■講師紹介

西日本

ンタ

ッ

IT

ン

ンタ

所属

Linux

ネッ

ワ

キ

HTML5 JavaScript

の

Web

技術

Java ASP.NET

幅広い分

の

を担当

(3)

3 ン

• HTML5

認定資格

1 試験概要

• _{技術解説項目}

1.HTML5

基礎知識

・

HTML

歴史

・

HTML5

ー

・関連技術

・

対応

・

対応

2. 新しい要素属性

・基本構文

・文書論理構造

・ン

要素

・

form

要素

3. ン・

・

CSS3

・

4.API

基礎知識

・

系

API

・

セ系

API

(4)

HTML5

認定

資格

1

(5)

5 HTML5

認定資格種類

対応し静的

Web

ンンを

HTML5

を使

ン・作成

間連携や最新

術対応し

Web

ー

ンや動的

Web

ンン

開発・設計

Ver.2.0

2017

年

3 月

1 日

(6)

資格体系

HTML5

認定試験

HTML5

認定試験

所要時間：

90 分

ンー等時間含

試験問題数：

40 ～

45 問

受験料：む

15,000

税別

認定条件：

HTML5

2 試験合格

有意

HTML5

1 認定保有

い

認定有意性期限：

5 年間

所要時間：

90 分

ンー等時間含

出題数：約

60 問

受験料：む

15,000

税別

認定条件：

HTML5

1 試験合格

認定有意性期限：

5 年間

試験実施形式

ン

ー

CBT

実施

選択方式ほ

キーー入力

問題多少出題

(7)

7 認定証明

認定カード

認定証

認定者ロゴ

名刺用

認定証・認定ー

認定

2 週間程度

登録

住所

届

い

(8)

HTML5

1 出題範囲

要

.

Webの基礎知識

.

TTP,

TTPS

コ

8 .

.

T

の書式

9 .

.

Web関連技術の概要

6 1.2 CSS3

.

タ

の基本

7 .

.

CSS

ン

9

(9)

9 HTML5

1 出題範囲

要

.

要素

属性の意味

ン

10 .

.

メ

要素

6 .

.

ンタ

要素

7 .

.

チ

対応ペ

の作成

4 .

.

メ

5 .

.

ン

最適化

3 .

ン

Web

ン

(10)

HTML5

1 出題範囲

要

.

チメ

ッ

系AP 概要

5 .

.

系AP 概要

4 .

.

ン

系AP 概要

8 .

.

通信系AP 概要

3

(11)

11 HTML5

1 傾向対策

• 幅広い出題範囲

ᵒ

出題範囲詳細を

し

す

網羅す

ᵒ

得意分野をく

• 実務則し問題

ᵒ

参考書け勉強

く実機確認す

ᵒ

CSS

ン

を作成し実際確認す

理解深

(12)

HTML5

1 傾向対策

• CBT

Computer Based Testing

試験

ᵒ

ン

ーを操作し問題解答

ᵒ

試験中問題何度繰返し参照可能

ᵒ

試験終了同時結果判明

• 出題種別

ᵒ

知識問題

ᵒ

ー

ン問題

ᵒ

記述問題

• 試験時間有効活用

ᵒ

90 分約

60 問問題

ᵒ

四者択一

五者択一複数選択記入式

3 ーン

• 問題し

読

• あやふや問題

をけ

後

解答す

(13)

技術解説項目

1. HTML5

基礎知識

・

HTML

歴史

・

HTML5

ー

・

HTML5

役割関連技術

・

対応

(14)

HTML

歴史

HTML4.01

HTML5

1989

年

XHTML1.0

XHTML1.1

XHTML2.0

2000

年

₂₀₀₁

_年

₂₀₀₉

_年

₇

_{月開発打切}

HTML5

び

Canvas 2D

関

仕様策定完了

http://www.w3.org/TR/html5

2014

年

10 月

(15)

15 HTML5

ー

CSS3

SVG

MathML

ー

API

・

Web

ソ

・

Web

ワーー

・

Web

ー

・地理位置情報

API

他

HTML5

ー

HTML5

HTML4.01

HTML5

使用

要素・属性

HTML5

削除

要素・属性

HTML5

追加

(16)

• HTML5

ᵒ

文書論理構造を定義す

• CSS3

ᵒ

見栄えを表現す

ᵒ

仕様

ー化

ー単位

実装可能

参照

CSS3

開発状況

http://www.w3.org/Style/CSS/current-work

• JavaScript

ᵒ

振舞いを与え

ᵒ

ン

ー

ン対応し

API

充実

(17)

17

• DOM

ᵒ

HTML

文書や

XML

文書を操作す

API

http://www.w3.org/DOM/Activity

• HTML

文書階層構造

上

DOM

ーし展開

• 要素や属性参照や動的編集

DOM (Document Object Model)

HTML

HEAD

BODY

H1

TITLE

DOM

ー

id="h1"

HTML5 Sample

・要素参照

element = document.getElementById(id)

・内容設定・参照

設定

element.innerHTML

キ

設定・参照

(18)

• 仕様書

非推奨

記述

く

→

UA

種類やー

ンを意識す必要

く

• 多様化対応

ᵒ

ン

Web

ン

ᵒ

ー

ン

向け

API

対応

1/2

FireFox

Google Chrome

_専用

ー

ン

ーーー

ン

実装状況

(19)

19

• _{動画や音声再生対応し要素}

ᵒ

動画再生

<video src="sample.webm" ></video>

ᵒ

音声再生

→

audio

要素

<audio src="music.ogg" ></audio>

• 対応し要素

ᵒ

図形描画

→

canvas

要素

<canvas width="300" height="200" id="canvas"></canvas>

対応

2/2

(20)

技術解説項目

2. 新しい要素・属性

・基本構文

・文書論理構造

・新しい属性

・

Video

(21)

21 例題

ン再生

ンンを埋込

使う要素し

最適切

を

選び

い

A.<video>

B.<plugin>

C.<object>

(22)

• _{大文字小文字を区別しい}

ᵒ

文書型宣言

・・・

<!DOCTYPE html>

ᵒ

文字符号化方式・・・

<meta charset="utf-8">

UTF-8

推奨

• 要素を分類

https://www.w3.org/TR/html5/dom.html#element-dfn-categories

基本構文

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>HTML5 Sample</title>

</head>

<body>

<h1>HTML5 Sample</h1>

<p>canvas

要素

ン

</p>

</body>

(23)

23

• _セ

_ン

• _{機能的意味的関連あ記述を}

文書論理構造

1/2

HTML4.01

・

div

表現

・文書論理構造あいい

HTML5

(24)

• header

ン見出や前書

文章目次

記述

• nav

※

ー

ンーやン

ー

あ

記述

• aside

※

脚注や広告

本文関連

い

区別

記述

い内容記述

• article

※ 新聞記事

文書内複数記事扱う場合各記事記述

• footer

文書作成者や著作権

情報記述

文書論理構造

2/2

header

aside

(25)

25

• video

要素

UA

機能

動画ンン

再生

ᵒ

属性

• source

要素

video

要素

動画ンン

指定

ᵒ

属性

ᵒ

記述例

• H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container

• Theora video and Vorbis audio in Ogg container

ン

ンン

1/2

src

動画ンン

URL

指定

省略可省略時

source

要素指定

controls

操作ンー

ー

表示

poster

静止画ンン

URL

loop

動画繰返再生

autoplay

動画自動再生

src

属性

ンン

URL

必須

type

属性

MIME

やー

<source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

(26)

• audio

要素

UA

機能

音声ンン

再生

ᵒ

属性

• embed

要素

ン必要

ンン

埋込

ᵒ

属性

• canvas

要素

描画

ᵒ

属性

ン

ンン

2/2

src

動画ンン

URL

指定

省略可省略時

source

要素指定

controls

操作ンー

ー

表示

preload

ンン

読込動作

loop

動画繰返再生

autoplay

動画自動再生

width

表示領域幅

src

ンン

URL

指定

type

MIME

width

表示領域幅

height

表示領域高

(27)

27 例題

以下要素説明し

正しい

をす

選択せ

<form method="POST" action="sample.php">

<label for="sid">

商品名

</label>

<input id

=“

sid

ナ

name

=“

sname

ナ

class

=“

scls

ナ

required pattern="^[0-9A-Za-z]+$" >

</form>

A. input

要素値未入力場合

ー

し

商品名

表示

B. id

"sid"

要素対し

し

商品名

form

要素

■

form

要素

id

属性

ー

ン

ー

■

input

要素

type

属性

email

RFC5322

_従

_入力

既定

_可能

ー

記述ー

date

UA

機能

ンー

表示

number

数値

min

=

最小値

max

=

最大値

color

UA

実装

ー

表示

(29)

技術解説項目

3. ン・

・

CSS3

(30)

以下

sample.html

を

ー表示し場合

ー

内背景色組合わ

せし

正しい

を選択せ

sample.html

<!doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

tr:nth-child(2n) td{ background-color : #0000ff}

tr:nth-of-type(3) td{ background-color : #ff0000}

tr:first-child td{ background-color : #00ff00}

tr[id^="test"] td { background-color : #00ffff}

</style>

</head>

(31)

31 <body>

<table border="1" id="t1">

<caption align="top">***

製品一覧表

***</caption>

<tbody id="tbody">

<tr><td>A100</td><td name="name">

PC</td></tr>

<tr id="css_test"><td>B200</td><td name="name">

ノー

PC</td></tr>

<tr><td>C300</td><td name="name">

ン

</td></tr>

<tr id="test_css"><td>D400</td><td name="name">

</td></tr>

</tbody>

</table>

<P id="kekka">

商品を選択しく

い

</P>

</body>

</html>

(32)

．緑青赤水色

．緑赤水色青

．青緑赤水色

．青赤水色青

(33)

33 css

セ

CSS3

1/3

値

用途

#idvalue

id

属性値

idvalue

要素

E F

E

要素先祖

F

要素

E > F

E

要素親

F

要素

[attribute=value]

属性名

attribute

値

value

要素

[attribute^=value]

属性名

attribute

値

value

始

要素

[attribute$=value]

属性名

attribute

値

value

終わ要素

E:nth-child(n)

n

番目子あ

E

要素

(34)

値

用途

#f00

#

始

3 桁

ーー

指定

rgb(255,0,0)

rgb( )

指定

0 ～

255 0%

～

100%

rgba(255,0,0,0.2)

rgb( )

透明度

a

(1

～

0)

加え指定

hsl(0,100%,50%)

色相彩度輝度

指定

hsla(0,100%,50%,0.2) hsl( )

透明度

a

(1

～

0)

加え指定

色指定

(35)

35

• _主

CSS3

新機能

用途

border-radius

：

n

角丸

n

･･･角の丸

の半径

box-shadow

：

a b c d

影付き文字

a

･･･水平方向の影の距離

正の値

=

右へ

負の値

=

左へ

b

･･･垂直方向の影の距離

正の値

=

へ

負の値

=

へ

c

･･･影のぼかし半径

d

･･･影の色

transform

：

scale(x,y)

拡大縮小

x

･･･

x

方向の倍率

y

･･･

y

方向の倍率

b

a

(36)

例題

を横置

(

高

幅広い表示

)

場合

CSS

を適用せ

指定し

正しい

を選択せ

A. @media screen and (orientation: landscape)

B. @media screen and (device-aspect-ratio: portrait)

C. @media screen and (scan: landscape)

(37)

37 1/2

• 種類幅高

向

解像度

ンンをン

ンす

特性基い

を容易変更

• 特性を利用し

ー

適用条

件を決定す

(38)

• /

特性

2/2

値

用途

all

print

ン

screen

画面

projection

tv

• 値

用途

width

横幅

height

高

orientation

横置

_縦置

:landscape

:portrait

device-aspect-ratio

比

水平

数

/

垂直

数

• 特性

(39)

技術解説項目

5.API

基礎知識

・

系

API

概要

・

Canvas

・

セ系

API

概要

・

ン系

API

・

WebStorage

(40)

例題

ー

ンキ

い

正しい

を選択せ

A. 内

を使

ン表示す全

ーを自動生成す

B.body

要素

appcashe

属性

URI

を指定す

C.html

要素

manifest

属性

URI

を指定す

(41)

41

• HLS

HTTP Live Streaming

ᵒ

米

開発

動画配信技術

• MPEG-DASH

ᵒ

ISO/IEC

標準化

動画配信方式

• Media Source Extensions

ᵒ

<audio>

<video>

ー

扱う

JavaScriptAPI

ᵒ

ーン配信

ー

ン機能

提供

ᵒ

W3C

勧告

2016/11/17

https://www.w3.org/TR/media-source/

(42)

• Encrypted Media Extensions

ᵒ

ンン保護

選択

ン

/

鍵交換制御

ン管理

実装

JavaScriptAPI

ᵒ

W3C

勧告候補

https://www.w3.org/TR/encrypted-media/

• Canvas

ᵒ

図形描画

ᵒ

描画

扱う

• SVG

ᵒ

W3C

規定

SVG

Scalable Vector Graphics

記述

ᵒ

描画

DOM

操作

画像

扱う

(43)

43 HTML

<canvas id="cvid" width="600" height="200" ></canvas>

JavaScript

var canvas = document.getElementById("cvid");

var ctx = canvas.getContext("2d");

ctx.beginPath();

//

の開始

ctx.moveTo(30,50);

//

直線を引く

ctx.lineTo(150,50);

ctx.lineTo(150,100);

ctx.lineTo(30,100);

ctx.closePath();

//

を終了す

ctx.strokeStyle = "rgb(290,70,88)";

//

色を指定す

ctx.stroke();

//

実際

線を引く

・

系

API

• Canvas

(44)

Canvas

要素

2/4

• CanvasRenderingContext2D

ソ

・

ソ

用途

ctx.moveTo(x,y)

指定の

標か

新規

を生成す

ctx.lineTo(x,y)

現在の

標か

(x,y)

標

の直線を描画す

書きの

メ

ctx.closePath()

を終了し

新た

を設定す

ctx.strokeStyle

=rgb(r,g,b)

描画の色を指定す

r

･･･

赤の輝

0 ～

255 g

･･･

緑の輝

0 ～

255 b

･･･

青の輝

0 ～

255 ctx.stroke()

実際

線を引く

ctx.fillStyle

=rgba(r,g,b,opaque)

塗

つぶし

透明

の設定

(45)

45

• GeolocationAPI

ᵒ

GPS

等を使用し地理位置情報を扱う

• DeviceOrientation Event

ᵒ

傾度合い詳細検出

• Touch Events

ᵒ

ンを

ーす

ンを検出す

• Pointer Events

ᵒ

入力

ンそ他

ンを検出す

(46)

• WebStorage

ᵒ

セ

ン単位

永続的

ーを保存す仕組

• Indexed Database API

ᵒ

Indexed Database

を扱う

• Application cache

ᵒ

キ

を扱う

• Web Workers

ᵒ

JavaScript

記述し

をーーー

ン

セ

動作せ仕組

(47)

47 ン

ー系

API

2/4

• WebStorage

http://www.w3.org/TR/webstorage/

ᵒ

ー

上

ーを保存す仕組

• ー

ー

… 永続的

ーを保存

• セ

ン

ー

… 一時的

ーを保存

ᵒ

ン

5M

推奨

容量を

http://html5exam.jp/

5M

ン

…

URL

キー

ー

3 組合わ

http://html5exam.jp/.jp : 80

↑

キー

ー番号

キー

ー

name

東京太郎

id

100

(48)

• Appilication Cache

ᵒ

キ

す

指定

• html

manifest

属性

ᵒ

扱いを決

URI

を指定す

ᵒ

記述例

ン

ー系

API

3/4

(49)

49

• ᵒ

扱いを決

ᵒ

セ

ン

扱い指定

ᵒ

CACHE

• 初回

ンー

際明示的キ

す

ᵒ

FALLBACK

• ソー

セ

い場合

ー

ᵒ

NETWORK

• ーー

接続し

ンーす

ン

ー系

API

4/4

(50)

HTML5プロフェッショナル認定試験 レベル1 ポイント解説無料セミナー

HTML5

認定

試験

1

無料技術セ

ー

2017

年

1

月

株式会社

・ ー・ ー

■会社概要

株式会社

http://www.kcc.co.jp/

●

タ

IT

研修専用

http://www.kcc-itlearning.com/

■講師紹介

西日本

ンタ

ッ

IT

ン

ンタ

所属

Linux

ネッ

ワ

キ

関連

HTML5 JavaScript

の

Web

技術

Java ASP.NET

幅広い分

の

を担当

3

ン

•

HTML5

認定資格

1

試験概要

•

技術解説項目

1.HTML5

基礎知識

・

HTML

歴史

・

HTML5

ー

・関連技術

・

対応

・

対応

2.

新しい要素 属性

・基本構文

・文書 論理構造

・ ン

要素

・

form

要素

3.

ン・

・

CSS3

・

4.API

基礎知識

HTML5プロフェッショナル認定試験レベル1 ポイント解説無料セミナー

・ー・ー

_{技術解説項目}

新しい要素属性

・文書論理構造

・ン

セ系

認定資格種類

対応し静的

ンンを

術対応し

ンン

ンー等時間含

試験合格

認定保有

認定有意性期限：

ンー等時間含