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

更新日 2026-10-05

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

HTML5レベル1の学習では、見本どおりに表示できたことと、その表示になる理由を説明できることを分けます。ブラウザは不完全なHTMLを補正することがあり、CSSも別の指定に上書きされます。「画面で動いた」を根拠にすると、コードを読む問題で判断が崩れます。

おすすめの題材は、小さなイベント案内ページです。開催概要、参加フォーム、画像、ナビゲーションを一つの文書へ入れ、意味構造、見た目、画面幅、通信を順に調べます。サイトを大量に作るより、一枚のページを理由付きで直せるようにしましょう。

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

まず、装飾を外して案内ページを読めるか確認する

HTMLには文書の言語、文字コード、タイトルを設定し、開催名を見出し、日時や場所を本文として記述します。ナビゲーションは移動先へのリンク、送信操作はボタンにします。クリックできる見た目だけを作ると、操作の意味を取り違えます。

見出しを文字の大きさで選ばず、内容の階層で選んでください。sectionはテーマを持つまとまり、articleは独立して扱える内容、navは主要なナビゲーション、mainは文書の主内容、と役割から考えます。すべての箱をsectionに置き換えれば意味構造が良くなるわけではありません。

HTML構造

HTMLの役割比較。mainは主内容、navは主要なリンク、sectionはテーマを持つまとまり、articleは独立して扱える内容。

  1. main：主内容案内ページの中心となる開催概要や参加案内をまとめる。
  2. nav：主要な移動先ページ内や関連ページへの主要なリンクをまとめる。送信操作はボタンで表す。
  3. section：テーマのまとまり日時・会場など、見出しで内容を説明できるまとまりに使う。
  4. article：独立した内容単独でも成立する告知記事などに使う。見た目の箱ごとに付けない。
イベント案内の内容を、主内容・ナビゲーション・テーマ・独立性で分類する独自図。要素の選択は文字の大きさではなく役割で決める。

ミニケース：参加フォームのラベルを押しても入力欄へ移らない

「氏名」という文字の隣にinputを置いただけでは、関連付けができていない場合があります。labelのforとinputのidを対応させ、クリックとキーボードの両方で確かめます。placeholderだけに項目名を任せると、入力後に案内が消える点も考えます。

画像のaltは、画像の役割で判断します。開催内容を伝える画像なら情報を代替する文章を考え、装飾だけなら空のaltが適切な場合があります。ファイル名を一律に入れる方法では、利用者に必要な情報を届けられません。フォームのtype、required、nameも、それぞれ入力支援、検証、送信時の項目名という役割で区別します。

横にはみ出す原因を、幅の内訳まで分解する

独自の計算例です。widthが300px、左右のpaddingが各20px、左右のborderが各2pxなら、content-boxの外側の幅は344pxです。marginはその外に付きます。同じ指定でborder-boxなら、paddingとborderを含む幅が300pxになります。

box model

内側からcontent、padding、border、margin。content-boxの例は300＋40＋4＝344px。border-boxはpaddingとborder込みで300px、marginは外側。

  1. content：内容領域content-boxでwidth:300pxなら、この領域の幅が300pxになる。
  2. padding：内側の余白左右20pxずつなら計40px。内容とborderの間に加わる。
  3. border：境界線左右2pxずつなら計4px。content-boxの外側幅は300＋40＋4＝344px。
  4. margin：外側の余白borderのさらに外側。border-boxのwidth:300pxにもmarginは含まれない。
ボックスを内側から外側へ分解した独自図。border-boxでは内容・padding・borderの合計が300pxになり、この例の内容幅は256px。

開発者ツールで要素を選び、計算済みの幅、padding、border、marginを確認します。期待と違うときは、その値を与えたCSSの規則へ戻ります。子要素のwidth:100%だけを見て「親に収まる」と決めず、ボックスの計算条件まで追ってください。

CSSが効かないケースでは、セレクタが対象へ一致しているか、同じプロパティを別の規則が指定しているか、継承される性質かを順に確認します。詳細度だけで全部を説明せず、重要度や出所などカスケードの条件も見ます。取り消し線の付いた宣言と計算済みの値を比べる練習が役立ちます。

配置の方法は「何をそろえたいか」で選ぶ

横に並ぶナビゲーションはFlexboxで主軸と交差軸を確認します。flex-directionを変えたとき、justify-contentとalign-itemsがどの方向へ作用するかを予測してから表示します。プロパティ名を「横」「縦」と固定して覚えないことが大切です。

Flex/Grid

Flexboxは主軸と交差軸で配置する。flex-directionが主軸、justify-contentが主軸方向、align-itemsが交差軸方向を扱う。Gridは行と列の比較例。

  1. Flexbox：一つの軸ナビゲーションなど、一方向の並びを整えるときに主軸と交差軸を考える。
  2. 主軸：並べる方向flex-directionで決まる。justify-contentは主軸方向の配置を扱う。
  3. 交差軸：主軸に直交align-itemsは交差軸方向の整列を扱う。「常に縦」と固定しない。
  4. Grid：行と列二方向をまとめてそろえる場合の比較対象。学習の範囲は公式出題範囲で確認する。
一方向の並びと行・列の配置を比較する独自図。Flexboxの主軸を変えると整列の方向も変わる。

行と列をまとめて扱うGridとの比較も、レイアウトの理解を深める補助になります。ただし学習量は公式出題範囲を基準にし、比較例だけを理由に範囲外の機能へ広げすぎないようにします。floatとclear、position、重なり順も、既存のコードを読むために押さえます。

absoluteを指定した要素は、基準となる包含ブロックと通常フローから外れる影響を確認します。見た目を直すために位置を固定した結果、本文の長さが変わるとはみ出すケースを作ってみましょう。z-indexの数字を大きくするだけでは、スタッキングコンテキストをまたいだ問題を解決できない場合があります。

スマートフォン対応は、幅を一つ変えるだけでは終わらない

案内ページを広い幅、狭い幅、その中間で表示します。見出しが二行になったとき、フォームのラベルが長いとき、画像が大きいときにどこが崩れるかを記録します。端末名より、内容を読めなくなる幅を境目にします。

responsive

広い幅・狭い幅・中間で観察し、viewportやCSSを確認、一条件ずつ変更し、読み順とキーボード操作を再確認する。

  1. 幅を変えて観察広い幅・狭い幅・中間で、長い見出しや大きい画像の崩れを探す。
  2. 原因を切り分けるviewport、要素の幅、画像、後続CSSの上書きを確認する。
  3. 条件を一つ変える読めなくなる幅を境に、メディアクエリや可変幅を調整して比較する。
  4. 操作も再確認横並びを縦に変えたら、読み順・ラベル・キーボード移動も確かめる。
幅の観察から原因確認、変更、再確認へ進む独自図。端末名だけで境目を決めず、中間の幅でも確認する。

viewportの設定、メディアクエリ、可変幅、画像の最大幅を一つずつ変更して比較します。CSSピクセルと物理ピクセルは同じ概念ではありません。メディアクエリを追加したのに期待どおりにならなければ、条件だけでなく後続のCSSによる上書きも調べます。

ミニケースとして、横並びの入力欄を狭い幅で縦へ変えます。単に幅を縮めるのでなく、読み順、ラベルとの対応、押せる領域、キーボードでの移動順も確かめます。見た目の配置順と文書の順序を別々に変更した場合の使いにくさも確認してください。

表示の不具合と通信の不具合を切り分ける

案内ページの画像が出ないとき、まずNetworkでリクエスト先とレスポンスを見ます。404なら参照先、403ならアクセス条件、リダイレクトなら移動先を確認します。取得できたのに見えない場合はCSSや要素の状態へ戻ります。すべてをHTMLタグの書き間違いとして扱わないようにします。

HTTP

ブラウザが画像を要求、サーバが応答、ブラウザが結果を確認、取得済みならCSSと要素を確認。304は画像の不存在ではなく保存内容の再利用。

  1. ブラウザ：要求画像のURLへGETを送る。Networkで参照先と要求ヘッダを確認する。
  2. サーバ：応答ステータスと応答ヘッダを返す。404は参照先、403はアクセス条件を調べる。
  3. ブラウザ：取得結果リダイレクト先も追う。304なら保存済みの内容を再利用する。
  4. 表示：CSSを確認取得できても見えなければ、要素の状態やCSSへ戻って切り分ける。
画像要求から応答、取得結果、表示確認へ進む独自図。通信で取得できることと画面に見えることは分けて調べる。

GET、POST、ステータスコード、ヘッダ、Cookie、キャッシュを「要求する側」と「返す側」に分けてメモします。HTTPSは通信を保護する仕組みであり、アプリケーションにあらゆる脆弱性がないことを保証しません。Basic認証の表現と暗号化も混同しないでください。

キャッシュでは、再利用する条件と、変更の有無を問い合わせる条件を区別します。304を「画像が存在しないエラー」と誤解していないかも確認します。送信されたCookieとブラウザ内の保存状態を見比べると、画面だけでは分からない通信の流れを追えます。

APIの基礎知識は、使う場面と制約を一緒に覚える

CanvasとSVGは描画の考え方、音声・動画はメディアの役割、位置情報は権限、Storageは保存場所と寿命、通信APIはやり取りの方式で整理します。レベル1では概要の理解を固め、実装の細部だけに学習時間を使わないようにします。

独自の相談例として「参加者が選んだ表示設定を次回も残したい」を考えます。保存する場所、保存期間、サーバへ自動送信されるか、同じブラウザを他人が使う場合の影響を書きます。API名を知っていても、機密情報をどこへ保存してよいかの判断は別に必要です。

学習サイクル

役割と結果を予想し、一条件を試し、予想との差と原因を記録、要素・CSS・APIを復習して次の予想へ戻る。

  1. 役割と結果を予想保存設定なら、場所・寿命・送信の有無を予想。表示なら幅や適用CSSを予想する。
  2. 一条件だけ試す一枚の案内ページで指定や保存方式を一つ変え、ブラウザの結果を見る。
  3. 予想との差を記録予想・実際・原因を一組で残す。表示、通信、保存のどこで違ったか分ける。
  4. 根拠へ戻り再演習要素・CSS・APIの役割を復習し、条件を変えてもう一度予想から始める。
APIの役割確認から一枚のページのコード読解へつなぐ独自の学習サイクル。結果だけでなく原因を説明して次の予想へ戻る。

一枚のページを直す練習から、コードを読む練習へ移る

最初は案内ページの文書構造とフォームを完成させ、次にボックスと配置、続いて画面幅と通信を扱います。一度に全部変更せず、「予想した表示」「実際の表示」「原因になった指定」を一組として残してください。

演習段階では、実行する前に余白の内訳や適用される宣言を紙へ書きます。合っていた場合も、説明が「いつもこう書くから」なら復習します。間違いは要素の意味、CSSの優先順位、幅の計算、通信の読み違いに分け、戻る教材を決めます。

仕上げに残す三つの確認

学習教材で意味を確かめたら問題演習でコードを読み、弱点分析から混同した指定へ戻ります。模擬試験では表示を実際に試せない状況も意識し、短いコードを根拠付きで判断できるかを確認してください。

受験前は、レベル1の出題範囲へ戻る

公式のレベル1出題範囲と試験概要を2026-10-05に確認しています。バージョン、受験方式、時間、認定の条件は、資格情報ページと公式の最新案内を照合してください。

このガイドの制作課題と確認手順は資格合格.web独自の学習提案です。一枚のページを理由付きで直せるようになったら、公式範囲に照らして未着手の要素・メディア・APIも埋め、得意なCSSだけで学習を終えないようにします。