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

株式会社

HTML5

ッ ョ

認定試験



2014

年

10

月正式勧告



・

対応



ン ・

ー

ン

ー



広義

CSS3

や

JavaScript

3D

WebSocket

ン

ー 等 含



特定非営利活動法人

LPI-Japan

実施

HTML5

び周辺技術

知識

測 認定制度



試験 難易度 示

2

種類

あ

段階的 受験

•

Level1

対応

静的

Web

コン ン

HTML5

使

ン 作成

•

Level2

間連携や最新

術 対応

Web

ー

ンや動的

Web

コン ン

開発・設計



試験方式 コン

ー

ー

CBT

試験配信会

社

ソン

VUE

通

受験

•

全国

ン ー 通年受験可能

•

合否結果 そ 場 わ

•

試験 詳細 以下 通

受験 ついて

問題数

約

65

問

試験時間

90

分

合格

ン

約

7

割

Level

１ 試験範囲

Level

１ 試験範囲

重要度 項目 重要度

Web 基礎知識 23

HTTP, HTTPS 8

HTML 書式 9

Web関連技術 概要 6

CSS 18

基本 7

CSS ン 9

2

要素 23

要素 属性 意味 10

メ 要素 6

ン 要素 7

ン Web ン 12

対応ペ 作成 4

メ 5

ン 最適化 3

Level

１ 試験攻略法

重要度

攻略法

Web

基礎知識

23

基礎知識

知っ い ば取 や い 技術的

_高い

_{い 実際 試せば何}

容

非 ン ニ

CSS

18

CSS

反映結果 想像

よう

く必要

あ

暗記

実験

両方

ン よく行う

要素

23

暗記系

多い

毎日繰 返

キ

読

一夜漬け

ン

期間 掛け

ば取

ン

Web

ン

12

実験

けばあ 程度取



未経験者 場合

•

_{範囲 広く 選択式 複数回答}

_色々

HTML

や

CSS

試

こ

ー



ー系 場合

•

知識系

問題 技術ネ

多い 配点 そこそこあ

調

実際 動

点 取

う



ン

系 場合



出題範囲

•

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



ン

問題 解説

•

http://html5exam.jp/measures/sample.html



HTML5

学習 役立 参考資料

•

http://html5exam.jp/contact/download.html



対策 キ

•

HTML5

認定試験

1

対策 キ

&

問題集

Ver2.0

対応版



受験

ャー

15%

キャン ーン実施中

出題範囲



説明 望

キ

•

HTTP

コン ン 作成や

全体 設計 行う

必要

HTTP

び

HTTPS

コ

関

知識 有

い

•

時 返

く

ーコー

意味 理解

問題 解決

ン

事



主要 知識範囲

•

Web

ー 間 や

通信内容や手順

•

HTTP

け

ソ

種類 違い

•

URI

仕様

い 書式や利用可能文字

•

Web

ー

返

ン

項目

•

Web

ー

返

ン

ー

コー

•

HTTP

コ

規定

い 認証方式



重要 技術要素

•

HTTP, HTTPS, SSL/TLS

•

ソ

GET, POST, HEAD, PUT, DELETE

•

URI, URL

•

ー

コー

,

•

HTTP Header Fields

Accept, Authorization, Cache-Control, Content-Language, Expires

•

Basic

認証

Digest

認証

Web

仕組

WWW

URL

指定



HTTP

•

HTTP

Web

ン

Web

ー ー間 コン ン

送受信

通信方法 規定

•

Web

ン

Web

ー ー 対

要求

いい

そ

対

Web

ー ー

応答 返 こ

ン

いう



ソ

種類

•

GET/POST/HEAD/PUT/DELETE



ー

コー

種類

ン

•

1xx

情報

•

2xx

成功

•

3xx

転送

•

4xx

ン

ー

•

5xx

ー ー

ー



種類

・

ン

•

User-Agent/Referer/Content-Type

HTTP

ッ ー 例



GET



ン

GET / HTTP/1.1

Host: s3.asial.co.jp

Connection: keep-alive

Cache-Control: no-cache

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp

Accept-Encoding: gzip, deflate

Accept-Language: ja,en-US;q=0.8,en;q=0.6

HTTP/1.1 200 OK

Date: Mon, 02 Oct 2017 12:17:37 GMT

HTTP

ッ ー 例



POST

POST /html5/post.php HTTP/1.1

Host: s3.asial.co.jp

Connection: keep-alive

Content-Length: 57

Origin: http://s3.asial.co.jp

sei=

%E5%B2%A1%E6%9C%AC

&mei=

%E9%9B%84%E6%A8%B9

&name=submit

_HTTP

_ッ

POST

_{日本語 扱え い}

信

値

重要

ー

ー



重要

ー

コー

•

200 OK



成功

場合 返 コー

•

301 Moved Permanently



ソー

恒久的 移動

場合 返 コー

–

移動先

URL

HTTP

受け取

•

304 Not Modified



前回

更新

い い場合 返 コー

–

HTTP

返

•

404 Not Found



ソー

見

い場合 返 コー

•

500 Internal Server Error

Location

ッ ー ついて



Location

ー

い

•

HTTP

ン

利用

•

別

ー

利用



3xx

系

ー

コー

利用



Demo

ー

•

http://s3.asial.co.jp/html5/location.php



ー ー側

Location

ー 送出

い



ー ー側

※

HTTP

ン

ン

ー 側

HTTP

ー送出処理 改

攻撃

ー ー側

不備 あ 場合 実現可能

<?php

Location

ッ ー ついて



ー ー側

例

※

HTTP

ン

ン

いう攻撃 あ

ー 側

HTTP

ー送出処

理 改

攻撃

ー ー側

不備 あ 場合 実現可能



HTTP

ン

<?php

header("Location:https://www.asial.co.jp/");

?>

HTTP/1.1 302 Found

Date: Mon, 02 Oct 2017 12:49:34 GMT

Location: https://www.asial.co.jp/

Content-Length: 0

Connection: close

ー を保存す 方法



キー

•

昔

(HTTP 1.0)

あ 仕組

•

キー

ー型

•

容量制限 厳 い

•

一度

ー ー 毎回送信

う

•

特 制限 掛け け

http

https

共有



Web Storage

•

Cookie

大容量

•

毎回送信

うこ

い

•

ン

いう単位 独立

管理

ン・ ー ・

コ



Indexed Database

ッキー 詳細



キー

？

•

キー

ー ー側

Web

値 保存

仕組



HTTP

ー や

い

•

キー

同

ン

自動的 値 返送

出題範囲



説明 望

キ

•

正 く

コン ン

表示

HTML

仕様 沿

書式

HTML

コー

記述

事



主要 知識範囲

•

HTML

ー

ン情報 含 文書型宣言 関

記述方法

•

要件 合わ

言語コー

文字コー

符号化方式

指定 関

記述方法

•

HTML

使用可能 文字参照 関

記述方法

•

必要 応

内 外部 ソー

指定

ン

関

記述方法

•

必要 応

内

情報 関

記述方法



例

•

省略

属性 増え

ン

ン

•

ン

対応 見 目

く 意味 重要視

HTML

書式

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>HTML5

入門

</title>

</head>

<body>

<h1>HTML5

</h1>

<p>HTML

Web

上

文章を公開する

技術 す

HTML5

バー ョン

動画

や

ンタ クテ

なコンテン

ウ

け 表現

き ま

ケー ョン

ト ォーム し

機能

多く備え

います

</p>

</body>



DOCTYPE

宣言



文字 ンコー

ン 指定

•

文書 先頭

BOM

付加

以下

<head>

内 指定

HTML5

文書 作成

<!DOCTYPE html>

出題範囲



説明 望

キ

•

動的

Web

コン ン

作成

い

う 技術や対策 行

い

理解

内 円滑 コ

ー

ン

必要 知識 有

い

•

Web

コン ン

伸

方法

一般的 利用

い

い 説明

事



主要 知識範囲

•

Web

コン ン

作成

際 使う

言語や画像

規格 概要

•

Web

関

キ

脅威 関

技術 概要

•

要件 応

HTML

コン ン 作成 際 理解 必要

Web

関連技術 概要



重要 技術要素

•

ン

•

Ajax

•

ン

ー

,

画像

ー

(BMP, PNG, JPEG, GIF

)

•

MVC

ーキ

ャ

•

Base64

•

Data URI

キー

SQL

ン

ョン



SQL

ン

ン

？

•

ー

ー

ー

発行

問い合わ

悪意 あ

SQL

ー

SQL

ン

ョン



正常 問合

RDB

一般 ー ー 操作

ID

表示

http://shop.example.com/item.php?

id=5

ー

ー 側

処理

SQL

ン

ョン



不正 問合

攻撃者 操作

ID

表示

http://shop.example.com/item.php?

id='

OR 1 =

1;--全

抽出

まう！

RDB

ー

ー 側

処理

SELECT * FROM items WHERE id = '

'

OR 1 = 1;--

';

SQL

ン

ョン



対策方法

•

特殊文字

ー



開発言語 用意

い

ー 関数

利用



対策方法

•

あ

SQL

用意

可変 部分 け 置 換え

XSS



XSS

？

•

掲示板

ー ー 登録

文字列 公開

場所

埋 込 攻撃

•

主 被害



正規 ー ー

キー盗難



ン

誘導



改

•

正式名称

XSS

掲示板

<script>

location.href = "http://crack.example.com"

</script>

含

文章 掲載

投稿

閲覧

別

誘導

XSS



対策方法

•

HTML

生成時

構成文字等 特殊文字

HTML

ン

変換

こ

行う

•

HTML

ン

一覧

CSRF



CSRF

？

•

ン済

ー

対

外部

不正操作 強要

攻撃

•

主 被害



投稿処理



退会処理



登録情報 変更

•

正式名称

CSRF

shop.example.com

leave.php

＆

会

URL

＇



CSRF

仕組

•

ン済

対

img

要素や

JavaScript

送信

罠

ン済

<img src=

CSRF



対策方法

•

ワー 入力

本人 意思 確認

•

直前

ー

ー ン 埋 込

外部

く正 い導線 基 い 要求 あ

判断



間違

対策方法

•

ー

HTTP

ッ

ン

ョン



HTTP

ン

ン

？

•

主 改行文字

HTTP

ー行 追加

任意

ン

挿入

攻撃



外部 入力 元

HTTP

組 立

い

ー

指定

URL

こ 攻撃 受け 可能性 あ

•

主 被害



偽 ー

表示



ン固定攻撃

ン 乗 取

HTTP

ッ

ン

ョン



改行文字 任意

HTTP

ン

ン

login.php?redirect=mypage.php

%0DSet-Cookie: PHPSESSID=1234

header('Location: mypage.php

%0DSet-Cookie: PHPSESSID=1234

');

例え

古い ー

ン

PHP

header

関数 改行文字 適切

い い

2

HTTP

う

header('Location: '.$_GET['redirect']);

ー

埋 込

HTTP

ッ

ン

ョン



対策方法

•

特殊文字 改行コー

ー

•

HTTP

ン

ン対策 行わ

い 最新 開発言語 利

ー



ー

？

•

../

や

/etc /passwd

含

送 こ

公開領

域外

攻撃



ー

指定

開く

こ 攻

撃 受け 可能性 あ



対策方法

•

対象

公開領域 あ

う



JavaScript

描画

要素

•

具体的 描画方法

Level2

範囲

•

Level1

キャン

描画

図形 種類 知

くこ



四角形

/

線

/

円弧

/

画像

Web Storage

詳細



Web Storage

？

•

ン

ー

ー

ー

存在



ン

ー

や

ン

閉

消滅

•

保存

ー

文字列



配列や

保存

場合

JSON

いう形式 変換

localStorage.setItem("

キー

", "

保

する文

列

");

データの保

localStorage.getItem("

キー

");

ョ ン 要素

header

ッ

footer

ッ

section

汎用的

ョン

aside

ーや

広告

article

記事 して独立した

ョン

article

記事 して独立した

ョン

ョ ン 要素 詳細



article

要素

section

要素

•

記事

独立

い

ン

<article>

そ 以外 汎用的

ン

<section>

•

<article>

<section>

要素

親要素

構わ い



header

要素

footer

要素

•

<header>

<footer>

<article>

<section>

中 入

こ



動画

video

音声

audio

再生

•

要素 使い方

同

•

対応

<source>

要素 子要素 使う

video/audio/source

要素

<video src="video.mp4" controls autoplay loop></video>

<audio controls autoplay loop>

<!

–

-

ウ

対応

い

適合

使用

-->

<source src="audio.ogg" type="audio/ogg" media="all">

<source src="audio.mp3" type="audio/mp3" media="all">

<p>

利用中

ウ

再生

ませ

</p>

</audio>



動画 音声 再生範囲 指定

•

名 後

#t=

開始時間

,

終了時間

指定

再生範

囲 指定

こ

再生範囲 指定

video/audio

<video controls>

<source src="video.wmv

#t=20,40

">

<source src="video.mp4

#t=20,40

">



字幕

け

•

WebVTT

形式 作成

キ

video

要素

埋 込

track

要素

<video src="video.mp4">

<track src="ja.vtt" srclang="ja" label="

日本語

" kind="subtitles" default>

<track src="en.vtt" srclang="en" label="

英語

" kind="subtitles">

</video>

WEBVTT

00:00:01.000 --> 00:00:05.000

00:00:06.000 --> 00:00:11.000



付与

•

<ruby>

対象 キ

ー

•

<rt>

キ

指定

•

<rp>

未対応

表示

ruby

要素

<ruby>

子守熊

<rp>

＆

</rp>

<rt>

</rt>

<rp>

＇

</rp>

</ruby>



向

異

キ

埋 込

•

文字

右

左 記述

自然言語

ー

こ

前後

キ

入 替わ

配置

現象 回避

bdi

要素

<ul>



キ

改行

良い位置 指定

•

一般的

ー

含

い

や記号 並び

改行

表示

•

横幅 狭く文章 表示

い場合

<wbr>

挿入

い 箇所 改行

wbr

要素



<progress>

•

進捗状況 表



<meter>

•

範囲内 数 量 割合

表

•

見 目

同

progress/meter

要素

<progress value="75" max="100">100%

中

75%

ま 完了

</progress>



<time>

•

日付や時刻 表

•

datetime

属性 省略時 内容 キ

コン

ー

認識可能

形式 指定



<data>

•

日付以外

ー

表

•

属性 コン

ー

認識可能 形式 指定

time/data

要素



ー

入力候補 定義

•

定義

入力候補

キ

付与

こ

datalist

要素

<datalist

id="keywords"

>

<option value="Monaca">

<option value="Onsen">

<option value="Asial">

</datalist>



独自 ー 属性

•

利用

値 要素 保持

data-

始

属性

自由 定義

こ

独自 ー 属性

<ul>



計算結果

表示

•

ー ー 対

表示

こ

目的

ー 送信

い

output

要素

<form oninput="result.value = parseInt(price.value * 1.08)">

<input type="number" name="price" value="0">

税込：

<output name="result">0</output>



ー

ン属性

•

<input>

要素 付与

submit

時

行

く



required

必須



pattern

正規表現



min

最小値



max

最大値



maxlength

最長文字数

•

title

属性値 指定

ー

ー

拡張

こ

ー ョン属性



input type

属性値

•

url

や

email

指定

場合

ー 送信時

URL

ー

形式

正 い

ー

ン 行わ

•

range

指定

ン

ー

color

指定

ー

表示

UI

拡張 行わ

input type

属性値

URL

：

<input type="

url

">

メ

：

<input type="

email

">

数値：

<input type="

number

">

検索キ ワ

：

<input type="

search

">

電話番号：

<input type="

tel

">

CSS

作成



CSS

記述方法

<style>

要素内 記述

<link>

要素

CSS

読 込

•

CSS

内

@import

使う 別

CSS

読 込 こ

出来

要素

style

属性 指定

@import url("common.css"); /*

共通

*/



疑似要素 疑似

種類

•

id

/

要素型

/

/

属性

•

子

/

子孫

/

隣接

/

間接

ボッ



コン ン 領域

width,height

内側 余白

padding

枠線

border

外側 余白

margin

構成

border: 5px

padding: 20px

width: 80px

height: 40px

ボッ



CSS3

変更点

•

box-sizing

width

height

指定値

border

含

値

こ

可能



box-sizing : content-box

従来通



margin/padding

値

•

値

：上下左右

同 値

•

値

：上下

左右

•

値

：上 左右 下

•

値

：上 右 下 左

時計回

覚え

margin/padding

指定方法

margin: 10px;

margin: 10px 20px; /*

10px,

左右

20px */

margin: 10px 20px 30px; /*

10px,

左右

20px,

30px */



Web

ン

•

Web

上 配置

ン

読 込 技術

ー ー 環境 依存

い

う 環境

同

ン

表示

こ

•

Web

ン

利用手順

ン

ー ー

ー

ン

読 込

ン

ー名 定義

Web

ォン

@font-face

{

font-family: myfont;