HTML5プロフェッショナル認定 レベル1 攻略ガイド

HTML5レベル1では、タグ名やCSSプロパティを暗記するだけでなく、文書構造、レイアウト、レスポンシブ、Webプロトコル、アクセシビリティを一つのページとして理解することが重要です。

このページ内のミニケース、コード、計算例は、学習方法を説明するために資格合格.webが独自に作成したものです。実際のHTML5プロフェッショナル認定 レベル1の非公開試験問題を転載・再現したものではありません。

最初に、試験形式と勉強方法を同じものにしない

HTML5プロフェッショナル認定 レベル1は、CBT。約60問、試験本体約80分（NDA/アンケート込み90分）として実施されます。試験時間は90分、問題数は60問です。形式を知る目的は数字を暗記することではなく、どの練習に時間を使うかを決めることです。

同じ一時間を使うとしても、知識を増やす時間、実際に手を動かす時間、問題文を読む時間、計算やコードを追う時間では得られる力が違います。試験直前に足りない練習へ気付くのではなく、最初から試験形式に合わせて学習方法を選びます。

この試験で使う判断軸

1. HTMLは意味構造

section/nav/main等の役割。

この観点は、正解を丸暗記するためではなく、初めて見る文章や条件でも候補を減らすために使います。問題演習で迷ったときは、『HTMLは意味構造』のどこで判断が止まったかをメモすると、復習先を絞りやすくなります。

2. CSSはレイアウトモデル

box/flex/grid。

この観点は、正解を丸暗記するためではなく、初めて見る文章や条件でも候補を減らすために使います。問題演習で迷ったときは、『CSSはレイアウトモデル』のどこで判断が止まったかをメモすると、復習先を絞りやすくなります。

3. レスポンシブは制約を見る

viewport/media query/可変単位。

この観点は、正解を丸暗記するためではなく、初めて見る文章や条件でも候補を減らすために使います。問題演習で迷ったときは、『レスポンシブは制約を見る』のどこで判断が止まったかをメモすると、復習先を絞りやすくなります。

4. Web通信は流れ

HTTP、cache、Cookie、CORS。

この観点は、正解を丸暗記するためではなく、初めて見る文章や条件でも候補を減らすために使います。問題演習で迷ったときは、『Web通信は流れ』のどこで判断が止まったかをメモすると、復習先を絞りやすくなります。

HTMLは表示されるかだけで判定しない

見た目が同じでも見出し階層、ランドマーク、フォームラベルなど意味構造が違えばアクセシビリティや保守性が変わります。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

CSSはプロパティ辞典より原因を追う

width/height、margin/padding、box-sizing、position、flex/gridを親子関係と利用可能幅から考えます。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

レスポンシブは320pxで何が壊れるか

固定幅、長い文字列、表、画像、フォームが横スクロールを起こさないかを見る癖を付けます。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

画像・メディアは代替情報も見る

alt、figure/figcaption、動画・音声の扱いなど見えない/聞こえない利用者への情報も判断に含めます。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

HTTPはリクエスト→レスポンス→キャッシュ

メソッド、ステータス、ヘッダ、Cookie、キャッシュを一回の通信の中に配置します。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

試験対策と実装練習を分離しない

短いHTML/CSSをブラウザで確認し、DevToolsで要素・スタイル・レスポンシブを観察します。

ここで大事なのは、説明を読んで分かった気になるところで止めないことです。自分で短い例を一つ作る、条件を一つ変えて結果を予測する、別の選択肢が正解になる条件を言葉にする、という小さな確認を入れます。これだけで暗記と理解を分けやすくなります。

正解した問題も、理由を説明できなければ復習候補

選択式では、消去法や偶然で正解することがあります。実技試験でも、たまたま一度だけ手順が通っただけでは再現性があるとは言えません。そこで結果を正解・不正解の二択だけで見ないようにします。

• 正解し、理由や手順を説明できた
• 正解したが二択で迷った
• 正解したが時間を使いすぎた
• 不正解で知識が足りなかった
• 不正解で手順・計算・コード追跡を間違えた
• 不正解で問題文の条件を読み落とした

同じ正解でも、迷った問題は次に似た問題が出たとき再び崩れる可能性があります。逆に不正解でも単純な入力ミスなら、教材を最初から読み直すより、そのミスを起こした確認手順だけ直す方が効率的です。

資格合格.webでは『読む→試す→原因を見る』を短く回す

教材を全部終えてから問題演習へ進む方式は、範囲が広い資格ほど最初の内容を忘れやすくなります。一つのテーマを学んだら数問・数タスクだけ試し、間違えた原因を確認して戻ります。

1. 教材で一つのテーマを理解する
2. 問題または実技タスクで使ってみる
3. 正誤だけでなく迷った原因を確認する
4. 必要な比較図・教材へ戻る
5. まとまった段階で模擬試験や総合演習を行う

この往復を短くすると、『分からない範囲』ではなく『分からない理由』が見つかります。弱点分析も分野名だけを見るのではなく、知識不足、似た概念の混同、条件読み落とし、時間不足などへ一段掘り下げます。

学習の前半・中盤・仕上げで、同じ勉強を続けない

学習を始めたばかりの時期と、本番が近い時期では、同じ一時間でも使い方を変えます。最初から模擬試験だけを何度も回すと、知らない範囲を発見しても土台へ戻れません。反対に、直前まで教材を最初から読み続けると、知識を問題や作業へ変換する練習が不足します。

前半：全体像と基本操作に一度触れる

前半は、正答率を高く見せることより、試験範囲の地図を頭に作る時期です。知らない言葉が多くても、そこで一つずつ深追いしすぎません。各テーマについて「何をするものか」「似たものと何が違うか」「どんな問題や作業で使うか」を一度確認し、短い演習へ進みます。

この段階で大切なのは、苦手を隠さないことです。正答率が低くても構いません。むしろ早い段階で弱い分野が見つかれば、残りの学習期間をそこへ使えます。資格合格.webの弱点分析も、完成度を評価する成績表ではなく、次に戻る場所を見つける地図として使います。

中盤：似たものを比較し、間違い方を固定しない

一度範囲へ触れた後は、同じ教材を最初から読み直すより、問題演習で迷った箇所を中心に戻ります。ここで見るのは「正解は何か」だけではありません。自分が選んだ答えはどんな条件なら正解になるのか、正解との差は何だったのかを説明します。

同じ分野の不正解でも原因は複数あります。用語そのものを知らない、二つの概念を混同した、計算やコードの途中でずれた、問題文の条件を読み落とした、操作手順の確認を飛ばした、時間不足で焦った、といった原因を分けます。原因が違えば復習方法も変わります。

仕上げ：本番と同じ制約の中で再現できるかを見る

仕上げでは、新しい知識を増やす量を減らし、時間、問題数、操作環境など本番の制約を意識します。CBT。約60問、試験本体約80分（NDA/アンケート込み90分）という形式に合わせ、知識を知っているだけでなく、時間内に取り出せるか、必要な操作を最後まで完了できるかを確認します。

一度だけ高得点が出たことより、別の問題でも同じ根拠で判断できることを重視します。模擬試験の結果は「合格・不合格の予言」ではなく、次の復習先を決める材料です。点数が上がっていても同じ種類のミスが続くなら、その弱点は残っています。

図は眺めるためではなく、自分で再現するために使う

このガイドには六つの図を入れています。図を一度見て分かった気になるだけでは、問題文が変わったときに使えません。図を閉じた後に、紙やメモへ主要な箱と矢印だけを書き直してみてください。全部の文章を再現する必要はなく、「どこから判断を始め、何を比べ、どこへ進むか」が書ければ十分です。

比較図なら、片方だけを説明するのではなく「AではなくBを選ぶ条件」を言葉にします。フロー図なら、途中の条件を一つ反対にしたとき行き先がどう変わるかを考えます。階層図なら、上下関係と役割を自分の言葉で説明します。見る学習を、自分で判断する学習へ変えるための使い方です。

公式情報と攻略情報を同じものにしない

試験時間、受験料、配信方法、認定の有効性などはLPI-Japanの公式情報を最終基準にします。現在このページでは「16,500円（税込）」として整理していますが、料金や申込方式は変更されることがあります。資格合格.webは申込前の最終確認先ではなく、学習と受験準備を一つにつなぐ入口として使い、申込直前には必ず公式ページへ進みます。

一方、どの順番で勉強するか、どう比較すると迷いにくいか、間違いをどう分類するかという攻略部分は、資格合格.web独自の編集内容です。公式情報と独自学習法を画面上でも混同させず、事実には確認日と出典を持たせ、攻略には「なぜこの方法を使うか」が分かる説明を残します。

『覚えた数』ではなく『説明できる境界』を増やす

資格学習で伸び悩むと、覚える用語や問題数をさらに増やしたくなります。しかし本番で迷うのは、知らない言葉だけではありません。二つとも知っているのに違いが曖昧、公式は覚えたのにどの値を入れるか分からない、コマンド名は知っているのに実行結果を予測できない、といった「境界が曖昧な知識」が失点になります。

復習するときは一つの用語を長く説明するより、似た二つを並べて違いを一文で言えるか試します。手順なら「この一段を飛ばすと何が起きるか」、計算なら「この値の単位は何か」、コードなら「この行が実行される条件は何か」を確認します。こうして境界を一つずつ明確にすると、初めて見る文章でも既知のルールへ分解しやすくなります。

試験直前は新しい知識を増やしすぎない

直前に知らない用語や手順を見つけると不安になりますが、残り時間が少ないほど、これまで複数回間違えたもの、迷った比較、時間を使いすぎた問題を優先します。新しい教材を増やすより、自分の間違い履歴を使って取りこぼしを減らします。

受験料・試験時間・配信方式・認定更新などは変更される場合があります。このガイドの資格情報は2026-09-04時点で整理していますが、申込直前には資格情報ページからLPI-Japanの公式案内を確認してください。

このガイドを読み終えたら

基礎用語が曖昧なら学習教材へ進みます。用語は分かるのに問題で迷うなら問題演習へ進み、似た概念を取り違える場面を探します。すでに演習が進んでいるなら弱点分析から原因を絞り、仕上げ段階では模擬試験・総合演習で時間配分と判断速度まで確認します。

HTML5プロフェッショナル認定 レベル1で目指すのは、答えの形を大量に覚えることではありません。問題文や作業要件から必要な知識を選び、自分の根拠で判断できる状態です。その状態を作るために、資格合格.webでは文章・図・教材・問題演習を行き来できる構成にします。