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

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

N/A
N/A
Protected

Academic year: 2018

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

Copied!
54
0
0

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

全文

(1)
(2)

© 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/

2

認定校

認定資格

合格者

Lv1: 27

Lv2: 5

2017

6

月現在

(3)

© 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/

3

(4)

© 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/

(5)

© 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/

5

HTML4.01

比べ

複雑

処理

容易

文書構

明確

動画や音声

扱え

属性

増え

機能

強化さ

文書構造

表す

増え

明確

文書構造

示す

様々

API

追加さ

機能

(6)

© 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/

(7)

© 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/

(8)

© 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/

8

Lv.1

(9)

© 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/

(10)

© 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/

10

(11)

© 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/

(12)

© 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/

(13)

© 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/

(14)

© 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/

14

(15)

© 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/

(16)

© 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/

16

(17)

© 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/

(18)

© 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/

18

(19)

© 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/

(20)

© 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/

20

(21)

© 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/

(22)

© 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/

(23)

© 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/

23

合否結果

(24)

© 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/

(25)

© 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/

25

(26)

© 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/

(27)

© 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/

(28)

© 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/

28

HTTP

通信

●●

情報ほしい!&

HTTP

●●

情報あ

!&

HTTP

開発者

使う

GET POST

等'や

200 404

等'

確認

(29)

© 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/

29

HTTP,HTTPS

違い

https

s

Secure

安全

いう意味

暗号化し

状態

通信し

運営す

多少

予算

セキ

検索

今後

https

評価

変わ

見せ

入力

い静的

SSL

入す

増え

(30)

© 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/

30

DOCTYPE

宣言

文書

HTML

XHTML

作成さ

示す記述

HTML5

基本形

<!DOCTYPE

1

個以

HTML

0

個以

>

大文字

文字

問わ

HTML

<!doctype

html>

<!DOCTYPE

HTML >

×

<!doctype>

html

(31)

© 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/

31

文字コ

指定

<

meta

charset

=

"UTF-8"

>

utf-8,shift_jis,euc-jp

(32)

© 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/

(33)

© 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/

33

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

(34)

© 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/

34

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

>

(35)

© 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/

35

css

実装可能

単純

JavaScript

利用す

簡単

実装

JavaScript

い人

実装

(36)

© 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/

36

機能

div

{

animation

: name

1s

ease infinite alternate

;

}

@keyframes

name

{

0%

{

width

:

50px

; }

50%

{

width

:

100px

; }

(37)

© 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/

(38)

© 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/

38

コン

HTML5

文書構造

明確

追加さ

コン

定義す

コン

あく

構造

表す

目的

使用

(39)

© 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/

39

コン

操作

コン

controls

属性

場合'

<

video

controls autoplay poster=

"image.jpg"

>

<

source

src=

"sample.mp4"

>

<

source

src=

"sample.ogv"

>

<

source

src=

"sample.webm"

>

<

p

>

動画

再生す

video

必要

</

p

>

(40)

© 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/

(41)

© 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/

41

URL

設定

1

管理

容易

1

作成す

考慮し

設計

構築し

使用し

画像

多くあ

場合

多く

(42)

© 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/

42

css2

指定す

普及さ

機能

強化さ

Javascript

対応す

方法

使えば

(43)

© 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/

43

@media

screen

and

(

max-width

:

320

px

){

320px

適用

}

@media

screen

and

(

min-width

:

321

px

)

and

(

max-width

:

768

px

){

321px

768px

適用

}

@media

screen

and

(

orientation

:

portrait

) {

場合

}

@media

screen

and

(

orientation

:

landscape

) {

場合

}

(44)

© 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/

44

1

2

3

1

2

(45)

© 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/

(46)

© 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/

46

ン状態

利用

キャ

いう仕様

追加さ

キャ

コン

負荷

軽減し

ン時

動作す

可能

(47)

© 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/

47

作成

一般的

拡張子

appcache

文字コ

utf-8

1

行目

CACHE MANIFEST

記述

指定

<

html

manifest

=

sample.appcache"

>

一般的

.htaccess

しく

MIME

text/cache-manifest

指定

(48)

© 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/

48

Canvas

API

Canvas API

<canvas>

要素

html

配置し

javascript

使用し

描画し色や影

回転させ

可能

ンさせ

実際

Canvas API

機能

javascript

描画自体

返し

実現させ

WebGL

3DCG

利用す

(49)

© 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/

(50)

© 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/

50

教材:

LPI-Japan HTML5

認定教材

使う&

くさ

教材

自分

使い

う'

実際

書く:

JS Bin CodePen

確認

使えば捗

7

割以

合格

配点

高い&重要

高い'部分

重点

(51)

© 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/

51

未経験

業界

飛び込

Web

詳しく

基本的

知識

浅い

試験

知識

Web

対し

理解

実務作業

知識

是非

(52)

© 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/

(53)

© 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/

(54)

© 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/

54

参照

関連したドキュメント

In this section, we establish some uniform-in-time energy estimates of the solu- tion under the condition α − F 3 c 0 &gt; 0, based on which the exponential decay rate of the

In section 2 we present the model in its original form and establish an equivalent formulation using boundary integrals. This is then used to devise a semi-implicit algorithm

Theorem 4.8 shows that the addition of the nonlocal term to local diffusion pro- duces similar early pattern results when compared to the pure local case considered in [33].. Lemma

Kilbas; Conditions of the existence of a classical solution of a Cauchy type problem for the diffusion equation with the Riemann-Liouville partial derivative, Differential Equations,

This paper develops a recursion formula for the conditional moments of the area under the absolute value of Brownian bridge given the local time at 0.. The method of power series

The study of the eigenvalue problem when the nonlinear term is placed in the equation, that is when one considers a quasilinear problem of the form −∆ p u = λ|u| p−2 u with

Classical Sturm oscillation theory states that the number of oscillations of the fundamental solutions of a regular Sturm-Liouville equation at energy E and over a (possibly

We will study the spreading of a charged microdroplet using the lubrication approximation which assumes that the fluid spreads over a solid surface and that the droplet is thin so