© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
HTML5
認定資格
1
ン
解
原
健
株式会社
OSC 2017 Tokyo / Fall
自己紹
Web
専門学校
卒業後
2015
新卒
株
式会社
入社
HTML/CSS/JavaScript
用い
幅広い
Web
制作業務
従事
2016 12
HTML5
Lv1
得
原
健
24
歳＆
1992/12/24
＇
HTML5
Lv2
得
向
学習
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
3
会社紹
株式会社
＠渋谷
幌
＆
HTML5
認定校＇
従業員数：
161
＆
2017 8 24
日現在＇
HTML5
認定資格
格者
Lv1: 38
Lv2: 5
※
2017 8 22
日現在
https://www.fork.co.jp/
https://www.facebook.com/forkcorp/
研究開発
日解
主
容
1.
HTML5
認定資格
2.
HTML5
変わ
3.
資格
勧
理由
4.
試験概要
5.
試験
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
5
HTML5
認定資格
1. HTML5
認定資格
>
概要
HTML5, CSS3, JavaScript
最新
関
技術力
知識
公
厳
中立的
立
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
7
1. HTML5
認定資格
>
Lv.1
対象職種
Web
ン
ン
HTML
コ
Web
Web
開発者
ン
開発者
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
9
1. HTML5
認定資格
>
Lv.1
得
求
• HTML5
使
静的
Web
コン
ン
制作
•
体験
考慮
Web
コン
ン
設計
制作
•
ンや組
込
機器
利用可能
様々
対応
コン
ン
制作
• HTML5
何
うい
技術
使う
広範
1. HTML5
認定資格
>
人気
あ
資格
後
得
い資格
目
No.1!!
後
得
い
ン
資格
HTML5
認定資格
1
位
LPIC
2
位
現在必要
分
いう
く
後伸び続
分
HTML5
認定資格
高く評価
い
証
いえ
出
：
＠
IT
調査
2015.09
株式会社
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
11
1. HTML5
認定資格
>
Web
資格
中
最
求
い
理由
様々
分
HTML5
活用
い
HTML5
変わ
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
13
2. HTML5
変わ
>
概要
HTML4.01
実現
難
ン
構築
容易
文書構造
明確
書
う
•
動画や音声
ン
扱え
う
•
新
属性
増え
周
機能
強化
•
文書構造
表
増え
明確
文書構造
示
う
•
様々
API
追加
高
機能
持
2. HTML5
変わ
>
DOCTYPE
言
<!
DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
>
HTML4.01
<!
DOCTYPE html
>
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
15
2. HTML5
変わ
>
廃
属性
<blink>
文字
点滅
<big>
大
め
文字
<center>
キス
や画像等
センタ
ング
<strike>
取
消し線
廃
＆抜粋＇
<h1> - <h6>
align
<img>
longdesc, name, align, border, hspace, vspace
<table>
summary, width, frame, rules,
cellspacing, cellpadding, align, bgcolor
<input>
align, usemap, ismap
資格
勧
理由
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
17
3.
資格
勧
理由
>
Web
Web
ン
3.
資格
勧
理由
>
Web
•
実現可能
技術
把握
顧
対
体的
案
う
•
ン
対
得力
あ
言
う
コ
ン
滑
事
進
非技術者
あ
ネ
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
19
3.
資格
勧
理由
>
Web
ン
3.
資格
勧
理由
>
•
ン
Web
ン
実現方法
ン
•
ン等
演出
実装
く
ン
作業
体的
ン
検討
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
21
3.
資格
勧
理由
>
ン
Web
ン
ン
ン
3.
資格
勧
理由
>
ン
•
ン
ン
連携
以前
複雑
い
＆動的
処理
担う
JavaScript
担う
等＇
最適
実装方法
出
人
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
23
3.
資格
勧
理由
>
ン
ン
ン
Web
ン
3.
資格
勧
理由
>
ン
ン
ン
•
ネ
ワ
や
Web
基礎知識
身
•
曖昧
理解
書い
い
コ
い文書構造
ン
ン
く
周辺
基礎知識
身
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
25
3.
資格
勧
理由
>
共通言語
持
各々
知識
幅
広
コ
ン
や
試験概要
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
27
4.
試験概要
>
概要
試験実施方式
試験方式
コン
＆
CBT
＇
※ほ
問題
選択式
否結果
試験終了
時
所要時間
90
分＆機密保持契約
ン
時間
含
＇
問題数
約
60
問
格
ン
約
7
割
4.
試験概要
>
出題範
1.1 Web
基礎知識
1.2 CSS
1.3
要素
1.4
ン
Web
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
29
4.
試験概要
>
出題範
改定
い
＆
Ver1.0→Ver2.0
＇
2017 3 1
日
出題範
改定
背
HTML5
認定資格
供
始
約
3
経過
そ
間
HTML5
巻く環境
変化
適用分
拡大
部分技術
陳腐化
新技術
盛
込
変化
対応
目的
出題範
一部
4.
試験概要
>
出題範
改定
い
＆
Ver1.0→Ver2.0
＇
>
改定
容
2
●
ン等
携帯
対応
技術
出題範
追加
⇒
ネ
近い機能
組
込
先端
Web
ン開発
対応
●
関
出題範
追加
⇒
ン
利用
対応
知識
求
容
1
●
関連技術
関
出題
減少
⇒
ン
系
事
方
配慮
容
改定
●
HTML5
何
出来
知識や
Web
知識
問う問題
増加
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
31
試験
ン
5.
試験
ン
>
出題範
1.1 Web
基礎知識
1.2 CSS
1.3
要素
1.4
ン
Web
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
33
5.
試験
ン
>
1.1 Web
基礎知識
範
要
1.1.1 HTTP, HTTPS
コ
★★★★★★★★
★★
1.1.2 HTML
書式
★★★★★★★★★
★
1.1.3 Web
関連技術
概要
★★★★★★
★★★★
1.1.1 HTTP, HTTPS
コ
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
35
5.
試験
ン
> 1.1 Web
基礎知識
> 1.1.1 HTTP, HTTPS
コ
>
HTTP
通信
HTTP
通信
●●
情報ほ
い！＆
HTTP
＇
●●
情報あ
！＆
HTTP
ン
＇
開発者
詳細
確認可能
5.
試験
ン
> 1.1 Web
基礎知識
> 1.1.1 HTTP, HTTPS
コ
>
HTTP, HTTPS
違い
HTTP, HTTPS
違い
https
s
Secure
＝
安全
いう意味
暗号化
状態
通
信
い
運営
側
多少
予算
場
あ
信
頼性
向
い
あ
検索
ン
ン
https
否
SEO
評価
影響
動
見
い
そ
入力
い静的
SSL
入
増え
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
37
1.1.2 HTML
書式
5.
試験
ン
> 1.1 Web
基礎知識
> 1.1.2 HTML
書式
>
DOCTYPE
言
DOCTYPE
言
文書
ン
HTML
や
XHTML
作成
い
示
記述
HTML5
ン
書
方
あ
•
基
形
<!DOCTYPE
＋
1
個以
＋
HTML
＋
0
個以
＋
>
•
大文字
文字
問わ
い
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
39
5.
試験
ン
> 1.1 Web
基礎知識
> 1.1.2 HTML
書式
>
文字コ
指定
文字コ
指定
<
meta
charset=
"UTF-8"
>
値
utf-8, shift_jis, euc-jp
あ
5.
試験
ン
>
1.2 CSS
範
要
1.2.1
基
★★★★★★★
★★★
1.2.2 CSS
ン
★★★★★★★★★
★
1.2.3
＆優先
位＇
★★
★★★★★★★★
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
41
1.2.1
基
5.
試験
ン
> 1.2 CSS > 1.2.1
基
>
E:nth-child(n)
親要素
n
番目
子要素
E:nth-of-type(n)
親要素
兄弟関係
あ
E
要素
n
番目
E ~ F
E
要素
後
あ
F
要素
E > F
E
要素
子
あ
F
要素
E + F
E
要素
直後
あ
F
要素
E[foo]
foo
属性
持
E
要素
く
種類
あ
覚え
く必要
あ
あ
乱用
見
く
後々修
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
43
5.
試験
ン
> 1.2 CSS > 1.2.1
基
>
nth-child nth-of-type
違い
nth-child nth-of-type
違い
div
p
:nth-child
(
5
){
color
:
red
;
}
div
p
:nth-of-type
(
5
){
color
:
red
;
}
<
div
>
<
p
>1
目
p
</
p
>
<
p
>2
目
p
</
p
>
<
p
>3
目
p
</
p
>
<
h6
>
間
h6
</
h6
>
<
p
>
4
目
p
</
p
>
<
p
>5
目
p
</
p
>
<
p
>6
目
p
</
p
>
</
div
>
<
div
>
<
p
>1
目
p
</
p
>
<
p
>2
目
p
</
p
>
<
p
>3
目
p
</
p
>
<
h6
>
間
h6
</
h6
>
<
p
>4
目
p
</
p
>
<
p
>
5
目
p
</
p
>
<
p
>6
目
p
</
p
>
1.2.2 CSS
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
45
5.
試験
ン
> 1.2 CSS > 1.2.2 CSS
ン
>
ン
ン
CSS3
ン
軽く
動作
ン
入
や
く
利用
ン
非常
多く
ン
ン
演出
利用
• JavaScript
使わ
く
css
実装
•
単純
ン
JavaScript
利用
簡単
実装
• JavaScript
利用
ン
比
遜色
い
ン
＆
5.
試験
ン
> 1.2 CSS > 1.2.2 CSS
ン
>
ン
>
ン実装方法
- transition
transition-property
transition
効果
適用
CSS
指定
transition-duration
変化
要
時間
指定
transition-timing-function
ン
指定
transition-delay
変化
始
時間
指定
ン実装方法
- transition
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
47
5.
試験
ン
> 1.2 CSS > 1.2.2 CSS
ン
>
ン
>
ン実装方法
- @keyframes
ン実装方法
- @keyframes
div
{
animation
: name
1
s
ease
infinite
alternate
;
}
@keyframes
name
{
0%
{
width
:
50
px
; }
50%
{
width
:
100
px
; }
100%
{
width
:
200
px
; }
}
ン
開始
終了
任意
経過地点
設定
5.
試験
ン
> 1.2 CSS > 1.2.2 CSS
ン
>
ン
>
：
CodePen
JSFiddle
や
CodePen
実際
コ
書い
理解
深
実務
活
思い
.thumbnail > img
{
transition
:
opacity 0.4s ease-out
;
}
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
49
5.
試験
ン
>
1.3
要素
範
要
1.3.1
要素
属性
意味＆
ン
＇
★★★★★★★★★★
1.3.2
要素
★★★★★★
★★★★
1.3.3
ン
要素
★★★★★★★
★★★
1.3.1
要素
属性
意味＆
ン
＇
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
51
5.
試験
ン
> 1.3
要素
> 1.3.1
要素
属性
意味＆
ン
＇
>
ン
コン
ン
ン
コン
ン
HTML5
文書構造
明確
追加
ン
コン
ン
ン
範
定義
コン
ン
<
article
>
内容
単体
完結す
<section>
章
節
項
よう
見出し
そ
関す
内容を示す
した
っ
h1
見出し
必要
<nav>
ナビ
ーションを示す
<aside>
余談
補足情報を示す
1.3.3
ン
要素
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
53
5.
試験
ン
> 1.3
要素
> 1.3.3
ン
要素
>
ン
コン
ン
ン
コン
ン
操作
コン
ン
<video>
動画を再生す
際
使用します
属性
よっ
自動再生
ープ再生
ン
ー
ー
表示
を制御
ます
<audio>
音声を再生す
際
使用します
記述
仕方
video
タグ
一緒
す
<
video
controls
autoplay
poster
=
"image.jpg"
>
<
source
src
=
"sample.mp4"
>
<
source
src
=
"sample.ogv"
>
<
source
src
=
"sample.webm"
>
<
p
>
動画
再生
video
必要
</
p
>
5.
試験
ン
> 1.3
要素
> 1.3.3
ン
要素
>
ン
コン
ン
>
そ
ン
コン
ン
そ
ン
コン
ン
日付入力
<
input
type
=
"date"
>
<
input
type
=
"color"
>
選択
<
input
type
=
"text"
list
=
"dogs"
>
<
datalist
id
=
"dogs"
>
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
55
5.
試験
ン
>
1.4
ン
Web
ン
範
要
1.4.1
対応
作成
★★★★
★★★★★★
1.4.2
★★★★★
★★★★★
1.4.3
ン
最適化
★★★
★★★★★★★
1.4.1
対応
作成
5.
試験
ン
> 1.4
ン
Web
ン
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
57
各
格子状
わ
CSS
％指定
使う
閲覧
画面
組
替え
実務
非常
く使う習得必須
5.
試験
ン
> 1.4
ン
Web
ン
> 1.4.1
対応
作成
>
PC
ン
1
2
3
1
2
3
1
2
3
1.4.2
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
59
css2
大
用
指定
ン
及
あ
機能
強化
JavaScript
対応
方法
あ
使え
ン
振
分
5.
試験
ン
> 1.4
ン
Web
ン
> 1.4.2
>
all
すべ
メ
screen
一般的
スプ
tv
ビ
ン
5.
試験
ン
> 1.4
ン
Web
ン
> 1.4.2
>
〇
• 1
ソ
管理
ン
ン
容易
• URL
一
設定
不要
△
•
様々
や画面幅
応
設計
必要
あ
•
開発工数
び難易
/
理解
うえ
最適
方法
選択
要
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
61
5.
試験
ン
> 1.4
ン
Web
ン
> 1.4.2
>
@media
screen
and
(
max-width
:
320
px
){
幅
320px
以
適用
}
@media
screen
and
(
min-width
:
321
px
)
and
(
max-width
:
768
px
){
幅
321px
以
768px
以
適用
}
@media
screen
and
(
orientation
:
portrait
) {
向
縦
場
}
@media
screen
and
(
orientation
:
landscape
) {
向
横
場
}
<
link
href
=
"css/style.css"
rel
=
"stylesheet"
media
=
"screen and (max-width: 320px)"
>
1
記述
場
5.
試験
ン
>
1.5 API
基礎知識
範
要
1.5.1
系
API
概要
★★★★★
★★★★★
1.5.2
系
API
概要
★★★★
★★★★★★
1.5.3
ン
系
API
概要
★★★★★★★★
★★
1.5.4
通信系
API
概要
★★★
★★★★★★★
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
63
1.5.1
系
API
概要
5.
試験
ン
> 1.5 API
基礎知識
5.
試験
ン
> 1.5 API
基礎知識
> 1.5.1
系
API
概要
> Canvas
Canvas
系
API
一
Bitmap
扱う
Canvas API
あ
<canvas>
要素
html
配置
JavaScript
使用
形や文字
画
色や影
回転
可能
ン
実際
Canvas API
そ
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
65
1.5.3
ン
系
API
概要
5.
試験
ン
> 1.5 API
基礎知識
5.
試験
ン
> 1.5 API
基礎知識
> 1.5.3
ン
系
API
概要
>
ン
ン
ン
ン
ン状態
ン
利用
う
いう
様
追加
コン
負荷
軽減
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
67
学習方法
験
感想
6.
学習方法
験
感想
>
学習方法
教材
• LPI-Japan HTML5
認定教材
使用
通勤時間
効活用
•
通勤時間
往復
2
時間
効活用
短期間
2
周通
実際
書く
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
69
6.
学習方法
験
感想
>
験
感想
試験時間
十分
あ
余裕
解答
出来
試験
番
30
分程
時間
余
残
時間
見直
使用
分
い問題
解答時
問題
付
後
一気
見
直
あ
最初
1
問
時間
掛
ン
く解
答
進
ほう
い
感
見直
段階
修
解答
多くあ
見直
徹底
行う
最後
私
専門学校
HTML/CSS
基礎
学
HTML5
や
CSS3
新機能や変更点
Web
基礎知識
い
理解
浅い
資格
得
制作
あ
積極的
発言
議論
参加
う
コ
ン
文書構造
対
自信
持
う
実装
手
段
幅
広
実務
直結
知識
身
勧
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
71
© LPI-Japan 2017. All rights reserved. The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/
