Open Source Conference 2022
Online Hokkaido

HTML5プロフェッショナル認定試験
レベル1解説セミナー〜試験対策の要点と実務を行う上でのポイント〜
2022年6月25日（土）@OSC 2022 Hokkaido

株式会社フォーク坂東 明信
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介

坂東 明信
株式会社フォーク 札幌ブランチ所属 フロントエンドエンジニア
趣味：
ライブ・コンサート観賞、ピアノ演奏
所有資格：
初級システムアドミニストレータ、基本情報技術者、HTML5プロフェッショナル認定試験レベル1

2013

前職のWebサイト制作会社に入社

2019

株式会社フォーク入社
HTML5プロフェッショナル認定試験レベル1取得

2022

レベル2取得に向けて勉強中
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介
株式会社フォーク
＠渋谷、札幌（ HTML5プロフェッショナル アカデミック認定校）

HTML5プロフェッショナル認定試験の合格者
Lv1: 68名※2022年6月時点

私が所属する札幌ブランチでは、10名がレベル1に合格しています

https://www.fork.co.jp/
https://4009.jp/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

本日の目次★ HTML5プロフェッショナル認定試験について★ 実際に取得するまでに行った事とおすすめの勉強方法★ 実務で気をつけているポイント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

HTML5プロフェッショナル認定資格について

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

HTML5プロフェッショナル認定試験とは特定非営利活動法人エルピーアイジャパン（LPI-Japan）が、HTML5、CSS3、JavaScriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定制度

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

HTML5とHTML Standard

HTML5 は2021年1月28日に廃止され現在の標準仕様はHTML Standard(HTML Living Standard)に変わりましたがその内容には大きな違いはありません

試験の名称はHTML5プロフェッショナル認定のまま継続されており、これまでにHTML5の学習をされていた方はその知識を資格取得・実務に活かせます
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

2つのレベルHTML5 レベル1(今回解説するのはコチラ)
HTML5(HTML Standard)、CSS3などの最新のマークアップを使ってマルチデバイスに対応したWebコンテンツをデザイン・制作できる。

HTML5 レベル2
Javascriptなどの最新のマークアップを使ってシステム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

レベル1試験について

所要時間90分（機密保持契約とアンケートの時間を含む）

試験問題数

約60問

受験料

￥16,500（税込）

試験実施方式

コンピュータベーストテスト（CBT）※マウスによる選択方式がほとんどですが、入力問題も多少出題されます。

受験場所

全国各地の試験センターでの受験か、自宅や職場からのオンライン受験が可能

合否結果

試験終了と同時有意性の期限

5年間

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験のバージョンについてレベル1の試験のバージョンが変わりました
Ver2.0 2017年4月1日〜2022年7月31日
Ver2.5 2022年2月1日〜
試験内容が大きく変わるわけではないようですが、Ver2.0で受験したい方は受験予約は早めの方がよいかもしれません
Ver2.0とVer2.5の違いについては公式サイトで案内されています

https://html5exam.jp/images/outline/html5_lv1_ver25.pdf

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

出題範囲

1.1 Webの基礎知識

1.2 CSS
1.3 要素1.4 レスポンシブWebデザイン
1.5 APIの基礎知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

1.1 Webの基礎知識
1.1.1 HTTP, HTTPSプロトコル 重要度 8
HTTP, HTTPS, HTTP/1.1 HTTP/2(Ver2.5のみ),ステータスコード等

1.1.2 HTMLの書式 重要度 9
基本的なHTMLの記述方法 文書型宣言,文字参照,メタ情報,リンク指定方法等

1.1.3 Web関連技術の概要 重要度 6
セッション,Ajax,画像ファイルの種類等

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

1.2 CSS
1.2.1 スタイルシートの基本 重要度 7
セレクタ,クラスセレクタ,IDセレクタ,疑似要素,疑似クラス等

1.2.2 CSSデザイン 重要度 9
各種CSSプロパティ

1.2.3 カスケード(優先順位) 重要度 2
CSSの優先順位

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

1.3 要素
1.3.1 要素と属性の意味 (セマンティクス) 重要度 10
基本的なHTML要素

1.3.2 メディア要素 重要度 6
ビデオやオーディオ関連の要素

1.3.3 インタラクティブ要素 重要度 7ユーザが操作可能な要素

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

1.4 レスポンシブWebデザイン
1.4.1 マルチデバイス対応 重要度 7
フルードグリッド,フルードイメージ,viewport,ファビコン/アイコン等

1.4.2 メディアクエリ 重要度 5
メディアタイプ,メディア特性等

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

1.5 APIの基礎知識
1.5.1 マルチメディア・グラフィックス系API概要 重要度 5
メディア関連要素のAPIが提供する機能等

1.5.2 デバイスアクセス系API概要 重要度 4
デバイスに搭載されているセンサーなどの機能に関するもの等

1.5.3 オフライン・ストレージ系API概要 重要度 4
ブラウザ側でのデータ保存やバックグラウンド処理に関するもの等

1.5.4 通信系API概要 重要度 3
Ajax,WebRTC等

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

資格取得までの勉強方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得のきっかけ

前職でもフロントエンドとして働いていましたが前職場にはエンジニアがあまりおらずほぼ独学での勉強だけで業務を行っていました

弊社がLPI-Japan HTML5のアカデミック認定校だったこともあり入社後に取得を勧められた事と資格を取得する事によって自分が書くコードのクオリティをある程度保証できるのでは？と考え受験してみる事にしました

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

資格取得までに行った事取得に向けて準備•本を購入して通勤時間（当時はまだテレワークではなかった）や帰宅後・業務の隙間時間等に一通り読み込み
HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版•

会社の本棚にあった問題集と試験公式サイトに載っていたサンプル問題をひたすら解く
HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマスター問題集
Ver2.0対応

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

資格取得までに行った事
勉強時間
試験勉強開始から受験までの期間：およそ3ヵ月

実際の勉強時間：30時間程

勉強開始して1-2ヵ月目はあまり時間が取れていなかったので期間はそれなりにかかってしまいましたが、短期集中でしっかりやれば実務経験者の方は1ヵ月前後、未経験の方でも2ヵ月前後で合格できる資格だと思います

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

おすすめの勉強方法

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

おすすめの勉強方法
未経験者の方(HTML・CSSを書いた事がない方)
最初から参考書や問題集に手を出しても理解に至らず暗記力での勝負になってしまいがちなので、まずは実際にHTML・CSSを触ってみて簡単なレスポンシブサイトが組めるようになったら参考書・問題集での学習に移行するのがおすすめです

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

おすすめの勉強方法
触ってみるって具体的には？
未経験者の方はまずドットインストールのHTML/CSS周りのコースで学習してみるのがおすすめです
ドットインストール https://dotinstall.com/

他にも初心者向けの学習サイトはいくつかあるので以下のもの等を試してみるのもよいかもしれません
progate https://prog-8.com/
udemy https://www.udemy.com/など※いずれも一部を除いて有料です

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

おすすめの勉強方法
触ってみるって具体的には？ その2
前述の学習サイトなどで一通り学んだら好きなサイトの模写を試してみましょう
課題となるサイトに迷ったら「HTML CSS 模写」などで検索すると模写におすすめのサイトや課題を紹介しているページが見つかるのでそちらをやるのも◎クリックしたらメニューがでてくる、のような一般的にJavaScriptによって実装する部分は無視してよい(JavaScriptはLV2の範囲)のでレスポンシブでのレイアウト組ができるようになりましょう

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

おすすめの勉強方法
実務経験者の方(HTML・CSSを普通に書く事ができる方)問題集と公式サイトのサンプル問題を解く
公式サイトのサンプル問題で100問以上→の問題集で模試２回分(書籍内1回分、ダウンロードで１回分)の問題が解けます
不明点があれば調べて対策して再度解く、を繰り返し行う
私はやってないですが上記をやってもまだ不安ならudemyにもhtml5の模試を販売してる方がいるようです(有料)The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験で気を付けるポイント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験で気を付けるポイント

LV1試験は難易度の高い試験ではないですが試験の出題範囲は広く、実務は問題なく行えているという方が対策無しにそのまま受けても合格できる可能性は高くはないと思います
ここからはサイトをただ作っているだけ、、、

では落としがちなポイントについていくつかかいつまんで解説します

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験で気を付けるポイント
省略可能なタグ
以下のタグは条件によっては省略してもHTML的な文法エラーとはなりません
開始タグ、終了タグ共に省略可能
html,head,body,colgroup,tbody

終了タグが省略可能
li,dt,dd,p,rt,rp,optgroup,option,caption,thead,tfoot,tr,th,td

参考情報
https://html.spec.whatwg.org/multipage/syntax.html#optional-tags※省略を推奨しているのではなく、あくまで省略が可能であるだけなので特に理由がなければ省略せずにキチンと書きましょう

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験で気を付けるポイント
HTTPステータスコード
ステータスコードは大まかな分類とよく出てくるものを重点的に覚えましょう
100番台 情報レスポンス
200番台 成功レスポンス
300番台 リダイレクトメッセージ- 301 恒久的な移動- 302 一時的な移動
400番台 クライアントエラーレスポンス- 403 アクセス権限がない- 404 ファイルが存在しない
500番台 サーバエラーレスポンス- 500 サーバ側でエラー- 503 サーバダウン

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験で気を付けるポイント
数値指定系
cssのプロパティの値に複数の数値を指定できるもの等はその順や数がどう対応しているのかまで覚えておきましょう
padding,margin: 上 右 下 左 || 上 左右 下 || 上下 左右 || ４方向border-radius: 左上 右上 右下 左下 || 左上 右上左下 右下 || 左上右下 右上左下 || 4角
background-position: 左 上
background: linear-gradient(角度, 上から, 下へ) ※角度指定は0deg(下から上)から時計回り
background: radial-gradient(内側から, 外側へ)
text-shadow: x軸距離 y軸距離 ぼかし
box-shadow: x軸距離 y軸距離 ぼかし 広がり距離etc

実務ではグラデーション等はデザインツールやジェネレータ等から生成したcssをコピペしたりも多いですが試験には細かい所までしっかり覚えて臨みま
しょうThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
破綻しにくいコードを書く
なんとなくで書いていてもそれなりに作れてしまうのがCSSのよい所ですが考えなしに書いていると簡単に破綻してわかりづらいコードになりやすいという側面もあるのがCSSです
わかりやすく保守性や再利用性の高いコードを書くために考えられたCSSの設計手法がいくつかあるので自分にあった設計手法を見つけましょう

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
BEM
クラスの命名をBlock, Element, Modifierの３つに分けて考える

OOCSS
小さなパーツを作成しそれらを組み合わせる事でページを作成する

SMACSS
ベース、レイアウト、モジュール、ステート、テーマに分けて考える

FLOCSS
上述の設計手法等の良い所を集めたような設計手法
それぞれに特徴がありどれが１番良いというものではありませんがまずはBEMから試してみるのがおすすめです
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
チェックツール
作成したコードが問題のないものであるかどうかの細かなチェックはチェックする側にも知識が求められますが文法エラーがないか・意図した文章構成（アウトライン）になっているかの確認にはチェックツールが便利です

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
文法チェックW3C Markup Validation Service
https://validator.w3.org/
・URLの入力・ファイルのアップロード
・ソースコードを直接入力のいずれかでそのhtmlのエラーをチェックできます

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
アウトラインチェック
HTML 5 Outliner
https://gsnedders.html5.org/outliner/
こちらもURL・ファイル・ソースコードを入力のいずれかでその文章構成をHTMLでどう解釈するかが確認できます

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実務で気を付けるポイント
IEについて2022年6月15日(日本時間では6月16日)、ようやくMicrosoftによるInternet Explorerのサポートが終了しました
そのバグの多さと未対応CSSプロパティの多さより数多のフロントエンドエンジニアを地獄に落としてきた
IEですがそのサポート終了により弊社においてもIE対応を考慮しなくてよい案件が増えてきています
IEのバグについてはここではお話しませんがIE対応を考慮しなければ使えるようになる
CSSプロパティの一部をご紹介します※実際にIEの対応をしなくてよいかどうかは各自・各社で判断ください
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.IE以外で使えるCSS
position: sticky
親要素の範囲内でスクロールに応じて要素を固定位置表示する
コンテナ内にsticky要素が1つの挙動サンプル

コンテナ内にsticky要素が2つの挙動サンプル

IEで同じ事を実現するにはJavaScriptを使用するかポリフィルを入れる必要がありました
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

IE以外で使えるCSS
line-clamp.line-clamp {display: -webkit-box;
overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 4;}

複数行での文章末尾を...で省略する(例文では4行を超えたら...で省略)
IEではtext-overflowによる1行までの文末処理が可能でしたがIE以外ではlineclampによる指定行数での文末処理が可能です

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

IE以外で使えるCSS
clip-path
任意の形やsvgなどで要素を切り抜く
clip-path polygon(54.48% 5.78%, 99.99%
25.42%, 80.61% 76.21%, 71.64% 48%,5.72% 77.25%, 67.04% 33.75%)//切り抜く形をコードで指定

clip-path url(#heart)//インラインSVGで指定

写真素材：
https://unsplash.com/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

IE以外で使えるCSS
IE対応を考慮しなくてよくなる事で今までできなかった事ができるようになる
実装に手間のかかっていたものが手早く実現できる
謎のバグによる検証作業に苦心する事が減るといった環境になってきています
IE対応をしなくてよくなる分、新しく使えるようになるものを覚えていかなければならないという側面はありますが、正しく書いているのに動かないといった事に労力を割く必要があったこれまでと比べると、HTML/CSSを扱いやすい・学びやすい環境になってきているのかなと思います

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

最後にHTML5プロフェッショナル認定試験 レベル1はあくまで資格の1つに過ぎず、これさえ取得したらマークアップ・フロントエンドエンジニアとしての実務が問題なく行えるというものではありませんが、未経験の方には基礎力を身に付けるための指針として、経験者の方には振り返りや知識の補強・定着のための再学習の一環として取り組める試験なのかなと思います。

またデザイナーやディレクターなどエンジニア以外の方がエンジニアとのコミュニケーションを円滑に進めたり、実装コストを考慮した仕様を考える際にも試験で問われるような基礎的な知識を学んでおくのはおすすめです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

ご清聴ありがとうございました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

ご質問

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

公式アカウント、URL

HTML5プロフェッショナル認定試験のサイト
https://www.html5exam.jp/

Twitter@html5CertFacebook
https://www.facebook.com/html5exam

過去のセミナーでの配布資料や、イベント情報などが配信されています。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.