オープンソースカンファレンス
2024 Hokkaido

HTML5 プロフェッショナル認定試験 レ
ベル１解説セミナー〜未経験から資格取得までの道と実務での活かし方〜
2024年6月29日（土）@OSC 2024 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 2024. 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/

2© LPI-Japan 2024. All rights reserved.

自己紹介

小倉 有貴
株式会社フォーク
フロントエンドエンジニア

2022

株式会社フォークに新卒で入社
HTML5 プロフェッショナル認定試験レベル１を取得

2023

レベル２を取得

2024LinuC レベル１を取得

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

3© LPI-Japan 2024. All rights reserved.

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

Lv1: 83名
Lv2: 19名※2024年5月時点

https://www.fork.co.jp/

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

4© LPI-Japan 2024. 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© LPI-Japan 2024. 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/

6© LPI-Japan 2024. All rights reserved.

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

7© LPI-Japan 2024. All rights reserved.

2つのレベル
今回はこちらHTML5 レベル1
HTML5、CSS3などの最新のマークアップを使ってマルチデバイスに対応したコンテンツをデザイン・制作できる

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

8© LPI-Japan 2024. All rights reserved.

2つのレベルと得られるスキル

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

9© LPI-Japan 2024. All rights reserved.

スキルHTML/HTML5

マルチメディア

マークアップHTML5に関するタグの用途、構造の組み立て方に関する技術

3D・動画・音声ファイルなどのマルチメディアコンテン
ツの表示・再生に関する技術

グラフィックス

ユーザビリティJavascriptやCSSなどを用いて、動的にグラフィックスを生成したりアニメーションを実現したりする
技術

JavascriptやCSSなどを用いて、デザイン仕様に沿った見やすい表示や操作しやすいコンテンツを作成するための技術

レスポンシブWebデザイン

パフォーマンス

一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術

ストレージや並列処理を使ってコンテンツを効率よく高速に動作させたり、オフラインでも動作する仕組みを作るための技術

通信・デバイスアクセス系APIJavaScriptからクラウドと通信をして情報の送受信を行ったり、センサーなどのデバイスにアクセスしたりする技術

JavaScriptプログラミング

Level.2
JavaScriptを使って、動的な Webコンテンツを作成する技術。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

10© LPI-Japan 2024. All rights reserved.

レベル1試験について

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

試験問題数

約60問

受験料

￥16,500（税込）

試験実施方式

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

受験場所

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

合否結果

試験終了と同時優位性の期限

5年間

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

11© LPI-Japan 2024. All rights reserved.

試験のバージョン
最新のレベル 1の試験のバージョンは Ver2.5ですVer2.0 2017年4月1日〜2022年7月31日
Ver2.5 2022年2月1日〜
Ver2.0とVer2.5の違いについては公式サイトで案内されています
https://html5exam.jp/images/outline/html5_lv1_ver25.pdf

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

12© LPI-Japan 2024. 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© LPI-Japan 2024. All rights reserved.

未経験から資格取得までなぜ取得したか弊社がLPI-Japan HTML5 のアカデミック認定校ということもあり新人研修の一環で、HTML5 レベル１の試験を受験し合格することが目標の１つであった。

学習期間約３か月半。
入社１か月前の３月頃から本格的に勉強を始め、４～５月の社内研修や自習時間を利用して学習を進める。
☆公式による学習期間の目安は３か月～半年程度→ 自分のスキル感や学習に割ける時間量から受験日の目安を決めておき、そこから逆算して勉強するとよい
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

14© LPI-Japan 2024. 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© LPI-Japan 2024. 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/

16© LPI-Japan 2024. All rights reserved.

未経験から資格取得まで入社まで教本をしっかり読み始めたのは３月の初め頃。
見慣れない用語が並び、その都度サイトなどで調べて最低限の知識だけは身に着けるようにした。

入社後４月～５月半ばまでの約１か月半の新卒研修→ この期間にサイト制作などのアウトプットを通して、比較的しっかりとHTML / CSSの基礎を学ぶことができた。
研修に加えて、自習時間や土日を使って試験勉強。
☆導入には動画学習がおすすめ
Udemy など
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

17© LPI-Japan 2024. All rights reserved.

未経験から資格取得まで～学習教材～
教本やオンライン学習ツール
公式サイトで紹介されている認定教材を使用するのがおすすめ
https://html5exam.jp/measures/textbook.html▼ 実際に使用したもの-

HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.5対応版-Ping-t WEB問題集

調べものに利用したサイト-MDN Web Docs
→ Web 開発者のための公式ドキュメント。ウェブに関するあらゆる技術を網羅。

-「分かりそう」で「分からない」でも「分かった」気になれる IT用語辞典→ イラストや具体例を通して初心者でも理解しやすいやさしい解説が特徴。
用語について広く浅く理解したいときに便利。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

18© LPI-Japan 2024. All rights reserved.

未経験から資格取得まで～学習方法～① とにかく問題を解いてみる
教本の練習問題や公式サイトのサンプル問題（難易度やや高め）、オンライン問題集などを使って問題数をこなす→ 間違えたところや理解できなかったところは教本を読み込む
わからないところは先述したサイトで調べる② 実際にコードを書いてみる
教本を読むだけでは理解できない部分は、コードを書いてアウトプットする
CodePen などのツールを使うとコードの実行結果を即座に確認できる③ ①②をひたすら繰り返す
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

19© LPI-Japan 2024. All rights reserved.

未経験から資格取得まで入社から約２か月半後の６月中旬・・・

HTML5 プロフェッショナル認定試験レベル１に合格

現在・・・
フロントエンドエンジニア３年目となり、Web サイト制作に携わる。
レベル２やLinuC レベル１の試験にも挑戦し、フロント領域以外の知識も持つ守備範
囲の広いエンジニアを目指して奮闘中です。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

20© LPI-Japan 2024. 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© LPI-Japan 2024. All rights reserved.

実務での活かし方
コーディングは、考えるべきことがとても多い・・・

セマンティックなHTMLSEO 対策
アクセシビリティ
クロスブラウザ対応

レスポンシブデザイン

パフォーマンス最適化

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

22© LPI-Japan 2024. 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. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

23© LPI-Japan 2024. All rights reserved.

セマンティックな HTMLWeb ページも文書の一つであり、適切な文書構造を持つことが大切。
【対象】
本や資料など → 人
Web ページ→ 人、コンピュータ

コンピュータが、Web ページに記述されている情報をより的確に解釈できるように、様々な構成要素（テキスト、画像、リンク、フォーム etc.）を組み立てて作成する。
その構成要素のことをHTML では、要素（Element）と言う。
様々な要素をその意味や役割に基づいて使用することで、ウェブコンテンツの構造や内容を明確にできる（＝セマンティックなHTML）。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

24© LPI-Japan 2024. All rights reserved.

セマンティックな HTMLheader 要素：ヘッダー
nav 要素：ナビゲーション（navigation）
h1 ～ h6 要素：セクションの見出し（heading）▼「HTML5プロフェッショナル認定試験」公式サイト（ヘッダー）
headerh2

navh1

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

25© LPI-Japan 2024. All rights reserved.

セマンティックな HTMLWeb ページ全体が様々な要素の組み立てによって構成されている。
各要素の役割※ を理解し、適材適所を意識してHTML を記述する。
※ 要素名の元となる英単語の意味から連想すると覚えやすい■ 関連する出題範囲•

1.1 Webの基礎知識ᵒ•

1.1.2 HTMLの書式

1.3 要素☆ ポイント•

闇雲に要素を暗記するのではなく、実際に手を動かして文書を組み立ててみる•

公開されているWeb サイトのHTML を見てみる→ ブラウザ上で右クリックしてメニューを開き、「ページのソースを表示」 or 「検証」

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

26© LPI-Japan 2024. All rights reserved.

レスポンシブウェブデザイン「1つのHTML で、デバイスの特性（主に画面横幅）に応じてレイアウトやデザインを変更する手法」－普段気を付けていること－•

画面幅を変化させたときに、表示が崩れないか（コンテンツが画面からはみ出る、コンテンツが詰まりすぎていないかなど）•

コンテンツの内容（テキスト量や要素の数など）を変化させたときに、不自然な見え方にならないか•

スマホ画面で見たときに、画像が粗くないか•

CSS の記述が最適化されているか（不要なプロパティがあるなど）など・・・

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

27© LPI-Japan 2024. All rights reserved.

レスポンシブウェブデザイン●

セレクタの指定方法●

プロパティの種類●

メディアクエリ※の種類※特定の条件（メディアタイプや画面サイズなど）に基づいて異なるスタイルを適用するための機能→ 出題範囲に指定されているもの▼ CSS の書式
セレクタ

h1 {
color: white;
font-size: 24px;
text-align: center;}
プロパティ名プロパティ値

は頻出なため極力覚える■ 関連する出題範囲•

1.2 CSS

•

1.4 レスポンシブWebデザイン
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

28© LPI-Japan 2024. All rights reserved.

レスポンシブウェブデザイン▼ HTML▼ CSS<div class="parent"><p>テキストが入ります。</p><div><p>テキストが入ります。</p></div></div>.parent > p {①font-weight: bold;}.parent p {②font-weight: bold;}①②

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/29© LPI-Japan 2024. All rights reserved.

レスポンシブウェブデザイン▼ 結合子とそれが示す適用対象
結合子

適用対象

セレクタ A セレクタ B「セレクタA」の要素の内部に含まれている「セレクタ B」の要素 ※結合子は空白文字

セレクタ A > セレクタ B「セレクタA」の直接の子要素である「セレクタ B」の要素

セレクタ A + セレクタ B

共通の親要素を持つ要素の中で「セレクタ A」の直後にあらわれる「セレクタB」の要素

セレクタ A ~ セレクタ B

共通の親要素を持つ要素の中で「セレクタ A」よりも後にあらわれる「セレクタB」の要素

出典: HTML5プロフェッショナル認定試験レベル1 対策テキスト&問題集 Ver2.0対応版(p. 153). 株式会社 マイナビ出版.

その他にも、クラスセレクタ、ID セレクタ、疑似クラス、疑似要素 などセレクタの指定方法はさまざま。
ふとした指定ミスでスタイルが期待通りに当たらず、ハマってしまうことも・・・

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/30© LPI-Japan 2024. All rights reserved.

レスポンシブウェブデザイン☆ ポイントHTML 同様、実際に手を動かして基本的なスタイルを書いてみると◎→ プロパティ値ごとの表示のされ方、セレクタの指定方法によってスタイルが適用される要素が異なることなどを確認できる※CSS は日々進化しており、すべてのプロパティを覚えるのは不可能。
実務でも使い方が分からないものについては、 公式ドキュメント で調べながら書くことが多いです・・・

様々な記述方法を試してみて引き出しを増やしていくことが大切→ 柔軟にCSS を書くことができ、UI の幅が広がる

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

31© LPI-Japan 2024. All rights reserved.

パフォーマンス最適化
ユーザーにとって使いやすく満足度の高い Web サイト

パフォーマンス最適化

サーバーHTMLCSSAPIJavaScript

画像 / メディア / フォント

レスポンシブデザイン

HTTPリクエスト

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

32© LPI-Japan 2024. All rights reserved.

パフォーマンス最適化
目に見える部分だけでなく、Web ページが表示される仕組みなどの目に見えない部分についても理解しておくことが大切。

■ 関連する出題範囲••

1.1 Webの基礎知識ᵒ1.1.1 HTTP, HTTPSプロトコル

ᵒ1.1.3 Web関連技術の概要

1.5 APIの基礎知識☆ ポイント•聞き馴染みのない単語が多いが、おおまかなイメージをつかむことを意識•

ブラウザ検証ツールの「ネットワーク」から、通信のログを確認→ ブラウザ上で右クリックしてメニューを開き、「検証」をクリック
The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

33© LPI-Japan 2024. 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/

34© LPI-Japan 2024. All rights reserved.

最後に資格取得の所感
Web コンテンツ制作に関わる知識の最も基礎的な部分が出題されるため、全体を広く把握することができる→ 初学者がWeb 制作について学ぶのに適している

覚えることも多く大変ではあるが、きちんと理解しながら進めると、実務の中のふとした瞬間に役立つ知識を身に着けられるThe HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

35© LPI-Japan 2024. All rights reserved.

最後に未経験から始めると、難しい言葉や分からないことばかりで、つい勉強することを投げ出してしまいたくなります ...

-昨日より１問多く解けた-

学んだHTML / CSS を使ってコーディングできた
小さな成功体験の積み重ねなどモチベーションの維持

学んだことはいつかどこかで必ず活きるはずなので、少しずつ頑張りましょう！

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

36© LPI-Japan 2024. 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© LPI-Japan 2024. 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/

38© LPI-Japan 2024. All rights reserved.

公式アカウント、 URL
HTML5プロフェッショナル認定試験のサイト
http://www.html5exam.jp/Twitter@html5CertFacebook
https://www.facebook.com/html5exam

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

The HTML5 Logo is licensed under Creative Commons Attribution 3.0. Unported by the W3C; http://creativecommons.org/licenses/by/3.0/

39© LPI-Japan 2024. 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/40© LPI-Japan 2024. All rights reserved.