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

HTML5

認定試験

1

ン 解説無料

ー

LPI-Japan

主催

株式会社　生形可奈子



HへMLす

認定試験

•

概要

•

試験範囲



毎 頻出

ン 解説

•

ほらb 基礎知識

•

HへML要素

•

でSSし

•

ン

ほらb

ン

•

ンほらb

ー

ン

•

ざ0さじ年正式勧告予定

•

・

対応

•

ン ・

ー

ン

ー

•

広義

でSSしやのaェaScィiァt

しと

ほらbSんc「らt

ン

ー 等 含

ー



特定非営利活動法人LPI‒のaァaを 実施

HへMLす

び周辺技術 知識

測 認定制度



試験 難易度 示 ざ種類

あ

段階的 受験

•

Lらェら」さ 

対応

静的 ほらb ン ン

 HへMLす 使

ン 作

成

•

Lらェら」ざ

間連携や最新

術 対応

ほらb

ー

ンや動的

ほらb ン ン

開発・設計

30%

3、%

20%

10%

3%

Web 基礎知識

HTML要素

でSS3

ン

Web

ン



試験方式

ン

ー

ー

でてへ

試験配信会

社

ソンVべど

通

受験

•

全国

ン ー 通年受験可能

•

合否結果 そ 場 わ

•

試験 詳細 以下 通

問題数

約65問

試験時間

90分

合格

ン

約、割

回答方式

殆

選択式 複数回答あ

記述式も１問程度

受験料

\15,000 税抜



HへML

廃止

以下 う

？

•

づ : だb>

•

て : だイtィんをる>

•

で : だbiる>

•

と : だイma」」>



iをァウt要素 tオァら属性 指定

い値 以下 う

？

•

づ : tら」

•

て : ウィ」

ほらb 基礎知識



ソ

種類

•

にどへ/POSへ/Hどづと/Pべへ/とどLどへど　



種類

•

べイらィ‒づるらをt/Rらりらィらィ/でんをtらをt‒へオァら　



ー

ー

種類

•

さォォ

情報

•

ざォォ

成功

階層名

説明

例

、

ー

ン層

ー

ン間

ー 交換

HTTP

6

ン ー

ン層

ー 変換や圧縮

HTTP

5

ン層

ン 開始・終了

HTTP, SSL/TLS

4

ン

ー 層

ー訂正や再送処理

TでP, UとP

3

ネ

ワー 層

通信経路 選択・中継

IP, IでMP

2

ー

ン 層

直接接続さ

い 機器間 通信

ー ネ

1

物理層

物理的 接続

光 ー



う 脆弱性

い 攻撃

・

開発者

う

対策 必要

点 理解

こ

•

SQL ン

ン

•

ン

ぼSS

•

ー

でSRな

•

HへへP

ン

ン



SQL ン

ン

？

•

ー

ー

ー

発行

問い合わ

悪意 あ SQL

ー

不正取得 削除

挿入

攻撃



正常 問合

一般 ー ー 操作

Iと

表示

れttp://イれんp.eォamp」e.cんm/item.pれp?

id=5

ー

ー 側

処理



不正 問合

攻撃者 操作

Iと

表示

れttp://イれんp.eォamp」e.cんm/item.pれp?

id=か

OR 1 =

1;--全 ー

抽出

う！

ー

ー 側

処理

SどLどでT  * なROM  itemイ WHどRど id = か

か

OR 1 = 1;--

かた

id 空文字 1==1 実質検索条件 し

‒‒以降 無効化

Rとて



対策方法

•

特殊文字

ー



開発言語 用意

い

ー 関数

利用



対策方法

•

あ

SQL 用意

可変 部分 け 置 換え



ぼSS

？

•

掲示板

ー ー 登録

文字列 公開

場所

埋 込 攻撃

•

主 被害



正規 ー ー

キー盗難



ン

誘導



改

•

正式名称



でィんイイ Sitら Scィiァtiをる

掲示板

かscriみtき

lまcatiまn.href が "httみ://crack.examみle.cまm"

か/scriみtき

含

文章 掲載さ

投稿

閲覧

別

誘導



対策方法

•

HへML 生成時

構成文字等 特殊文字 HへML

ン

変換

こ

行う

•

HへML ン

一覧

お → おamァた

だ → お」tた

> → おるtた

か

→ お#し9た

" → おアウんtた



でSRな

？

•

ン済

ー

対

外部

不正操作 強要

攻撃

•

主 被害



投稿処理



退会処理



登録情報 変更

•

正式名称

shop.example.com

leave.php

退会

URL



でSRな 仕組

•

ン済

対

imる要素やのaェaScィiァt

送信

罠

ン済

<img src=

"http://shop.example.com/leave.php">

正規

ー ー

退会処理 実行

う！



対策方法

•

ワー 入力

本人 意思 確認

•

直前

ー

ー ン 埋 込

外部

く正 い導線 基 い 要求 あ

判断



間違

対策方法

•

ー



ネ

ワー ・ ー 関連

•

ン/とNS/

キ / ー

ン /

ー

ー 　



ー

ー 　

•

SQL 種類 でRどづへど/とROP/SどLどでへ/INSどRへ/とどLどへど/べPとづへど



ー 表現技術

•

ー /Rとなa/ ー べRL



ほらb広告

•

ー

/

ワー /

/ ン ー

ン ー



HへMLす 例

•

省略

属性 増え

ン

ン

•

ン

ほらb対応 見 目

く 意味 重要視

か!こOCTとPご htmlき

かhtml langが"ja"き

かheadき

かmeta charsetが"UTF-8"き

かtitleき ン

か/titleき

か/headき

かbまdyき

かみき本文か/みき

か/bまdyき

か/htmlき



とOでへYPど宣言



文字 ン ー

ン 指定

•

文書 先頭 てOM 付加

以下

だれらaよ>内 指定

か!こOCTとPご htmlき

れらaよらィ

りんんtらィ

イらctiんを 汎用的

ン

aイiよら

ーや

広告

aィtic」ら 記事

独立

ン

aィtic」ら 記事

独立

ン

をaェ

ー

ン ン

 

aィtic」ら要素 イらctiんを要素

•

記事

独立

い

ン だaィtic」ら> そ 以外 汎用的

ン だイらctiんを>

•

だaィtic」ら> だイらctiんを>要素

親要素

構わ い

 

れらaよらィ要素 りんんtらィ要素



説明文

い 図表

表

•

要素 本文

参照

本文

別

ー

切 離 こ

かみきク ン

ツノ

ツノ

科 蛙

かbrき 科 ベ ツノ

比較

ツノ 尖っ い

特徴

かbrきかa hrefが"#みhまtま"き

ク ン

ツノ

画像か/aきか/みき

か

figure

idが"みhまtま"き

かimg srcが"frまg.jみg" widthが"100みx"き

か

figcaみtiまn

きク ン

ツノ

か/

figcaみtiまn

き

か/

figure

き



動画 ェiよらん

音声 aウよiん

再生

•

要素 使い方

同

•

対応

だイんウィcら>要素 子要素 使う

かvideま srcが"videま.mみ4" cまntrまls autまみlay lままみきか/videまき

かaudiま cまntrまls autまみlay lままみき

か!–-

対応

い

イ タイ に適合

イ

使用--き

かsまurce srcが"audiま.まgg" tyみeが"audiま/まgg" mediaが"all"き



字幕

け

•

ほらbVへへ形式 作成

キ

ェiよらん要素

埋 込

かvideま srcが"videま.mみ4"き

かtrack srcが"ja.vtt" srclangが"ja" labelが"日本語" kindが"subtitles"

defaultき

かtrack srcが"en.vtt" srclangが"en" labelが"英語" kindが"subtitles"き

か/videまき

_てごBVTT

00:00:01.000 --き 00:00:05.000

にち

00:00:06.000 --き 00:00:11.000

め



ン 必要

ン ン

埋 込

•

以前

実装

い 要素

仕様

組 込

HへMLす

•

Qウic「へimら

ン 必要

埋 込 例

•

ン不要 外部 ソー

SVに HへML

埋 込 場合

だんbjらct>要素 使う

かembed srcが"file.mまv"き



重要箇所 表

•

制作者

く

ー ー

重要 箇所 検索結果

ー

•

多く

黄色く表示

Mまnaca

かmarkきしTML5か/markきによ

バイ

開発環境



だァィんるィらイイ>

•

進捗状況 表



だmらtらィ>

•

範囲内 数 量 割合

表

かみrまgress valueが"75" maxが"100"き100%中75%

完了か/みrまgressき



だtimら>

•

日付や時刻 表

•

よatらtimら属性 省略時 内容 キ

ン

ー

認識可能

形式 指定



だよata>

•

日付以外

ー

表

•

ェa」ウら属性

ン

ー

認識可能 形式 指定

かtime datetimeが"2001-05-15 19:00"きMay 15か/timeき

かdata valueが"30"き 十歳か/dataき



付与

•

だィウbオ> 対象 キ

ー

•

だィt>

キ

指定

•

だィァ>

未対応

表示

かrubyき

子守熊

かrみき か/rみき

かrtきコ

か/rtき

かrみき か/rみき

か/rubyき



向

異

キ

埋 込

•

文字

右

左 記述

自然言語

ー

こ

前後

キ

入 替わ

配置

現象 回避

かulき

かliきUser Name: かbdiきjamesか/bdiき 2014/5/28か/liき

かliきUser Name: かbdiきsteveか/bdiき 2014/6/19か/liき

かliきUser Name:

かbdiき

نايإ

か/bdiき

2014/7/20か/liき

か/ulき



キ

改行

良い位置 指定

•

一般的

ー

含

い

や記号 並び

改行

表示

•

横幅 狭く文章 表示

い場合

だエbィ> 挿入

い 箇所 改行



のaェaScィiァt

描画

要素

•

具体的 描画方法 Lらェら」ざ 範囲

•

Lらェら」さ

キ ン

描画

図形 種類 知

くこ



四角形/多角形/円弧/画像



ー

入力候補 定義

•

定義

入力候補

キ

付与

こ

かdatalist

idが"keywまrds"

き

かまみtiまn valueが"Mまnaca"き

かまみtiまn valueが"Onsen"き

かまみtiまn valueが"Asial"き

か/datalistき



公開鍵 秘密鍵 生成

•

ー 送信時 公開鍵 秘密鍵 生成

•

秘密鍵

ー

保存

公開鍵

ー ー 送信

•

ー ー

ン 証明書 生成

ン

信頼性 確保

目的

用途 考え

かfまrm actiまnが"keygen.みhみ" methまdが"みまst"き

かkeygen nameが"key" keytyみeが"rsa"き

かinみut tyみeが"submit" valueが" ー 送信

"き

か/fまrmき



計算結果

表示

•

ー ー 対

表示

こ

目的

ー 送信

い

かfまrm まninみutが"result.value が みarseじnt(みrice.value * 1.08)"き

かinみut tyみeが"number" nameが"みrice" valueが"0"き

税込：

かまutみut nameが"result"き0か/まutみutき

円

要素名

説明

baイeりんをt

基準

ン

色 指定す

biる

キ

一回 大 くす

ceをteィ

コン ン

中央 配置す

りんをt

キ

ン

色 指定す

イtィi「e

取 消し線 引く

tt

等幅

ン

指定す

りィame

ー 分割さ

ン

表示す

ー

指定す

りィameイet

ン

ー 分割す

をんりィameイ

りィame要素 利用

い

表示内容 記述す

削除

要素名

変更前

変更後

b

太字表示

他 区別し い キ

表す

i

斜体表示

専門用語

表す

イ

取 消し線

もう正確

い キ

表す

ウ

下線

伝わ

くい ま

本来 異

表記 表す

れィ

罫線

意味的 段落 表す

イma」」

キ

小さく表示す

注釈や細目 表す

イtィんをる

キ

強調表示す

重要性 表す



ー

ン属性

•

だiをァウt>要素 付与

 イウbmit時

行

く



ィらアウiィらよ

必須



ァattらィを

正規表現



miを

最小値



maォ

最大値



maォ」らをるtれ 最長文字数

前：かinみut tyみeが"text"

required

き

郵便番号：かinみut tyみeが"text"

みatternが"^[0-9]り3}-[0-9]り4}$"

き

年齢：かinみut tyみeが"number"

minが"18" maxが"99"

き

じこ：かinみut tyみeが"text"

maxlengthが"6"

き



iをァウt  tオァら属性値

•

ウィ」やらmai」 指定

場合

ー 送信時 べRL

ー

形式

正 い

ー

ン 行わ

•

ィaをるら 指定

ン

ー

cん」んィ 指定

ー

表示

べI 拡張 行わ

URL：かinみut tyみeが"

url

"き



独自 ー 属性

•

利用

値 要素 保持

よata‒ 始

属性

自由 定義

こ

かulき

かli

data-idが"0001"

き

か/liき

かli

data-idが"0002"

き

か/liき

かli

data-idが"0003"

きいち か/liき

か/ulき



疑似要素 疑似

種類

•

でSSざ 試験範囲 含

•

iよ

/要素型

/

/属性

•

子

/子孫

/隣接

/間接

•

疑似要素 :bらりんィら/:aりtらィ/:ダィイt‒」iをら

•

疑似

:ダィイt‒cれi」よ/:actiェら/:」iを「/:れんェらィ/:taィるらt/:をんt



継承

•

基本的 子孫要素 継承

•

一部 継承

い

継承

iをれらィit 指定

div り

bまrder : sまlid 1みx #fff;

}



競合

い 場合 優先順位 決定

さ.

でSS 種類

ざ.

種類 数

重 付け

さ.

イtオ」ら属性 指定

ざ.

iよ

数 多い

優先

し.

 んィ 属性

 んィ 疑似

  数 多い

優先

じ.

要素型

 んィ 疑似要素  数 多い

優先

し.

出現順

さ.

最 後 出現

記述 優先

!imみまrtant付 ユー CSS

>

!imみまrtant付 文書作成者CSS

>

文書作成者CSS

>

ユー CSS

> 

標準CSS



　 ン ン 領域 エiよtれ,れらiるれt

内側 余白 ァaよよiをる  

枠線 bんィよらィ

外側 余白 maィるiを

構成

width: 80みx

height: 40みx



でSSし

変更点

•

bんォ‒イiカiをる

エiよtれ れらiるれt 指定値 bんィよらィ

含

値

こ

可能



bんォ‒イiカiをる : cんをtらをt‒bんォ

従来通



bんォ‒イiカiをる : bんィよらィ‒bんォ

bんィよらィ

幅 高

含



bんィよらィ/ァaよよiをる

値

•

値

：上下左右

同 値

•

値

：上下   左右

•

値

：上　左右　下

margin: 10みx;

margin: 10みx 20みx; /*

10みx, 左右20みx */



段組

•

長い文章

指定

数 分割

表示

こ

分割し 表示

す こ

ます こ

３

つ

分

長

い文章

指

定し

数

割し

ー

す



な」らォib」ら てんォ 可変

•

要素 中央揃えや均等揃え

配置 簡単 行うこ

な」らォ ン

な」らォ

な」らォ

な」らォ

主軸 交差軸



tィaをイitiんを

•

変更

際

変化 過程

ー

ン 表示



例：要素

ーソ

乗

背景色 赤

青 変化



aをimatiんを

•

tィaをイitiんを

違い

ー

ン 連続 実行

こ



例：要素

ーソ

乗

背景色 赤→青→緑→黄色

う 変化



tィaをイりんィm

•

要素 対

移動 回転 拡大 傾斜 行うこ

img り

transfまrm: rまtate(90deg); /* 画像 90度回転 */

}

 

ン

•

‒エらb「it‒ / ‒mんカ‒ / ‒ん‒ / ‒mイ‒　

 

•

表示 制御 よiイァ」aオ/ェiイibi」itオ

•

影 bんォ‒イれaよんエ / 切 抜

c」iァ / 角丸がbんィよらィ‒ィaよiウイき

 

色

•

ー ー  / 

ーネー  / ィるb / ィるba

 

ン

•

ほらb

ン  / 

単語間隔や行高

/ 装飾 色や影



•

特性

幅

応

でSS 切 替え 方法

横幅

800px

未満

横幅

以上

800px

さ.

でSS

内

指定

ざ.

だ」iを「> でSS

読 込

指定

@media

screen and (min-width: 800みx)

り

bまdyり

backgrまund-cまlまr: #000

}

}



ー

ン

ー

ー

•

画面 幅 合わ

横幅 調整

•

ン ン

％単位 指定



•

ー

分割

枠 沿

ン ン

配置

•

画面

あわ

幅や数 調整

•

実現

代表的

ー ワー

てんんtイtィaァ

あ



ー

ンキ

•

キ

記述

ー

環境 保存

ン状態

ー

環境 保存

表示

ほどて ー

ン

づ.れtm」

て.れtm」

キ

づ.れtm」 て.れtm」

1. キャ

ニ

確認

2. 

ン ー

HへMLす

認定資格　

　教科書

HへML教科書

HへMLす

さ