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

(1)

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

HTML5

認定試験

1 ン解説無料

ー

2017

年

1 月

LPI-Japan

主催

講師

:

鈴木雅貴

(2)

自己紹介

• _鈴木雅貴

(

)

ᵒ

NTT

ソ

株式会社

(

HTML5

認定校

)

ᵒ

HTML5

推進室所属

ᵒ

HTML5

認定校

ー

講師

ᵒ

1 β試験

認定取得

•

1 試験対策本執筆

(

株式会社

出版

)

• _弊社技術

VR

記事連載中

(3)

本日話

• 試験

い

ᵒ

試験概要・範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

ᵒ

ン

Web

ー

ン

• 学習進方

Ver1.0

(4)

(5)

試験概要

• 公式

情報あ

ᵒ

http://html5exam.jp/outline/

• JavaScript

出

ᵒ

_、

JavaScript

何

や、使い方

範囲含

、知

い方

い

う

(6)

試験範囲

• 公式

情報あ

、 …

ᵒ

http://html5exam.jp/outline/objectives_lv1.html

(7)

試験範囲広い

• 時間限

い

、本日広い試験範囲

学習

上

情報

ン

持

帰

う

目的

• (X)HTML4.01/CSS2.1

試験範囲

含

、

解説一部除省略

い

(8)

(9)

HTML5

• HTML4.01

、静的

Web

ー

作成

あ

• _、

Web

世界、

多種多様

実行

ー

ン

ー

求

い

• HTML5

実現

策定

仕様

(10)

HTML5

狭義広義

• 狭義

HTML5

、

W3C

勧告

HTML5

仕様

ᵒ

A vocabulary and associated APIs for HTML and XHTML

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

• 広義

HTML5

、狭義

HTML5

仕様

、

CSS

や各種

JavaScript API

群含

ᵒ

あ

広大

、

W3C

技術分野

8 分類

整理

• ン

/

ン

&

ー

/3D,

,

/

ーン

&

ン

ー

ン

/

ネ

/CSS3

(11)

(12)

(13)

Web

基礎知識

い

• http://html5exam.jp/outline/objectives_lv1.h

tml#lv1_11

• 一見

HTML5

関係薄いう思え

、

HTML5

、

/

ー・

Web

・ー

/

ネ

ワー

ン

、自分担当

部分

自

領域越え知識やキ

(14)

ン

• Web

う仕組

Web

表示

把握

ᵒ

IP, DNS, TCP, HTTP

• _キ

2 種

(15)

Web

(16)

登場人物

• PC:

略

• Web

: PC

や

上動作

、

Web

閲覧用

(

以降

)

• ー

ン

:

ー

ン動作

ン

ー機器

• Web

ー

:

ー

ン上

Web

提供

ーソ

• 概要説明

PC

ーバ

ン

(17)

対象

Web

ー

い

• 対象

Web

ー

う識別

?

ᵒ

ネ

ワー上

無数

ー

存在

• IP

使う

ᵒ

192.0.43.10 う数字羅列

ᵒ

IP

住所代わ

目的

ー

送信

ᵒ

仕組

(

機器同士通信

)

規定

い

IP(Internet Protocol)

ᵒ

IP

情報目的地

届

PC

ーバ

ン

192.0.43.10 Web

ーバ

(18)

君

IP

覚えい

？

• 普段

IP

入力

• DNS(Domain Name System)

使う

ᵒ

"example.com"

う

ン名

呼

名前付、

IP

紐

覚えや

(

仕組

DNS)

ᵒ

DNS

ー

聞

紐い

IP

わ

(

名前解決

)

ᵒ

詳

JPNIC

ン名

https://www.nic.ad.jp/ja/dom/system.html

PC

ーバ

ン

example.com

192.0.43.10 Web

ーバ

(19)

Web

ー

？

• Web

ー以外

ー

ᵒ

ー

ン

SSH

ー

動作

、

IP

Web

ー

識別

い

• ー番号

使う

ᵒ

ー

既定

ー番号指定

(Web

ー

80 番

)

ᵒ

あ

ー

ン間通信仕組

規定

い

TCP(Transmission Control Protocol)

ᵒ

TCP

IP

利用

通信路確立

、

うえ情報や

ᵒ

TCP

ー

や再送

、

情報確実送

仕組

あ

PC

ーバ

ン

example.com

192.0.43.10 Web

ーバ

(80)

192.0.43.10:80

へ

!

(20)

ー番号、指定

？

• 普段

ー番号入力

い

• URL

通信

(

ー番号

)

指定

い

ᵒ

"http://example.com/"

http://

、

HTTP(HyperText

Transfer Protocol)

使

通信宣言

い

ᵒ

HTTP

80 番ー

使用

(

前述

Web

ー

80 番同意

)

、

80 番ー

指定

• Web

ー

無事

PC

ーバ

ン

example.com

192.0.43.10 Web

ーバ

(80)

http://example.com/

へ

!

(21)

ンン

ー

取得

• HTTP

ンン

取得

1. 確立

TCP

通信路上、

Web

ー

、

x.html

いいう

送信

2. Web

ー

ン

x.html

中身返

3. TCP

確立

通信路閉

4. x.html

表示

PC

ーバ

ン

example.com

192.0.43.10 Web

ーバ

(80)

http://example.com/x.html

x.html

くさい

x.html

す

見え

!

(22)

HTTP

ー

ン

(1)

• HTTP

ー

分

ᵒ

や

ン

う

示情報格納

い

• ンやー

処理必要重要情報

ᵒ

ー送信時

ー

格納

箇所

• 使用可能

ソ

(

書

)

ソ

名

説明

GET

ーバ

指定

URI

ソーを取得

POST

ン

ーバへーを送信

送信後ーバ

ー

送

こ

あ

PUT

ーバ指定

URI

ーを保存

HEAD

GET

同様

取得

OPTIONS

指定

URI

ーすメソ

を取得

DELETE

指定

URI

ソー削除

TRACE

ーバ

ネ

ワー経路

(23)

HTTP

ー

ン

(2)

• _ン

_ー

(

書

)

ᵒ

結果

う

情報、

3 数字書

い

ー

概要代表例

1xx

ーバ側情報

100: Continue

2xx

成功

200: OK

3xx

転送

301: Moved Parmanently / 304: Not Modified

4xx

ン

ー

400: Bad Request / 401: Unauthorized / 403: Forbidden / 404: Not Found

5xx

ーバ

処理

ー

(24)

(25)

キ

2 種

• キ

Web

等

ン

Web

ー

通信中継

• Web

キ

(

ン側配置

)

ᵒ

ン

ンーネ

直接続防止

ᵒ

キ

速度向上

• ー

キ

(Web

ー側配置

)

ᵒ

Web

ー

ンーネ

直接続防止

ᵒ

Web

ー

負荷分散処理

ン

(web

)

Web

キ

内部ネ

ワー

内部ネ

ワー

ー

キ

外部ネ

ワー

(26)

(27)

要素

い

• http://html5exam.jp/outline/objectives_lv1.h

tml#lv1_13

• HTML5

、

HTML4.01

以前対象

い

• Ver1.0

HTML5

、

Ver2.0

HTML5.1

対象

(28)

学習

ン

• HTML4.01

押えうえ、

5 変更点学

• _{何変わ}

_？

ᵒ

定型句

ン

い

ᵒ

要素意味

い

(

ン

)

ᵒ

的機能排除

い

ᵒ

新いン

ーや機能使え

う

い

2.0

(29)

定型句

ン

• _{文書型宣言}

• _{文字ンー}

_ン

• _他

_あ

_{、いい楽}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html>

HTML4.01 Transitional

HTML5

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

<meta charset="UTF-8">

HTML4.01 Transitional

(30)

定型句

ン

• _え

_{う感}

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>

タ

トル

</title>

<link rel="stylesheet" href="css/style.css">

<script src="js/script.js"></script>

</head>

<body>

…

コンテン

(31)

要素意味持

う

• ン

明示

要素

ン

意識

作成

可能

• ン

ᵒ

文書一区分

ᵒ

ン

一階層形成

• _ン

ᵒ

HTML

文書

う

ᵒ

ン

ー

1. あああ

2. いいい

(32)

ン明示

要素

• 以下要素

ン明示

• ン明示

い関連

要素

要素名

説明

section

一般的

ンを表し、見出し

使用

article

単体完結

ン

(1

ー

含

内容

)

aside

あ

ンン

関係しい

、切離せ

バー、広告

nav

主要

ビー

ン

body

要素名

説明

h1~h6

ン見出し

header

ン

footer

ン

(33)

ン関連要素配置例

header

footer

nav

article

aside

section

(34)

ン生成例

• _以下

HTML

あ

• _{ン確認}

_う

ᵒ

validator.nu

http://validator.nu/

<body>

<h1>Apples</h1>

<p>Apples are fruit.</p>

<section>

<h2>Taste</h2>

<p>They taste lovely.</p>

<section>

<h3>Sweet</h3>

<p>Red apples are sweeter than green ones.</p>

</section>

<section>

<h2>Color</h2>

<p>Apples come in various colors.</p>

</section>

</body>

(35)

意味

• 構造

ー

読解助

人々大

利点

ᵒ

いわ

向上

• _{ーン}

_ー

_提供

_い

大

ン

ᵒ

誰

使え！

• 構造

う

！いう答えあわ

い

ᵒ

構造

作成者主張反映

(36)

的機能排除

• HTML

５要素

、要素

び属性

指定機能排

除

い

ᵒ

指定基本

CSS

や

• 廃止

要素例

: big, center, font, strike, tt

ᵒ

排除

主要理由以下

• 低下

• ン

ン

増加

• 文書

増大

ᵒ

残

style

要素

び属性

• 的機能要素一部機能再定義

い

ン

(37)

新いン

ーや機能

• ー

input

要素使え

type

属性大幅増加

ᵒ

http://www.w3.org/TR/html5/forms.html#state

s-of-the-type-attribute

• HTML

ンン

再生

audio

要素

/video

要素

• ン使用

画像描画

canvas

要素

(38)

他

ン

• HTML4.01

HTML5

変更点押え

ᵒ

_新規追加

_要素

ᵒ

_変更

_{要素・属性}

ᵒ

_削除

_{要素・属性}

• _各要素

_把握

ᵒ

http://www.w3.org/TR/html5/dom.html#kinds-of-content

ᵒ

http://www.w3.org/TR/html5/index.html#element

-content-categories

ᵒ

_{ンン}

_覚え

_い

_、

大変

• http://www.w3.org/TR/html5/index.html#elements-1

2.0

(39)

(40)

CSS3

い

• http://html5exam.jp/outline/objective

s_lv1.html#lv1_12

• CSS3

、

CSS2.1

以前対象

(41)

学習

ン

• CSS2.1

押えうえ、

3 変更点学

• CSS2.1

ン

ᵒ

ー

ᵒ

• CSS3

何変わ

？

ᵒ

画像必要

修飾

CSS

可能

ᵒ

便利

大幅追加

ᵒ

簡単

実現

(42)

(43)

ー

• _{ー処理}

ᵒ

継承

1 要素対複数指定起

う

、基本的優

先度

直接指定

>

継承

(

近い指定方強い

)

ᵒ

同場合優先度判断

ー処理

• _優先順位

_ー

1: CSS

種類

ᵒ

文章作成者

CSS >

ー

CSS >

標準

CSS

• ー

CSS

、利用者

Web

対

指定

CSS

• 標準

CSS

、

Web

持

CSS

ᵒ

、

CSS

値ナ!ろmァんィtaをtナ

最優先

!important

付

ー

CSS > !important

付文書作成者

CSS >

文章

作成者指定

CSS >

ー指定

CSS >

標準

CSS

p { font-size: 1em !important; }

(44)

ー

• _優先順位

_ー

2:

ᵒ

CSS

種類同

あ場合、

別分類、

個数数え、点数

(

詳細度

)

算出、高い方優先

• 対象

A

style

属性記述し

CSS

B

ID

C

、属性

、疑似

D

要素

、疑似要素

詳細度個数を連結しナA.て.で.とナ書くわ

やすい

A

0 、

B

1 、

C

2 、

D

1 場合詳細度ナ0.1.2.1ナ

比較方法後述

(45)

ー

• _詳細度

_{優先度算出}

ᵒ

A>B>C>D

順優先度高い

ᵒ

優先度高い

点数高い方優先

#id {

装飾

A }

→

0.1.0.0 ul li.class {

装飾

B }

→

0.0.1.2 ui ol+li {

装飾

C }

→

0.0.0.3 詳細度

優先度算出例

こ場合優先度順装飾

A>

装飾

B>

装飾

C

、装飾

A

適用さ

(46)

ー

• _優先順位

_ー

3:

出現順

ᵒ

詳細度

優先度同場合、後出現

CSS

優先

#id {

装飾

A }

#id {

装飾

B }

出現順

優先度例

(47)

(48)

算出

• _{文書内全要素四角形領域形成}

ᵒ

ンン領域、

padding(

内側余白

)

、

border(

境界線

)

、

margin(

外側余白

)

4 成立

margin

border

padding

ンン領域

(

キ

・画像

)

• 算出

ᵒ

幅

ンン領域幅

(width)+padding+border

ᵒ

box-sizing

値

border-box

、

width

height

指定

値

(49)

(50)

CSS3

可能

修飾例

• 角丸

ᵒ

border-radius

(

http://www.w3.org/TR/css3-background/#corners

)

• ー

ン

ᵒ

linear-gradient, radial-gradient(

http://www.w3.org/TR/css3-images/#gradients

)

• 影

ᵒ

box-shadow

(

(51)

便利

大幅追加

(

以下一部

)

• 属性

前方

/

後方

/

部分一致追加

ᵒ

**[attr^="val"], [attr$="val"], [attr*="val"]**

ᵒ

http://www.w3.org/TR/css3-selectors/#attribute-substrings

• 結合子兄弟

"~"

追加

ᵒ

http://www.w3.org/TR/css3-selectors/#attribute-substrings

• 構造利用

疑似

大幅追加

ᵒ

nth-child(), nth-of-type(), last-child

ᵒ

http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

(52)

簡単

• Multi-column Layout Module

、複数段組

簡単実現可能

ᵒ

column-count, coloum-gap

ᵒ

http://www.w3.org/TR/css3-multicol/

• Flexible Box Layout Module

、

float

使わ

横並び

ᵒ

display: flex

flex-direction

ᵒ

http://www.w3.org/TR/css-flexbox-1/

• CSS

自由度増

い

(53)

CSS

変形、

ー

ン

• transform

移動・変形

ᵒ

translate(), rotate(), scale(), skew()

ᵒ

http://www.w3.org/TR/css3-transforms/

• transition

、要素変化滑

ᵒ

例え、

:hover

変化滑

ᵒ

http://www.w3.org/TR/css3-transitions/

• animation

、要素変化連続

行え

@keyframes

指定

特徴

(54)

4. ン

(55)

ン

Web

ン

い

• http://html5exam.jp/outline/objectives_lv1.h

tml#lv1_14

• ン

Web

ン

、

ー

特化

内容盛込

い

(56)

学習

ン

• _ン

Web

ン

ういう

押え

(57)

ン

Web

ン

• 多種多様

登場続

状況中、

対応

開発

、

将来登場

端末

対応不明

• 、

ン

Web

ン呼

Web

開発手法登場

ᵒ

広い意味

利用中あ

ー

状況や環境合わ、

ー

良い体験提供

ういう考え方

ᵒ

手法表場合

、

1 HTML

、

特性

(

主画面横

(58)

特性応

変更

方法

• ン

Web

ン

、

特性利用

CSS

切替え

Media Queries

利用、

変更

demo

ー

ン

PC

HTML

CSS

(59)

• ᵒ

将来登場

見越

対応可能

ᵒ

URL

同

、

SEO

的有利

ᵒ

発生

い

読込時間短縮可能

ᵒ

HTML

１ 済

削減

(

可能性

)

• ᵒ

設計・製造難易度高い

• 逆

高

ᵒ

向

動画や画像切替え必要

• 回線不安定画面小い

ᵒ

画面

ー変更

対応

い

ᵒ

用

PC

向

表示

い

(60)

ン

Web

ン実現手法

• Media Queries(

前述

)

• Fluid Grid

ᵒ

画面

あわ

幅変更

• Fluid Image

ᵒ

画面

合わ

画像

変更

• 以外

あ

基本

3

(61)

5. ン

Web

ー

ン

(62)

ン

Web

ー

ン

い

(63)

学習

ン

• 概要

(64)

ン

Web

ー

ン

• ン

静的ンン

閲覧可能

Web

ー

ン

• 、キ

いう

読取、

キ

指定

ンン

ー

保存

⇒

仕組

ン閲覧可能

ー

ン

ンー

一部ンン

ー

保存

ン

(65)

ン

Web

ー

ン利用時動作

• _次回

_{、ー}

_保存

_{ンン}

_閲覧

ᵒ

ン

ンン

閲覧

ᵒ

ン

ンあ

ー

不要

ー

ン

(66)

• ᵒ

ン状態

Web

ー

ン閲覧

可能

ᵒ

(2

回目

以降

)

ー

ネ

ワー経由

速読込

ᵒ

全

ー

取得

い

、ー負荷軽減可能

• ᵒ

ー側

更新

場合、ー

ー

キ

更新必要

ᵒ

キ

記述誤

場合、変更

更新

(67)

実現

必要作業

• Web

ー

設定

ᵒ

".manifest"

MIME

"text/cache-manifest"

ᵒ

いキ

認識

い

• キ

作成

ᵒ

キ

/

い

設定

ᵒ

書方後述

• キ

対象

HTML

manifest

属性指定

ᵒ

html

要素

manifest

属性利用

キ

指定

ᵒ

HTML

い

(CSS/JavaScript

等不要

)

Apache

や

.htaccess

設定

を作成

し

Web

ーバ

配置

(68)

キ

記述方法

CACHE MANIFEST

#

先頭文字を

#

始め

こ

、コメントを記述可能

#

本例

パスをキャ

シュマニフェストか

相対パス

記載

#

ここ

CACHE:

セクション

#

こ

セクション

ローカルキャ

シュす

ファ

ルを記載

index.html

app.js

NETWORK:

#

こ

セクション

キャ

シュし

いファ

ルを記載

submit.cgi

FALLBACK:

#

こ

セクション

代替ファ

ルを記載

/ offline.html

SETTINGS:

#

キャ

シュ

利用方法を設定可能

(69)

(70)

学習進方

• _{実際試}

_う

ᵒ

JSFiddle

や

JS Bin

書い

確認

ᵒ

特

CSS

動

確認

理解深

• _{仕様書見う}

ᵒ

CSS

う

確実

ᵒ

全部見必要あ

• 暗記必要

ᵒ

合格

ン

70%

あ

考慮

効率的

• _{受験中あ}

_い心構え

(71)

役立情報源

• Mozilla Developers Network

MDN

Web

technology for developers

ᵒ

https://developer.mozilla.org/ja/docs/Web

ᵒ

HTML

や

CSS

技術情報見

ᵒ

日本語化

い

• W3C CSS

一覧

ᵒ

http://www.w3.org/Style/CSS/all-properties

ᵒ

仕様

標準化進行状況わ

• _{資格関連情報}

ᵒ

公式

http://www.html5exam.jp/

ᵒ

Twitter

@HTML5Cert

ᵒ

Facebook

https://www.facebook.com/html5exam

(72)

え

:

本日話

• 試験

い

ᵒ

試験概要

ᵒ

試験範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

ᵒ

ン

Web

ー

ン

• _{学習進方}

(73)

(74)

ン

• CSS

標準化進機能

先行実装

場合、

や値先頭

ン

呼

特定接頭語付

必

要あ

• 例え、

Firefox

ン

以下

ᵒ

う

ン

あ

ン固有話

、試験

い思わ

• 現状次

う

い

ᵒ

Mozilla

や

Google

今後ン

い表明

ᵒ

ン

標準化あ程度進

外

推奨

ᵒ

昔

対象

あ

• 現状

ン

あ

/

併記

い

う

(75)

対応状況調査方法

• 各

要素や

CSS

機能対応状況、ン

有無

頻繁変更

ᵒ

自分調

い

• caniuse

調査

い

ᵒ

http://caniuse.com/

• 使い方検索

ー

使いい機能検索

、一覧

選

• 調

非常便利

(76)

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

HTML5

認定試験

1

ン 解説無料

ー

2017

年

1

月

LPI-Japan

主催

講師

:

鈴木雅貴

自己紹介

•

鈴木雅貴

(

)

ᵒ

NTT

ソ

株式会社

(

HTML5

認定校

)

ᵒ

HTML5

推進室所属

ᵒ

HTML5

認定校

ー

講師

ᵒ

1

β試験

認定取得

•

1

試験対策本執筆

(

株式会社

出版

)

•

弊社技術

VR

記事連載中

本日 話

•

試験

い

ᵒ

試験概要・範囲

•

試験範囲

ン 解説

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

ᵒ

ン

Web

ー

ン

•

学習 進 方

Ver1.0

試験概要

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

ン解説無料

_鈴木雅貴

_弊社技術

本日話

_試験範囲

_{ン解説}

学習進方

情報あ

_、

範囲含

い方

情報あ

試験範囲広い

時間限

、本日広い試験範囲

解説一部除省略

_、

世界、