実技試験：包括的攻略バイブル
なぜ、知識はあるのに落ちるのか？
それは「技術」ではなく「作法」を知らないからです。
合格率70%の壁を超えるための、唯一無二の教科書へようこそ。
ウェブデザイン技能検定3級の実技試験は、単に「綺麗なサイトを作る」試験ではありません。厚生労働省が定める国家規格に基づき、「正しい構文」「正しいファイル管理」「正しいアクセシビリティ」を実装できるかを問う、極めて実務的な試験です。
本稿では、過去の出題傾向を徹底分析し、合格に必要な知識体系を「読み物」として再構成しました。
1. HTML5：構造と意味の定義
HTML (HyperText Markup Language) は、ウェブページの骨格です。3級実技試験において最も重要な評価基準は、「見た目だけでなく、意味（セマンティクス）に基づいた正しいタグ選びができているか」です。
❌ 悪い例（Divの乱用）
すべてを <div> で囲む昔ながらの手法。
<div id="header">
これでは機械（検索エンジンや読み上げソフト）に「ここがヘッダーだ」と伝わりません。
⭕ 良い例（セマンティック）
HTML5の専用タグを使う手法。
<header>, <main>, <footer>
タグ自体が意味を持っています。近年の試験ではこの記述が強く推奨されます。
頻出タグとその役割
試験で必ずと言っていいほど登場するタグには、明確な「使いどころ」があります。
- h1〜h6 (Headings): 見出しです。
h1はページの大主題（ロゴやメインタイトル）に1回だけ使うのが定石です。文字を太くするために使ってはいけません。 - ul / ol / li (Lists): 箇条書きです。特に
ulは、ナビゲーションメニューを作る際の土台として100%出題されます。 - table (Table): 表組みです。
tr（行）の中にth（見出し）とtd（データ）が入る入れ子構造を、空で書けるようにしてください。
2. CSS：装飾とレイアウトの制御
CSS (Cascading Style Sheets) は、骨格に「皮膚」を与える技術です。3級実技では、複雑なアニメーションよりも「ボックスモデルの理解」と「基本的なレイアウト」が問われます。
ボックスモデルの4要素
Web上のすべての要素は「四角い箱」でできています。この箱の構造を理解していないと、「思ったより隙間が空く」「枠線がはみ出る」といったトラブルに対処できません。
[Image of file directory structure diagram]背景色はどこまで塗られる？
背景色（background-color）を指定した時、色は Padding（緩衝材） の領域まで塗られますが、Margin（外の距離） には塗られません（透明になります）。
「文字の周りに色をつけたいのに、余白に色がつかない！」という時は、MarginではなくPaddingを増やすのが正解です。
3. ファイル管理：魔の「相対パス」
はっきり申し上げます。実技試験不合格者の死因No.1は「パス指定ミス」による画像のリンク切れです。
コードがどれだけ美しくても、画像が表示されなければ0点です。
絶対パス vs 相対パス
試験では、必ず「相対パス」を使わなければなりません。
- ❌ 絶対パス:
C:\Users\taro\Desktop\exam\img\logo.png
これは「タロウ君のPCのデスクトップ」を指しています。採点官のPCにデータを持っていった瞬間、リンク切れします。 - ⭕ 相対パス:
img/logo.png
「今いる場所（index.html）から見て、imgフォルダの中にあるlogo.png」という指定です。これならどのPCでも表示されます。
4. 合格への戦術的アドバイス
60分という試験時間は、迷っていると一瞬で過ぎ去ります。以下のルーティンを身体に染み込ませてください。
- 開始5分：フォルダ確認。画像がどこにあり、HTMLとCSSがどこにあるか「地図」を頭に描く。
- 前半20分：HTMLコーディング。テキストをコピペし、ひたすらタグで囲む。装飾は後回し。
- 中盤25分：CSS装飾。上から順に色や配置を指定していく。わからない箇所は飛ばす。
- ラスト10分：確認と提出。全角スペースが含まれていないか？ リンクは飛ぶか？ 最後にフォルダをZIP圧縮する。