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

(1)

HTML5

認定試験

1 ン解説無料

ー

2014

年

8 月

LPI-Japan

主催

(2)

自己紹介

• _鈴木雅貴

(

)

ᵒ

NTT

ソ

株式会社

• HTML5

認定校

ᵒ

HTML5

推進室

• 主

CSS

開発環境わ

ᵒ

HTML5

認定校

ー

講師

ᵒ

HTML5

認定試験

1 教科書

執筆

• Kindle, Kobo, Kinoppy,

紙書籍販売中

ᵒ

1 β試験

認定取得

• _{個人日本語組版周仕様翻訳}

ᵒ

http://suzukima.github.io/css-ja/

(3)

本日話

• _試験

_い

ᵒ

試験概要

ᵒ

試験範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

(4)

(5)

試験概要

• 公式

情報あ

ᵒ

http://html5exam.jp/outline/

• JavaScript

出

ᵒ

_、

JavaScript

何

や、使い方

範囲含

(6)

試験範囲

• 公式

情報あ

、 …

ᵒ

http://html5exam.jp/outline/objectives.html#lv1

(7)

試験範囲広い

• 時間限

い

、本日広い試験範囲

学習

上

情報

ン

持

帰

う

目的

• (X)HTML4.01/CSS2.1

試験範囲

含

(8)

(9)

Web

基礎知識

い

• 出題構成

: 30%

ᵒ

http://html5exam.jp/outline/objectives.html#lv1_

11

• _一見

HTML5

関係薄いう思え

、

HTML5

、

/

ー・

Web

・ー

/

ネ

ワー

ン

、自分担当

部分

自

領域越え知識やキ

(10)

ン

• Web

う仕組

Web

表示

把握

ᵒ

IP, DNS, TCP, HTTP

• _キ

2 種

(11)

Web

(12)

登場人物

• PC:

略

• Web

: PC

や

上動作

、

Web

閲覧用

(

以降

)

• ー

ン

:

ー

ン動作

ン

ー機器

• Web

ー

:

ー

ン上

Web

提供

ーソ

• 概要説明

PC

ーバ

ン

(13)

対象

Web

ー

い

• 対象

Web

ー

う識別

?

ᵒ

ネ

ワー上

無数

ー

存在

• IP

使う

ᵒ

192.0.43.10 う数字羅列

ᵒ

IP

住所代わ

目的

ー

送信

ᵒ

仕組

(

機器同士通信

)

規定

い

IP(Internet Protocol)

ᵒ

IP

情報目的地

届

(14)

君

IP

覚えい

？

• 普段

IP

入力

• DNS(Domain Name Service)

使う

ᵒ

"example.com"

う

ン名

呼

名前付、

IP

紐

覚えや

(

仕組

DNS)

ᵒ

DNS

ー

聞

紐い

IP

わ

(

名前解決

)

ᵒ

詳

JPNIC

ン名

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

PC

ーバ

ン

example.com

Web

ーバ

(15)

Web

ー

？

• Web

ー以外

ー

ᵒ

ー

ン

SSH

ー

動作

、

IP

Web

ー

識別

い

• ー番号

使う

ᵒ

ー

既定

ー番号指定

(Web

ー

80 番

)

ᵒ

あ

ー

ン間通信仕組

規定

い

TCP(Transmission Control Protocol)

ᵒ

TCP

IP

利用

通信路確立

、

うえ情報や

ᵒ

TCP

ー

や再送

、

情報確実送

仕組

あ

Web

ーバ

(80)

80

(16)

ー番号、指定

？

• 普段

ー番号入力

い

• URL

通信

(

ー番号

)

指定

い

ᵒ

"http://example.com/"

http://

、

HTTP(HyperText

Transfer Protocol)

使

通信宣言

い

ᵒ

HTTP

80 番ー

使用

(

前述

Web

ー

80 番同意

)

、

80 番ー

指定

• Web

ー

無事

PC

ーバ

ン

example.com

Web

ーバ

(80)

http://example.com/

へ

!

80

(17)

ンン

ー

取得

• 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

す

(18)

HTTP

ー

ソ

• HTTP

ー

分

ᵒ

や

ン

う

示

ᵒ

ー

(

い場合あ

)

• 使用可能

ソ

(

書

)

ソ

名

説明

GET

ーバ

指定

URI

ソー

取得

POST

ン

ーバへー

送信

送信後ーバ

ー

送

こ

あ

PUT

ーバ指定

URI

ー

保存

HEAD

GET

同様

取得

OPTIONS

指定

URI

ーすメソ

取得

DELETE

指定

URI

ソー削除

TRACE

ーバ

ネ

ワー経路

(19)

HTTP

ン

ー

• _ン

_、

_結果

_う

_{情報、}

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

ーバ

処理

ー

(20)

(21)

キ

2 種

• キ

Web

等

ン

Web

ー

通信中継

• Web

キ

(

ン側配置

)

ᵒ

ン

ンーネ

直接続防止

ᵒ

キ

速度向上

• ー

キ

(Web

ー側配置

)

ᵒ

Web

ー

ンーネ

直接続防止

ᵒ

Web

ー

負荷分散処理

ン

(web

)

Web

キ

内部ネ

ワー

内部ネ

ワー

ー

キ

外部ネ

ワー

(22)

(23)

ー

• ー

ー

(DB)

ᵒ

集

ー

管理

• 正確

DBMS(DataBase Management System)

あ

、ー

ー

略

多い

ᵒ

Web

ー

ン

、

Web

ー

画面生成や

ネ

実行、実行結果

ー

管理いう

ーン一般的

ᵒ

現在主流

ー

表似形式管理、

ー

ン

呼

構造連結可能

ー

(RDB)

• SQL

(24)

SQL

• _主

DDL

命令

概要

CREATE

ー

や制約条件定義

DROP

ー

削除

命令

概要

SELECT

ー

抽出

INSERT

ー

挿入

DELETE

ー

削除

UPDATE

ー

更新

命令

概要

BEGIN

ン

ョン開始宣言

COMMIT

ン

ョン終了宣言

ROLLBACK

ン

ョン取消し

• _主

DML

(25)

(26)

要素

い

• 出題構成

: 37%

ᵒ

http://html5exam.jp/outline/objectives.html#lv1_

13

• HTML5

、

HTML4.01

以前対象

(27)

学習

ン

• HTML4.01

押えうえ、

5 変更点学

• _{何変わ}

_？

ᵒ

定型句

ン

い

ᵒ

要素意味持

う

い

ᵒ

的機能排除

い

(28)

定型句

ン

• _{文書型宣言}

• _{文字ンー}

_ン

• _他

_あ

_{、いい楽}

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

(29)

要素意味持

う

• ン

明示

要素

ン

意識

作成

可能

• ン

ᵒ

HTML

文書

う

ᵒ

ン

ー

• _ン

ᵒ

_{文書一区分}

1. あああ

2. いいい

(30)

ン明示

要素

• 以下要素

ン明示

• ン明示

い関連

要素

要素名

説明

section

一般的

ョン表し、見出し

使用

article

単体完結

ョン

(1

ー

含

内容

)

aside

あ

ンン

関係しい

、切離せ

バー、広告

nav

主要

ビーョン

body

要素名

説明

h1~h6

ョン見出し

header

ョン

footer

ョン

(31)

ン生成例

• _以下

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>

(32)

意味持

• 構造

ー

理解助

う人々大

利点

ᵒ

いわ

向上

• _{ーン}

_ー

_提供

_い

大

ン

ᵒ

誰

使え！

• _構造

_う

_{！いう答えあわ}

_い

ᵒ

構造

作成者主張反映

ᵒ

判断参考

HTML5 Doctor

HTML5

(33)

的機能排除

• HTML

５要素

、要素

び属性

指定機能排

除

い

• 指定基本

CSS

や

ᵒ

廃止

要素例

: big, center, font, strike, tt

• 排除

理由以下

ᵒ

低下

ᵒ

ン

増加

• <font color="">

各ー変更

外部

CSS

変更方楽

ᵒ

文書

増大

• 残

style

要素

び属性

(34)

新いン

ーや機能

• ー

input

要素使え

type

属性大幅増加

• HTML

ンン

再生

audio

要素

/video

要素

• ン使用

画像描画

canvas

要素

(35)

他

ン

• 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

ᵒ

_{ンン}

_覚え

_い

_、

(36)

(37)

CSS3

い

• _出題構成

: 20%

ᵒ

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

ml#lv1_12

• CSS3

、

CSS2.1

以前対象

(38)

学習

ン

• CSS2.1

押えうえ、

3 変更点学

• CSS2.1

ン

ᵒ

ー

ᵒ

• CSS3

何変わ

？

ᵒ

画像必要

修飾

CSS

可能

ᵒ

便利

大幅追加

ᵒ

簡単

実現

(39)

(40)

ー

• _{ー処理}

ᵒ

継承

1 要素対複数指定起

う

、基本的優

先度直接指定

>

継承

(

近い指定方強い

)

ᵒ

同場合優先度判断

ー処理

• _優先順位

_ー

1: CSS

種類

ᵒ

文章作成者

CSS>

ー

CSS>

標準

CSS

• ー

CSS

、利用者

Web

対

指定

CSS

• 標準

CSS

、

Web

持

CSS

ᵒ

、

CSS

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

最優先

!important

付き

ー

CSS > !important

付き文書作成者

CSS >

文章

CSS >

CSS

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

(41)

ー

• _優先順位

_ー

2:

ᵒ

CSS

種類同

あ場合、

別分類、

個数数え、点数

(

詳細度

)

算出、高い方優先

• 対象

A

style

属性記述し

CSS(

前述し

う基本すすしせ

)

B

ID

C

、属性

、疑似

D

要素

、疑似要素

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

やすい

(42)

ー

• _詳細度

_{優先度算出}

ᵒ

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 詳細度

優先度算出例

(43)

ー

• _優先順位

_ー

3:

出現順

ᵒ

詳細度

優先度同場合、後出現

CSS

優先

#id {

装飾

A }

#id {

装飾

B }

出現順

優先度例

(44)

(45)

算出

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

ᵒ

ンン領域、

padding(

内側余白

)

、

border(

境界線

)

、

margin(

外側余白

)

4 成立

margin

border

padding

ンン領域

(

キ

・画像

)

• 算出

(46)

(47)

CSS3

可能

修飾例

• 角丸

ᵒ

border-radius

• ー

ン

ᵒ

linear-gradient()/radial-gradient()

• 影

ᵒ

box-shadow

• キ

影

ᵒ

text-shadow

(48)

便利

大幅追加

(

以下一部

)

• 属性

前方

/

後方

/

部分一致追加

ᵒ

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

• _{結合子隣接}

"+"

追加

• _{構造利用}

_疑似

_大幅追加

ᵒ

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

• CSS

修飾

や

い

(49)

簡単

• Multi-column Layout Module

、複数段組

簡単実現可能

ᵒ

column-count, coloum-gap

• Flexible Box Layout Module

、

float

使わ

横並び

ᵒ

display: flex

flex-direction

(50)

CSS

変形、

ー

ン

• transform

移動・変形

ᵒ

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

• transition

、要素変化滑

ᵒ

例え、

:hover

変化滑

• animation

、要素変化連続

行え

@keyframes

指定

特徴

(51)

4. ン

(52)

ン

Web

ン

い

• 出題構成

: 10%

ᵒ

http://html5exam.jp/outline/objectives.html#lv1_

14

• _ン

Web

ン

、

ー

特化

内容盛込

い

(53)

学習

ン

• _ン

Web

ン

ういう

押え

(54)

ン

Web

ン

• 多種多様

登場続

状況中、

対応

開発

、

将来登場

端末

対応不明

• 、

ン

Web

ン呼

Web

開発手法登場

ᵒ

広い意味

利用中あ

ー

状況や環境合わ、

ー

良い体験提供

ういう考え方

ᵒ

手法表場合

、

1 HTML

、

特性

(

主画面横

(55)

特性応

変更

方法

• ン

Web

ン

、

特性利用

CSS

切替え

Media Queries

利用、

変更

demo

ー

ン

PC

HTML

CSS

(56)

• ᵒ

将来登場

見越

対応可能

ᵒ

URL

同

、

SEO

的有利

ᵒ

発生

い

読込時間短縮可能

ᵒ

HTML

１ 済

削減

(

可能性

)

• ᵒ

設計・製造難易度高い

• 逆

高

ᵒ

向

動画や画像切替え必要

• 回線不安定画面小い

ᵒ

画面

ー変更

対応

い

ᵒ

用

PC

向

表示

い

(57)

ン

Web

ン実現手法

• Media Queries(

前述

)

• Fluid Grid

ᵒ

画面

あわ

幅変更

• Fluid Image

ᵒ

画面

合わ

画像

変更

• 以外

あ

基本

3

(58)

5. ン

Web

ー

ン

(59)

ン

Web

ー

ン

い

• 出題構成

: 3%

(60)

学習

ン

• 概要

(61)

ン

Web

ー

ン

• ン

静的ンン

閲覧可能

Web

ー

ン

• 、キ

いう

読取、

キ

指定

ンン

ー

保存

⇒

仕組

ン閲覧可能

ー

ン

(62)

• ᵒ

ン状態

、

Web

ー

ン閲覧

可能

ᵒ

(2

回目

以降

)

ー

ネ

ワー経由

速読込

ᵒ

全

ー

取得

い

、ー負荷軽減

可能

• ᵒ

ー側

更新

場合、ー

ー

キ

更新必要

ᵒ

キ

記述誤

場合、変更

更新

(63)

実現

必要作業

• Web

ー

設定

ᵒ

".manifest"

MIME

"text/cache-manifest"

ᵒ

いキ

認識

い

• キ

作成

ᵒ

キ

/

い設定

ᵒ

書方後述

• キ

対象

HTML

manifest

属性指定

ᵒ

html

要素

manifest

属性利用

キ

(64)

キ

記述方法

CACHE MANIFEST

#

先頭文字を

#

始め

こ

、コメントを記述可能

#

本例

パスをキャッ

マニ

ストか

相対パス

記載

#

ここ

CACHE:

セク

ン

#

こ

セク

ン

ローカルキャッ

す

ァイルを記載

index.html

app.js

NETWORK:

#

こ

セク

ン

キャッ

し

い

ァイルを記載

submit.cgi

FALLBACK:

#

こ

セク

ン

代替

ァイルを記載

(65)

(66)

学習進方

• _{実際試}

_う

ᵒ

JSFiddle

や

JS Bin

書い

確認

ᵒ

特

CSS

動

確認

理解深

• _{仕様書見う}

ᵒ

CSS

う

確実

ᵒ

全部見必要あ

• 暗記必要

ᵒ

合格

ン

70%

あ

考慮

効率的

• _{受験中あ}

_い心構え

(67)

役立情報源

• 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

ᵒ

仕様

標準化進行状況わ

• _{資格関連情報}

(68)

え

:

本日話

• 試験

い

ᵒ

試験概要

ᵒ

試験範囲

• _試験範囲

_{ン解説}

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

ᵒ

ン

Web

ー

ン

(69)

(70)

ン

• CSS

標準化進機能

先行実装

場合、

や値先頭

ン

呼

特定接頭語付

必

要あ

• 例え、

Firefox

ン

以下

ᵒ

う

ン

あ

ン固有話

、試験

い思わ

• 現状次

う

い

ᵒ

Mozilla

や

Google

今後ン

い表明

ᵒ

ン

標準化あ程度進

外

推奨

ᵒ

昔

対象

あ

• 現状

ン

あ

/

併記

い

う

(71)

対応状況調査方法

• 各

要素や

CSS

機能対応状況、ン

有無

頻繁変更

ᵒ

自分調

い

• caniuse

調査

い

ᵒ

http://caniuse.com/

• 使い方検索

ー

使いい機能検索

、一覧

選

• 調

非常便利

(72)

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

HTML5

認定試験

1

ン 解説無料

ー

2014

年

8

月

LPI-Japan

主催

自己紹介

•

鈴木雅貴

(

)

ᵒ

NTT

ソ

株式会社

•

HTML5

認定校

ᵒ

HTML5

推進室

•

主

CSS

開発環境 わ

ᵒ

HTML5

認定校

ー

講師

ᵒ

HTML5

認定試験

1

教科書

執筆

•

Kindle, Kobo, Kinoppy,

紙書籍 販売中

ᵒ

1

β試験

認定取得

•

個人 日本語組版周 仕様 翻訳

ᵒ

http://suzukima.github.io/css-ja/

本日 話

•

試験

い

ᵒ

試験概要

ᵒ

試験範囲

•

試験範囲

ン 解説

ᵒ

Web

基礎知識

ᵒ

要素

ᵒ

CSS3

ᵒ

ン

Web

ン

試験概要

•

公式

情報 あ

ᵒ

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

ン解説無料

_鈴木雅貴

開発環境わ

紙書籍販売中

_{個人日本語組版周仕様翻訳}

本日話

_試験

_い

_試験範囲

_{ン解説}

情報あ

_、

範囲含

情報あ

試験範囲広い

時間限

、本日広い試験範囲

_一見

関係薄いう思え

ー・

・ー

、自分担当

領域越え知識やキ

う仕組