• 検索結果がありません。

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

N/A
N/A
Protected

Academic year: 2018

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

Copied!
53
0
0

読み込み中.... (全文を見る)

全文

(1)

HTML5

認定試験

1

ン 解説無料

株式会社

工藤 考司

OSC2017 Tokyo/Spring -

LPI-Japan

(2)

紹介

・ T

ー 運営

T :

Developer Training Center

P P

HTML5

を用い We

ー ョン開発技術 研修を提供

[

教育

]

ー ン ー

| E-Learnning |

研修

| E-Learnning

+ ン

※特 例年

4

月開講

Java

Web

開発

新人向け ー ン ー

好評をい

詳細 研修事業

http://www.devtc.com

を 参照く

・ T技術研修支援受託

客様

要望 応

T技術研修を ー ー

企画・実施

研修 ン ン

作成 講師・研修会場

ン・研修

ン手配

要望 応

対応

・講師

客様 研修 開発経験豊富 講師・

講師を

・ ン ン 販売・

E-Learning

販売

弊社

E-Learning

び 研修 ン ン を提供

■教育

/

ニン

事業

■会社概要

・設立

事業内容

2000

3

29

神田

IT

技術者研修事業

/

企画

開発

販売事業

(3)

HTML5

2014

10

月 勧告

HTML

ー ョン

1999

年勧告

HTML 4.01

15

年ぶ

ー ョン

2016

11

picture

要素等 加え

HTML5.1

ー ー ョン

■広義

非常 幅広い分野

け 技術拡張を示

HTML

要素 拡張

CSS(CSS3

定義

)

JavaScript

API

・そ 他

XML

SVG

Scalable Vector Graphics

WebGL

関連技術

Web

全般

(4)

HTML5

技術要素 分野

HTML5

拡張

技術要素

以下8

分野

1

2D/3D

SVG

等 描画関連技術

2

Web Socket

ン 双方向通

技術

3

GPS

や加速度セン ー等

各種セン ー 取 扱う技術

4

音声や動画等

利用技術

5

ー や ー

保持

技術

6

ー ン

Web Workers

高速化技術

7

文書構造 定義

新 ー

要素

8

(CSS3)

CSS3

ー ョンや

ー ョン等

(5)

HTML5

認定資格

LPI-Japan

HTML5,CSS3,Javascript

最新

術力

知識

厳正

中立的

立場

認定

(6)

HTML5

認定制度 二

最新

API

を駆使

Web

ー ョ

ンを設計・開発

対応

Web

ン ン

HTML5

を使

企画・制作

対象

Web

開発者

Web

開発者

ー ー

Web

対象

Web

Web

開発者

開発者

ー ー

2017

3

1

日 出題範囲 改定がVらィさ.ご→Vらィ2.ごき 本内容

Ver2.0

HTML

ー ー

Web

(7)

HTML5

認定試験

Ver2.0

出題範囲

Wらb 基礎知識

重要度

Wらb

重要度

HTTPぐ HTTPS

8

対応 ー

作成

4

HTMば 書式

9

5

Wらb関連技術 概要

6

最適化

3

基本

7

系API概要

5

でSS

9

セ 系API概要

4

優先順位

2

ー 系API概要

8

通信系API概要

3

要素 属性 意味 セ ン

10

要素

6

要素

7

API 基礎知識

CSS3

要素

対応

Web

ン ン

HTML5

を使

企画・制作

対象

Web

Web

開発者

開発者

ー ー

(8)

HTML5

認定試験

2

Ver2.0

出題範囲

のaェaScィiァt

重要度

のaェaScィiァt文法

10

8

キュ ン

/とOM

6

8

Sら」らctんィイ API

7

6

でaをェaイが2とき

8

SVに

2

Timiをる cんをtィん」 りんィ イcィiァtけbaイらよ aをimatiんをイ

2

要素 API

5

Web Storage

7

Indexed Database API

5

ー ョン

Wらb

のaェaScィiァt API

通信

重要度

WらbSんc「らt

5

XMばHttァRらアウらイt

5

SらィェらィけSらをt どェらをtイ

1

にらん」んcatiんを API

5

とらェicらOィiらをtatiんを どェらをt

1

Wらb Wん「らィイ

5

Hiるれ Rらイん」ウtiんを Timら

2

ー ョンAPI

3

Paるら Viイibi」itオ

2

Naェiるatiんを Timiをる

1

ン制約 でORS

4

セキュ

SSば 関係

4

ー ン

セキュ

最新

API

を駆使

Web

ー ョ

ンを設計・開発

対象

Web

開発者

Web

開発者

ー ー

Web

HTML

ー ー

(9)

資格体系

Ver2.0

HTML5

認定試験

HTML5

認定試験

所要時間:

90

ン ー 等 時間 含

試験問題数:

40

45

受験料:む

15,000

税別

認定条件:

HTML5

2

試験 合格

有意

HTML5

1

認定 保有

認定 有意性 期限:

5

年間

所要時間:

90

ン ー 等 時間 含

出題数:約

60

受験料:む

15,000

税別

認定条件:

HTML5

1

試験 合格

認定 有意性 期限:

5

年間

試験実施形式

ン ュー

CBT

実施

選択方式 ほ

キー ー 入力

問題 多少出題

※ 試験

ソン

VUE

配信

(10)

認定 証明

認定カード

認定証

認定者ロゴ

名刺用

認定証・認定 ー

認定

2

週間程度

登録

住所

認定者

認定後

(11)

1.1 Web

基礎知識

1.1.1 HTTP, HTTPS

1.1.2 HTML

書式

1.1.3 Web

関連技術 概要

1.2 CSS

1.2.1

基本

1.2.2 CSS

1.2.3

優先順位

1.3

要素

1.3.1

要素 属性 意味

1.3.2

要素

1.3.3

要素

1.4

Web

1.4.1

対応 ー

作成

1.4.2

1.4.3

最適化

1.5 API

基礎知識

1.5.1

API

概要

1.5.2

API

概要

1.5.3

ー 系

API

概要

1.5.4

通信系

API

概要

ー 解説内容

Level1

出題範囲

実用

的 内容を

(12)
(13)

HTML5

加わ

ー 部品

HTML5

加わ

部品

<input type=“xxx”>

xxx

ー 部品

説明

search

入力時右側

用×

い 検索 キ

入力

表示

tel

電話番号入力

表示

url

submit

URL

形式

URL

入力

表示

email

submit

表示

形式

入力

datetime

協定世界時

日時入力

表示

date

日時入力

表示

ン ー

入力 日付形式以外入力

month

月入力

表示

week

週入力

表示

time

時間入力

表示

number

数値入力

表示 右側

ン 押

値 増減 数字以外入力

range

操作

ー 表示

color

色入力

表示 色選択

入力

(14)

ー 部品

入力値

検証

実施さ

結果

NG

い入力

表示さ

部品

url

email

使用

(15)

必須入力

ー 用属性

<input type="text" required>

■値

入力

必須

required

属性

未入力

場合

表示

(16)

入力文字数

ー 用属性

<input type="text" minlength="5" maxlength="10" >

■入力文字数

制限

minlength

属性

maxlength

属性

入力文字数

minlength

指定

文字数未満

maxlength

指定

文字数

超え

場合

表示さ

(17)

数値

/

日付 範囲

ー 用属性

<input

type=“date"

min="2015-12-01 " max="2016-01-15" >

■数値や日付

制限

min

属性

max

属性

入力値

min

指定

最小値未満

max

指定

最大

超え

場合

表示さ

(18)

正規表現

ー 用属性

<input type="text" pattern="

^[a-zA-Z]+$

"

title="

半角英字

">

■入力形式

正規表現

指定

pattern

属性

入力

形式

指定

正規表現

適合

い場

表示さ

pattern

属性

違反

場合

title

属性

指定

(19)

JavaScript

独自

ー 処理

<input type="text" id="user" onchange="checkValue();">

setCustomValidity

独自

setCustomValidity

場合

表示さ

Level.1

試験範

対象外

function checkValue() {

document.querySelector("#user").setCustomValidity("");

if (document.querySelector("#user").value == "taro"){

document.querySelector("#user").setCustomValidity("taro

既 存在

");

}

}

[JavaScript]

(20)

状況 応

定義

状況

CSS3

擬似

:valid

:invalid

input:valid {

background-color: lightsteelblue;

}

input:invalid {

background-color: lightpink;

}

invalid=

検証

NG

状態

背景色

valid=

検証

OK

(21)

そ 他

ー 関連 擬似

:valid

:invalid

以外

状態

CSS3

擬似

:in-range

min

囲内 あ 状態

max

属性 指定

:out-of-range

min

囲外 あ 状態

max

属性 指定

:required

必須入力

い 状態

required

設定

(22)
(23)

関連 要素

canvas

要素

図形描画

際 使用

2D/3D

描画 可能

audio

要素

音声 再生

際 使用

video

要素

動画 再生

際 使用

source

要素

動画や音声

URL

指定

際 使用

video

要素

audio

要素 子要素

記述

source

要素 複数記述

複数

指定

可能

track

要素

動画や音声 字幕や頭

video

要素

audio

要素 子要素

ー 設定

記述

embed

要素

外部

ー ョンや

Flash

ン 必要

HTML

文書 埋 込 際 使用

(24)

HTML5

扱え 音声形式

audio

要素

扱え

音声形式

2016

8

時点

形式

Chrome

I E

Safari

Firefox

Opera

MP3

×

Ogg

×

×

AAC

×

×

WAVE

×

×

1.MP3:

MPEG

開発

音声

規格

MPEG-1 Audio

3

拡張子

.mp3

歴史

汎用性

一般

普及

代表的

音声

形式

特許制限

2.Ogg:

Xiph.Org Foundation

規格化

音声

拡張子

.ogg

Ogg

Vorbis

ンソ

mp3

高音質

3.AAC:

ISO 13818-7

標準化さ

MPEG-2

MPEG-4

採用さ

音声

拡張子

.m4a

iTunes

使用さ

mp3

高音質

4.WAVE:

(25)

HTML5

扱え 動画形式

video

要素

扱え

動画形式

2016

8

時点

形式

Chrome

I E

Safari

Firefox

Opera

MP4 H.264

×

Ogg Vorbis

×

×

WebM

×

×

1.MP4 H.264:

MPEG-4

利用さ

高品質

動画

一般

普及

拡張子

.mp4

特許制限

2.Ogg Vorbis:

Ogg Theora

ンソ

拡張子

.ogv

3.WebM:

(26)

audio

要素

<audio controls>

<source src="audio/sample.ogg" type="audio/ogg">

<source src="audio/sample.mp3" type="audio/mp3">

<source src="audio/sample.wav" type="audio/wav">

<p>

使い

audio

</p>

</audio>

audio

要素

source

記述

確認

type

MIME

再生

可能

controls

属性

再生

(27)

video

要素

<video controls>

<source src="video/rapiro.webm" type=

video/webm;codecs=

vp8,vorbis

">

<source src="video/rapiro.mp4" type=

video/mp4;codecs=

avc1.42E01E

">

<source src="video/rapiro.ogv" type="video/ogg;codecs=

theora, vorbis

">

<p>

使い

video

</p>

</audio>

video

要素

source

記述

確認

type

MIME

並び

動画

再生

可能

controls

属性

再生

表示

(28)

audio/video

要素 属性

<audio src

=“

音声

URL”

preload

=“

下記指定値

”></audio>

<video src

=“

動画

URL”

preload

=“

下記指定値

"></video>

preload

属性

再生前

指定

音声

動画

事前

属性

事前

再生

生動作

一方

動画

再生

場合

通信

負荷

指定値

内容

none

事前 読 込 を行わ

再生時 初

読 込

metadata

再生時間

前 取得

/

auto

以外

音声

動画

を事前

読 込

(29)

audio/video

要素 属性

<audio src="

音声

URL" autoplay></audio>

<video src="

動画

URL" autoplay></video>

autoplay

属性

Web

時点

指定

音声

動画

再生

省略時

自動再生

行わ

<audio src="

音声

URL" loop></audio>

<video src="

動画

URL" loop></video>

loop

属性

自動的

再生

(30)

audio/video

要素 属性

<audio src="

音声

URL" muted></audio>

<video src="

動画

URL" muted></video>

muted

属性

(

消音

)

状態

再生

省略時

再生

行わ

<audio src

=“

音声

URL" controls mediagroup="

任意 名前

"></audio>

<video src="

動画

URL" mediagroup="

任意 名前

"></video>

mediagroup

属性

期再生さ

audio

video

要素

(31)

audio/video

要素 属性

<video src="

動画

URL" poster="

表示画像

URL"></video>

poster

属性

動画

再生前

動画

再生

い場合

表示

画像

URL

指定

(32)

embed

要素

<video controls>

<source src="video/rapiro.webm" type=

video/webm;codecs=

vp8,vorbis

">

<source src="video/rapiro.mp4" type=

video/mp4;codecs=

avc1.42E01E

">

<embed src="video/rapiro.swf" width="320px" height="300px"

type="application/x-shockwave-flash"

pluginspage="https://get.adobe.com/jp/flashplayer/">

</video>

embed

要素

利用

Flash

指定

embed

video

要素

video

未対応

古い

Flash Player

動画

再生

場合

video

対応

embed

無視

<embed src="

組 込

ン ン

URL" width="

ン ン

"

height="

ン ン

“ type="

ン ン

MIME

(33)

track

要素

<video src="video/rapiro.webm" controls>

<track src="video/tracksample.vtt" kind="subtitles"

srclang="ja" label="

字幕

" default>

</video>

track

要素

動画や音声

字幕や頭

設定

src

URL

kind

種類

次 い

指定

subtitles

: 字幕 初期値

captions

: 難聴用 字幕

descriptions

: 音声合成用

chapters

: 頭出 用

metadata

srclang

言語

ja

en

zh

(34)

track

要素

WEBVTT

00:00.000 --> 00:05.000 line:80%

rapiro

00:51.000 --> 00:55.000

!障害物 !!!

00:56.500 --> 01:14.500 line:80%

回避

ーー

(^o^)

01:37.000 --> 01:42.000

track

要素

使用

TTML(

拡張子

.ttml ) WebVTT

拡張子

.vtt

2

種類

TTML

XML

記述

WebVTT

時間帯

並べ 書

簡単

形式

WebVTT

●文字

UTF-8

冒頭

WEBVTT

●空白行

●始

時間

終わ

時間

-->

●字幕

既定

表示位置

line

(35)

JavaScript

再生

<audio id=" audioControl">

<button onClick="playAudio('audio/sample.mp3')">

視聴

</button>

JavaScript

audio

video

再生

1.

audio

video

要素

取得

2.

要素

src

再生

URL

設定

3.

要素

load

音声

実行

4.

要素

play

再生

実行

Level.1

試験範

対象外

function playAudio(audioURL){

var audioObj = document.querySelector

(“#

audioControl");

audioObj.src = audioURL;

audioObj.load();

audioObj.play();

};

(36)

URL

再生範囲指定

src="

URL#t=[

再生開始時間

][,

再生終了時間

]"

audio/video

要素

URL

再生範

指定

再生範

指定

音声や動画

CSS Sprite

1

再生

使用

高速化

src="audio/sample.mp3#t=50"

50

秒時点

最後

再生

src="audio/sample.mp3#t=15,40"

(37)

CSS3

(38)

CSS3

追加

擬似

関連以外

CSS3

追加さ

擬似

:checked

対象 要素

状態

ン 使用可能

:not()

当該要素 指定

例え

い い状態 指定

該当

い 否定

場合

:not(:checked)

:empty

対象 要素 空

(

下位要素 一切存在

)

状態

:enabled

対象 要素 使用可能 あ 状態

:disabled

対象 要素 使用不可 状態

:first-of-type

親要素

一番初

指定 要素

:last-of-type

親要素

一番最後 現

指定 要素

:nth-child()

子要素

先頭

○番目 要素

:nth-of-type()

子要素

先頭

○番目 指定要素

:nth-last-child()

子要素

末尾

○番目 要素

:nth-last-of-type()

子要素

末尾

○番目 指定要素

:only-child

親要素

存在

い 子要素

:only-of-type

親要素

存在

い 指定要素

(39)

擬似要素

■擬似要素

::

記述

う変更

CSS3

::first-letter

対象 要素

文字目

::first-line

対象 要素

行目

::before

対象 要素 直前

::after

対象 要素 直後

::marker

対象 要素

系 要素

先頭

部分

要素

前後

最初

文字

最初

要素全体

一部

対象

対象

擬似的

効果や影響

(40)

擬似

/

擬似要素 ン

tr:nth-child(odd){

background:lightblue;

}

tr:nth-child(even){

background:bisque;

}

tr>td:nth-child(2)::first-letter{

font-size:32px;

color:red;

}

input[type="checkbox"]:checked~label{

color:red;

}

input[type="checkbox"]:not(:checked)~label{

color:silver;

}

(41)

nth

系 擬似

:nth-of-type(

引数

)

要素

対象

:nth-child(

引数

)

含 全要素

対象

nth-of-type()

擬似

nth-child()

擬似

数え

n

番目

要素

選択

nth-

いう接頭値

1th 2th 3th

・・・

数値

n

換え

数値

数え 指定 数値番目 要素 対象

間隔数値

n

間隔数値

n+

数値

間隔数値

n-

数値

指定 間隔数値毎 要素 対象

例え

2n

場合

2

番目

4

番目

6

番目・・・ い

う 偶数 要素 対象

2n-1

場合 先 内容

1

引い 要素 あ

1

番目

3

番目

5

番目・・・ い

う 奇数 要素 対象

even

2n

偶数 要素 対象

odd

2n-1

奇数 要素 対象

(42)

:checked/:not()

擬似

1. input[type="checkbox"]:checked~label

2. input[type="checkbox"]:not(:checked)~label

:checked

擬似

状態

使用

:not()

擬似

()

指定

否定

[ ]

属性値

条件

指定

属性

~

要素

階層

要素

対象

CSS3

追加さ

1

状態

階層

要素

(43)

::first-letter

擬似要素

tr>td:nth-child(2)::first-letter

::first-letter

擬似要素

選択

要素

先頭文字

対象

使用

擬似

擬似要素

併用

場合

擬似

擬似要素

記述

必要

:nth-child(2)

2

列目

(44)

::before/::after

擬似要素 ン

::before

模擬要素

使用

<h4>HTML5

概要

</h4>

<ul>

<li>HTML5

</li>

<li>HTML5

形式

キュ ン

</li>

<li>HTML5

追加・廃止・変更

</li>

</ul>

<h4>HTML5

要素

</h4>

<ul>

<li>

構造化

</li>

<li>HTML5

ー 部品

</li>

<li>

属性

</li>

<li>

</li>

</ul>

<h4>CSS3</h4>

<ul>

<li>CSS

効果

</li>

CSS

h4{

counter-increment:chapter;

}

h4::before {

content:"

" counter(chapter) "

" ;

color:blue;

text-shadow:1px 1px 1px black;

}

ul{

list-style-type:none;

counter-reset:section;

}

li::before {

counter-increment:section;

content:"

§

" counter(section) ".";

border-radius:10px;

HTML

(45)

::before/::after

擬似要素

::before/ ::after

擬似要素

指定要素

前後

や画像

挿入

擬似要素

content

や画像

URL

指定

指定

要素

前後

指定

指定

一括

加え

HTML

文書

記述さ

い文字や記号等

content

使用

補助的

表示させ

い場合

使用

文字列

表示

場合

要素

::before { content:"

任意

文字列

"; }

画像

表示

場合

要素

::before { content:url(

画像

URL); }

対象要素

属性値

表示

場合

要素

::before { content:attr(

属性値

); }

表示

場合

(46)
(47)

Media Queries

Media Queries

Media Types

(

ン 等 出力先

を分岐

仕組

)

を拡張

・出力先

違い け

く 例え 同

いう

画面 解像度や

細 く

を振

分け

例え

(

)

(48)

Media Queries

記述方法

and (

属性

:

)

Media Queries

基本的

記述方法

記構文

,(

)

複数並

OR

条件

指定

属性

:

and

複数並

AND

条件

指定

先頭

否定

not

指定

Media Queries

対応

限定

only

指定

screen

print

印刷 表

projection

tv

handheld

機器 表

all

属性

width

横幅

height

device-width

物理的

横幅

device-height

物理的

resolution

解像度

(

密度

)

aspect-ratio

device-aspect-ratio

物理的

orientation

画面 横長 縦長

(49)

Media Queries

記述 ン

@media screen and (min-width:320px){

画面 横幅

320px

以上 場合

定義

}

@media screen and (min-width:768px) and (max-width:1024px) ){

画面 横幅

768px

以上

1024px

以下 場合

定義

}

@media screen and (min-width:1024px) ){

画面 横幅

1024px

以上 場合

定義

}

記述

(50)

Media Queries

記述 ン

<link rel="stylesheet" media="screen and (min-width:320px)"

href="min320.css">

<link rel="stylesheet" media="screen and (min-width:768px)

and ( max-width:1024px)" href="min768.css">

<link rel="stylesheet" media="screen and (min-width:1024px)"

href="min1024.css">

link

指定

media

属性

指定

Media Queries

条件

合致

例えば

320px

min320.css

768px

min768.css

1024px

min1024.css

(51)

最後 !

HTML5

関連

(52)

1

日目

1

Web

基礎知識

2

HTML

3

HTML5

新 い要素 属性

4

HTML5

廃止・変更

要素 属性

5

基本

1

2

日目

6

基本

2

7

CSS

8

9

対応

10

Web

ョン

HTML5

認定

試験

1

対策 ー

HTML5

勧告以前

変わ

い技術要素

Web

ン ン

Basic

JavaScript

実践

- DOM

Ajax

jQuery

Web

ン 技術

1

日目

1

Web

仕組

2

HTML

3

CSS

Cascading Style

Sheets

2

日目

3

CSS

Cascading Style

Sheets

4

JavaScript

5

HTML

CSS

JavaScript

合わ 演習

1

日目

1

Web

ン 技術

概要

2

JavaScript

基礎

2

日目

3

JavaScript

DOM

画面

制御

4

JSON

3

日目

5

Ajax

Web

ン ン

HTML5

1

日目

1

HTML5

2

HTML5

形式

キュ ン

3

HTML5

追加

4

HTML5

廃止

5

HTML5

変更

6

構造化

7

HTML5

ー 部品

8

属性

9

10 HTML Media Capture

11 CSS3

2

日目

12 CSS3

ー ョン

13 Media Queries

13 CSS3

模擬

14 HTML5

CSS3

使

総合演習

株式会社

ー・

ー ン セン ー

101-0047

東京都千代田区内神田

2-6-9

翔和鎌倉橋

2

TEL:03-3251-2226

FAX:03-3251-2227

URL

http://www.devtc.com

(53)

参照

関連したドキュメント

解析の教科書にある Lagrange の未定乗数法の証明では,

なお、相続人が数人あれば、全員が必ず共同してしなければならない(民

(2)

[r]

テナント所有で、かつ建物全体の総冷熱源容量の5%に満

第二次審査 合否発表 神学部 キリスト教思想・文化コース

 IRID(三菱重⼯担当)とVNS(通称OTL ※1 )が現在英国でロボットアームを開発中 ※2 。.

模擬試料作製、サンプリング、溶解方法検討 溶解(残渣発生) 残渣評価(簡易測定) 溶解検討試験 Fe共沈アルカリ融解