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

(1)

HTML5

認定試験

1 ン解説無料

ー

2017

年

11 月

LPI-Japan

主催

講師

:

石井博幸

(2)

自己紹介

• _石井博幸

(

いい

)

ᵒ

NTT

株式会社

(

HTML5

認定校

)

ᵒ

ソ

ー

ン事業部所属

ᵒ

W3C CSS Working Group(

～

2014)

ᵒ

1,2

認定取得

ᵒ

HTML5

周辺技術利用

、

開発

/

ー

ン・

Web

開発

/

基盤開発

担当

(3)

本日話

こ辺

を重点

的

• 試験

い

ᵒ

試験概要・範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

CSS

ᵒ

要素

ᵒ

ン

Web

ン

(4)

(5)

試験概要

• 公式

情報あ

ᵒ

http://html5exam.jp/outline/objectives_lv1_v2.ht

ml

• 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,

,

/

ーン

&

ン

ー

ン

(11)

(12)

(13)

Web

基礎知識

い

• 一見

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

情報目的地

届

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

ーバ

ン

Web

ーバ

(19)

Web

ー

？

• Web

ー以外

ー

ᵒ

ー

ン

SSH

ー

動作

、

IP

Web

ー

識別

い

• ー番号

使う

ᵒ

ー

既定

ー番号指定

(Web

ー

80 番

)

ᵒ

あ

ー

ン間通信仕組

規定

い

TCP(Transmission Control Protocol)

ᵒ

TCP

IP

利用

通信路確立、

うえ情報や

ᵒ

TCP

ー

や再送

、情報確実送

仕組

あ

Web

ーバ

(80)

80

(20)

ー番号、指定

？

• 普段

ー番号入力

い

• URL

通信

(

ー番号

)

指定

い

ᵒ

"http://example.com/"

http://

、

HTTP(HyperText

Transfer Protocol)

使

通信宣言

い

ᵒ

HTTP

80 番ー

使用

(

前述

Web

ー

80 番同意

)

、

80 番ー

指定

• Web

ー

無事

PC

ーバ

ン

Web

ーバ

(80)

http://example.com/

へ

!

80

(21)

ンン

ー

取得

• HTTP

ンン

取得

1. 確立

TCP

通信路上、

Web

ー

、

x.html

いいう

送信

2. Web

ー

ン

x.html

中身返

3. TCP

確立

通信路閉

4. x.html

表示

ーバ

ン

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)

CSS3

い

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

s_lv1_v2.html#lv1_12

• CSS3

、

CSS2.1

以前対象

(28)

学習

ン

• CSS2.1

押えうえ、

3 変更点学

• CSS2.1

ン

ᵒ

ー

ᵒ

• CSS3

何変わ

？

ᵒ

画像必要

修飾

(border:

枠修飾

)

CSS

可能

ᵒ

便利

大幅追加

ᵒ

簡単

実現

(29)

(30)

ー

• _{ー処理}

ᵒ

継承

1 要素対複数指定起

う

、基本的優

先度

直接指定

>

継承

(

近い指定方強い

)

ᵒ

同場合優先度判断

ー処理

• _優先順位

_ー

1: CSS

種類

ᵒ

文章作成者

CSS >

ー

CSS >

標準

CSS

• ー

CSS

、利用者

Web

対

指定

CSS

• 標準

CSS

、

Web

持

CSS

ᵒ

、

CSS

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

最優先

!important

付

ー

CSS > !important

付文書作成者

CSS >

文章

作成者指定

ー指定

標準

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

(31)

ー

• _優先順位

_ー

2:

ᵒ

CSS

種類同

あ場合、

別分類、

個数数え、点数

(

詳細度

)

算出、高い方優先

• 対象

A

style

属性記述し

CSS

B

ID

C

、属性

、疑似

D

要素

、疑似要素

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

やすい

、

場合詳細度ナ0.1.2.1ナ

(32)

ー

• _詳細度

_{優先度算出}

ᵒ

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

適用さ

(33)

ー

• _優先順位

_ー

3:

出現順

ᵒ

詳細度

優先度同場合、後出現

CSS

優先

#id {

装飾

A }

#id {

装飾

B }

出現順

優先度例

(34)

(35)

算出

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

ᵒ

ンン領域、

padding(

内側余白

)

、

border(

境界線

)

、

margin(

外側余白

)

4 成立

margin

border

padding

ンン領域

(

キ

・画像

)

• 算出

ᵒ

幅

ンン領域幅

(width)+padding+border

(36)

(37)

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

(

(38)

便利

大幅追加

(

以下一部

)

• 属性

前方

/

後方

/

部分一致追加

ᵒ

**[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

(39)

簡単

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

(40)

CSS

変形、

ー

ン

• transform

移動・変形

ᵒ

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

ᵒ

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

• transition

、要素変化滑

ᵒ

例え、

:hover

変化滑

ᵒ

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

• animation

、要素変化連続

行え

@keyframes

指定

特徴

(41)

(42)

要素

い

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

v2.html#lv1_13

• HTML5

、

HTML4.01

以前対象

い

• Ver1.0

HTML5

、

Ver2.0

HTML5.1

対象

(43)

学習

ン

• HTML4.01

押えうえ、

5 変更点学

• _{何変わ}

_？

ᵒ

定型句

ン

い

ᵒ

要素意味

い

(

ン

)

ᵒ

的機能排除

い

ᵒ

新いン

ーや機能使え

う

い

2.0

(44)

定型句

ン

• _{文書型宣言}

• _{文字ンー}

_ン

• _他

_あ

_{、いい楽}

<!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

(45)

定型句

ン

• _え

_{う感}

<!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>

…

コンテン

(46)

要素意味持

う

• ン

明示

要素

ン

意識

作成

可能

• ン

ᵒ

文書一区分

ᵒ

_ン

_{一階層形成}

• _ン

ᵒ

HTML

文書

う

ᵒ

ン

ー

1. あああ

2. いいい

(47)

ン明示

要素

• 以下要素

ン明示

• ン明示

い関連

要素

要素名

説明

section

一般的

ンを表し、見出し

使用

article

単体完結

ン

(1

ー

含

内容

)

aside

あ

ンン

関係しい

、切離せ

バー、広告

nav

主要

ビー

ン

body

要素名

説明

h1~h6

ン見出し

header

ン

(48)

ン関連要素配置例

header

footer

nav

article

aside

section

(49)

ン生成例

• _以下

HTML

あ

• _{ン確認}

_う

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

(50)

意味

• 構造

ー

読解助

人々大

利点

ᵒ

いわ

向上

• _{ーン}

_ー

_提供

_い

大

ン

ᵒ

誰

使え！

• 構造

う

！いう答えあわ

い

ᵒ

構造

作成者主張反映

(51)

的機能排除

• HTML

５要素

、要素

属性

指定機能排

除

い

ᵒ

指定基本

CSS

や

• 廃止

要素例

: big, center, font, strike, tt

ᵒ

排除

主要理由以下

• 低下

• ン

ン

増加

• 文書

増大

ᵒ

残

style

要素

属性

(52)

新いン

ーや機能

• ー

input

要素使え

type

属性大幅増加

ᵒ

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

s-of-the-type-attribute

• HTML

ンン

再生

audio

要素

/video

要素

• ン使用

画像描画

canvas

要素

(53)

他

ン

• 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

ᵒ

_{ンン}

_覚え

_い

_、

大変

2.0

(54)

4. ン

(55)

ン

Web

ン

い

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

v2.html#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)

(62)

API

• ・

系

API

ᵒ

Canvas/SVG/MediaSourceExtensions

・・・

• _系

API

ᵒ

Geolocation/DeviceOrientationEvent/TouchEvents

・・・

• _ン

_{ー系}

API

ᵒ

WebStorage/IndexdDatabaseAPI/Application

cache/WebWorkers

・・・・

• _通信系

API

ᵒ

XMLHttpRequest/WebSocketAPI/

Server-Sent Events/WebRTC

(63)

・

系

API

(64)

・

系

API

(65)

Canvas

• Canvas 2D Context

ᵒ

HTML

JavaScript

簡単

上絵描

<html>

<head><script type="application/javascript">

function draw() {

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

var context = canvas.getContext("2d"); //

ンキ

取得

context.fillRect (20, 20, 60, 60); //

四角形描画

}

</script></head>

<body onload="draw();">

(66)

Drag and Drop

• Drag and Drop

(67)

系

API

概要

(68)

系

API

(69)

Geolocation API

• Geolocation

• 上位置情報

(GPS)

取得

API

ᵒ

無線

LAN

・

WiFi

・携帯電話基地局・

GPS

・

IP

位置

(70)

ン

ー

系

API

(71)

ン

ー系

API

(72)

学習

ン

• 概要

(73)

ン

Web

ー

ン

• ン

静的ンン

閲覧可能

Web

ー

ン

• 、キ

いう

読取、

キ

指定

ンン

ー

保存

⇒

仕組

ン閲覧可能

ー

ン

ンー

ン

(74)

ン

Web

ー

ン利用時動作

• _次回

_{、ー}

_保存

_{ンン}

_閲覧

ᵒ

ン

ンン

閲覧

ᵒ

ン

ンあ

ー

不要

ー

ン

(75)

• ᵒ

ン状態

Web

ー

ン閲覧

可能

ᵒ

(2

回目

以降

)

ー

ワー経由

速読込

ᵒ

全

ー

取得

い

、ー負荷軽減可能

• ᵒ

ー側

更新

場合、ー

ー

キ

更新必要

ᵒ

キ

記述誤

場合、変更

更新

(76)

実現

必要作業

• Web

ー

設定

ᵒ

".manifest"

MIME

"text/cache-manifest"

ᵒ

いキ

認識

い

• キ

作成

ᵒ

キ

/

い

設定

ᵒ

書方後述

• キ

対象

HTML

manifest

属性指定

ᵒ

html

要素

manifest

属性利用

キ

指定

ᵒ

HTML

い

(CSS/JavaScript

等不要

)

Apache

や

.htaccess

設定

を作成

し

Web

ーバ

配置

(77)

キ

記述方法

CACHE MANIFEST

#

先頭文字を

#

始め

こ

、コメントを記述可能

#

本例

パスをキャ

シュマニフェストか

相対パス

記載

#

ここ

CACHE:

セクション

#

こ

セクション

ローカルキャ

シュす

ファ

ルを記載

index.html

app.js

NETWORK:

#

こ

セクション

キャ

シュし

いファ

ルを記載

submit.cgi

FALLBACK:

#

こ

セクション

代替ファ

ルを記載

/ offline.html

SETTINGS:

(78)

通信系

API

概要

(79)

通信系

API

(80)

ー間通信

(XMLHttpRequest)

• ー間通信

複数

API

存在

ᵒ

XMLHttpRequest(

Level1

/

Level2

)

• Web

搭載

言語

(JavaScript

等

)

呼出可能

HTTP

通信提供

API

• Level2

ン間通信容易

ー

ン

(81)

ー間通信

(Server-Sent Events)

ᵒ

Server-Sent Events

• Web

ー

受信

ン

ー

TCP

接続

ー

ン

(82)

ー間通信

(WebSocket)

ᵒ

WebSocket

• ー・

ン間

双方向通信容易

ー

TCP

接続

双方向通信

ン

(83)

音声・映像通信

(WebRTC)

ᵒ

WebRTC

• Web

世界

ン

ー

ン実現

技術

ー

TCP

接続

音声・映像

ン

(84)

(85)

学習進方

• _{実際試}

_う

ᵒ

JSFiddle

や

JS Bin

書い

確認

ᵒ

特

CSS

動

確認

理解深

• _{仕様書見う}

ᵒ

CSS

う

確実

ᵒ

全部見必要あ

• 暗記必要

ᵒ

合格

ン

70%

あ

考慮

効率的

(86)

役立情報源

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

(87)

え

:

本日話

• 試験

い

ᵒ

試験概要

ᵒ

試験範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

CSS

ᵒ

要素

ᵒ

ン

Web

ン

(88)

(89)

ン

• CSS

標準化進機能

先行実装

場合、

や値先頭

ン

呼

特定接頭語付

必

要あ

• 例え、

Firefox

ン

以下

ᵒ

う

ン

あ

ン固有話

、試験

い思わ

• 現状次

う

い

ᵒ

Mozilla

や

Google

今後ン

い表明

ᵒ

ン

標準化あ程度進

外

推奨

ᵒ

昔

対象

あ

• 現状

ン

あ

/

併記

い

う

(90)

対応状況調査方法

• 各

要素や

CSS

機能対応状況、ン

有無

頻繁変更

ᵒ

自分調

い

• caniuse

調査

い

ᵒ

http://caniuse.com/

• 使い方検索

ー

使いい機能検索

、一覧

選択

• 調

非常便利

(91)

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

HTML5

認定試験

1

ン 解説無料

ー

2017

年

11

月

LPI-Japan

主催

講師

:

石井博幸

自己紹介

•

石井博幸

(

い い

)

ᵒ

NTT

株式会社

(

HTML5

認定校

)

ᵒ

ソ

ー

ン事業部所属

ᵒ

W3C CSS Working Group(

～

2014)

ᵒ

1,2

認定取得

ᵒ

HTML5

周辺技術 利用

、

開発

/

ー

ン・

Web

開発

/

基盤開発

担当

本日 話

こ 辺

を重点

的

•

試験

い

ᵒ

試験概要・範囲

•

試験範囲

ン 解説

ᵒ

Web

基礎知識

ᵒ

CSS

ᵒ

要素

ᵒ

ン

Web

ン

試験概要

•

公式

情報 あ

ᵒ

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

ン解説無料

_石井博幸

いい

周辺技術利用

本日話

こ辺

_試験範囲

_{ン解説}

情報あ

_、

範囲含

い方

情報あ

試験範囲広い

時間限

、本日広い試験範囲

_、

世界、

狭義広義