まんがでわかるウェブデザイン技能検定3級

第1章 HTMLの基本と文書構造 ★★★

まんが「ピノキン、Web大学を建設する！」

ピノキン「先生！大学のホームページを作ります！」
先生「いいね。まずはページの骨組みから始めよう。」

ピノキン「まだ壁も色もありません！」
先生「HTMLで内容と役割を組み立てているところだよ。」

先生「見出しはh1やh2、段落はp。役割に合った要素を使おう。」
ピノキン「タグにも担当があるんですね。」

ピノキン「HTMLが骨組み、CSSが見た目ですね！」
先生「そう。まずは正しい構造を作ろう。」

ここだけ覚える

HTMLは、Webページの文章や画像に「これは見出し」「これは段落」といった意味と構造を与える言語です。

短い解説

ページの主要部分にはmain、案内リンクにはnav、ページの上部にはheader、下部にはfooterなど、内容に合う要素を使います。何でもdivにするより、意味のある要素を選ぶと、利用者にもブラウザーにも構造が伝わりやすくなります。

基本の形

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>未来大学校</title>
</head>
<body>
<header><h1>未来大学校へようこそ</h1></header>
<nav><a href="index.html">ホーム</a></nav>
<main>
<h2>今日の授業</h2>
<p>HTMLを学びましょう。</p>
</main>
<footer><p>未来大学校</p></footer>
</body>
</html>

操作の流れ

テキストエディターでHTMLファイルを作る → UTF-8で保存する →
ブラウザーで開く → 見出しやリンクが意図どおりか確認する。

PC補足

h1〜h6は見た目の大きさだけで選ばず、内容の階層に沿って使います。画像には内容を伝えるalt属性を付けます。

第2章 CSSとレイアウト ★★★

まんが「CSS建築学部の大失敗」

ピノキン「文字を全部100ピクセルにしました！」
先生「教室の入口から本文が見えないね。」

ピノキン「大学名の『大』だけで画面が終わりました。」
先生「大切なのは大きさより、情報の順番だよ。」

先生「CSSは文字色や余白、配置を整えるんだ。」
ピノキン「読みやすさもデザインですね。」

先生「画面の幅に合わせて調整しよう。」
ピノキン「スマホでも校舎がはみ出しません！」

ここだけ覚える

CSSはHTMLの見た目を整える言語です。セレクターで対象を選び、プロパティと値を指定します。

短い解説

h1 {
  color: #243c58;
  font-size: 28px;
  text-align: center;
}

h1がセレクター、colorなどがプロパティ、#243c58などが値です。marginは外側の余白、paddingは内側の余白です。ボックスの幅を考えるときはborder、padding、contentの関係にも注意します。

操作の流れ

HTMLにCSSファイルを読み込む → 小さな画面で表示する →
横にはみ出す箇所を直す → 広い画面でも確認する。

PC補足

画面幅によって配置を変える仕組みをレスポンシブデザインといいます。width:100%、max-width、画像のmax-width:100%などを使うと、スマートフォンでのはみ出しを抑えられます。

第3章 画像・色彩・Webデザイン
★★★

まんが「ピノキンの虹色大学」

ピノキン「見出しも背景も虹色にしました！」
先生「文字が背景に溶け込んで読めないね。」

先生「写真や図には、それぞれ得意な形式があるよ。」
ピノキン「写真ならJPEG、ロゴならSVGですね。」

ピノキン「濃紺を基本に、金色を少し使います。」
先生「色を絞ると、案内も見つけやすいね。」

先生「きれいなだけでなく、読みやすさも確かめよう。」
ピノキン「文字と背景の差が大事なんですね。」

ここだけ覚える

写真はJPEGなど、透明部分が必要な図はPNG、拡大しても輪郭が滑らかなロゴはSVGがよく使われます。用途と画質、容量を見て選びます。

短い解説

画面の色は主に赤・緑・青の光（RGB）を組み合わせて表します。画像のピクセル数は大きさの目安ですが、ピクセル数だけで画質が決まるわけではありません。圧縮、元画像、表示サイズも関係します。

操作の流れ

画像を用途で選ぶ → 必要な大きさに調整する →
書き出し後の見た目と容量を確認する →
ページ上で文字とのコントラストを見る。

PC補足

同じ写真をJPEGの品質設定を変えて保存すると、ファイル容量と見た目の違いを比較できます。大きな画像をそのまま載せず、表示サイズに合わせて軽量化します。

第4章
リンク・ファイル・フォルダー構成 ★★★

まんが「迷子のキャンパス案内」

ピノキン「授業案内を押しても、別のページに行けません！」
先生「リンク先の住所を見てみよう。」

先生「HTML、CSS、画像の場所を整理しよう。」
ピノキン「校内地図みたいですね。」

先生「../は一つ上のフォルダーへ戻る目印だよ。」
ピノキン「住所の基準が違うと迷うんですね。」

ピノキン「リンクも画像も表示できました！」
先生「保存場所と参照先をセットで確認しよう。」

ここだけ覚える

相対パスは、現在のファイルの場所を基準にした指定です。ファイルを移動したら、リンクや画像、CSSの参照先も見直します。

短い解説

例：index.htmlからcss/style.cssを読み込む場合、HTMLに<link rel="stylesheet" href="css/style.css">と書きます。website直下にindex.htmlがあり、imagesフォルダー内にcampus.jpgがあるなら、画像の場所はimages/campus.jpgです。../は一つ上の階層を表します。

操作の流れ

フォルダー構成を確認する → HTMLから参照先までの道順をたどる →
ファイル名と拡張子を照合する → ブラウザーで開いて確かめる。

PC補足

大文字・小文字や拡張子の違いが原因で、サーバー上だけ画像が表示されないことがあります。指定された提出フォルダーの中に必要なファイルがそろっているか確認します。

第5章
Webサイト制作と実技の基本 ★★★

まんが「提出前のチェック」

先生「まず、課題の指示に線を引いて整理しよう。」
ピノキン「直す場所と保存場所を先に確認します！」

ピノキン「見た目が変わりません！」
先生「CSSの参照先とファイル名を確かめよう。」

先生「リンク、画像、レイアウトを一つずつ確認。」
ピノキン「表示だけでなく動作も見ます。」

ピノキン「ファイルも全部そろいました！」
先生「最後に指定の場所へ保存したか見直そう。」

ここだけ覚える

実技では、指示を読み、必要な修正を行い、指定されたファイル名・構成・場所で保存することが大切です。

短い解説

Webページが正しく見えても、画像やCSSの提出漏れ、リンク切れ、保存先の間違いがあると完成とはいえません。見た目、動作、ファイル構成をまとめて確認します。

操作の流れ

課題を最後まで読む → 変更箇所を整理 → HTML・CSS・画像を修正 →
ブラウザーで確認 → 指定フォルダーに保存 → 提出前チェック。

PC補足

実際の試験で使えるソフトや提出方法は回ごとに指定されます。事前に公式の試験要項と公開問題で確認し、問題文の指示に合わせてください。

第6章
アクセシビリティとユーザビリティ ★★★

まんが「押せない申込ボタン」

ピノキン「予約ボタンを小さくして、おしゃれにしました！」
先生「見つけにくくて押せないね。」

先生「マウスを使わない人も操作できるかな？」
ピノキン「キーボードでも順番に進めるか試します。」

先生「画像の内容も言葉で伝えよう。」
ピノキン「校舎の写真なら、その内容を書きます。」

先生「いろいろな人が使えて、目的も達成しやすいね。」
ピノキン「それが使いやすいページなんですね。」

ここだけ覚える

アクセシビリティは多様な人が利用できること、ユーザビリティは目的を達成しやすいことに関わる考え方です。

短い解説

画像の内容を伝えるalt属性、見出しの順序、キーボード操作、読みやすいコントラスト、フォームのラベル、意味の伝わるリンク文言を確認します。装飾だけの画像は、状況により空のalt属性にします。

操作の流れ

画像の意味を確認 → altを記述 → キーボードでリンクやフォームを操作 →
文字を拡大 → 色や案内文が読みやすいか確認。

PC補足

UIは画面や操作など、利用者とサービスの接点を指します。UXは利用前から利用後までの体験全体を指す言葉です。

第7章
インターネットとネットワーク ★★☆

まんが「URLから教室へ」

ピノキン「URLを入れたらページが出ました！」
先生「ブラウザーがサーバーにページを求めたんだよ。」

先生「DNSはドメイン名とIPアドレスを結び付ける仕組み。」
ピノキン「名前から行き先を調べるんですね。」

ピノキン「HTTPSなら、必ず本物のサイトですか？」
先生「通信の暗号化と、サイト運営者の信頼性は別に考えよう。」

先生「ブラウザーとサーバーが通信してページを届ける。」
ピノキン「見えないところでも連携しているんですね。」

ここだけ覚える

ブラウザーはWebページを取得して表示し、Webサーバーはページなどのデータを提供します。DNSはドメイン名をIPアドレスなどに対応付けます。

短い解説

HTTPはWeb通信のためのプロトコル、HTTPSはTLSを利用して通信を暗号化します。Cookieはサイトがブラウザーに保存させるデータ、キャッシュは取得済みデータを再利用する仕組みです。

操作の流れ

URLを入力 → DNSで接続先を調べる → ブラウザーがサーバーへ要求 →
サーバーの応答を受信 → ページを表示。

PC補足

HTTPSの鍵マークは通信の暗号化を示すもので、サイトの内容が必ず正しいことを保証する印ではありません。

第8章
Webセキュリティと個人情報 ★★★

まんが「偽の入学案内」

ピノキン「見た目がそっくりだから本物ですね！」
先生「URLや運営者も確認しよう。」

先生「入力内容を悪用する攻撃にも注意が必要だよ。」
ピノキン「入力欄の安全対策も大事なんですね。」

先生「ソフトを更新し、バックアップも取ろう。」
ピノキン「もしものとき戻せるようにします。」

先生「個人情報は目的を明確にして扱おう。」
ピノキン「便利さと安全の両方を考えます。」

ここだけ覚える

Webの安全対策は、作るときだけでは終わりません。更新、入力値の扱い、認証、バックアップ、個人情報の管理を続けます。

短い解説

XSSはWebページで悪意あるスクリプトを実行させる攻撃、SQLインジェクションは不正な入力でデータベース処理を悪用する攻撃、CSRFは利用者の意図しない操作を送らせる攻撃です。HTTPSでも偽サイトはあり得ます。

操作の流れ

運営者とURLを確認 → 不要なソフトやプラグインを減らす → 更新する →
入力内容と表示方法を安全に扱う → 認証とバックアップを見直す。

PC補足

個人情報を集める場合は、利用目的を明確にし、必要な範囲で適切に管理します。試験では攻撃名と基本的な特徴を区別して覚えます。

第9章 JavaScriptと動的表現 ★★☆

まんが「押すと変わる掲示板」

ピノキン「押しても何も起きないボタンです！」
先生「動作をJavaScriptで設定しよう。」

先生「クリックをイベントとして受け取るんだ。」
ピノキン「出来事に合わせて処理するんですね。」

ピノキン「押したら『こんにちは』に変わりました！」
先生「HTMLの内容をプログラムから操作したんだよ。」

先生「使った人に結果が伝わるようにしよう。」
ピノキン「動いたことが画面で分かります。」

ここだけ覚える

JavaScriptは、Webページに動きや操作への反応を加えるプログラミング言語です。

短い解説

変数はデータを入れる名前、関数は処理のまとまり、イベントはクリックなどの出来事です。DOMはHTML文書をプログラムから扱うための構造です。

操作の流れ

ボタンなどの要素を用意 → イベントを受け取る → 必要な処理を実行 →
結果を画面に伝える。

PC補足

document.getElementById("hello").addEventListener("click", () => {
  document.getElementById("result").textContent = "こんにちは！";
});

この例では、helloというIDの要素がクリックされたら、resultの文章を変更します。

第10章 著作権・関連法規・Web標準
★★☆

まんが「写真を借りる前に」

ピノキン「ネットにある写真だから、使っていいですよね？」
先生「公開されていることと、自由に使えることは別だよ。」

先生「ライセンスと利用条件を確認しよう。」
ピノキン「作者名の表示や改変禁止もありますね。」

先生「肖像や商標、個人情報にも気を配ろう。」
ピノキン「必要な許可を先に確かめます。」

先生「ルールを守って公開できたね。」
ピノキン「使う前に確かめる習慣をつけます。」

ここだけ覚える

Webで見つけた文章・写真・音楽・プログラムは、利用条件や必要な許可を確認してから使います。

短い解説

著作権のほか、肖像やプライバシー、商標、個人情報、ソフトウェアのライセンスなどが関係します。Web標準は、異なる環境でも内容や表示を扱いやすくするための仕様です。

操作の流れ

素材の作者と配布元を確認 → ライセンスと使用条件を読む →
必要な許可や表示を確認 → 利用記録を残す。

PC補足

試験対象となる規格・仕様は改定されることがあります。教材を使う年度の公式試験範囲を確認し、特定年の規格名を恒久的な情報として暗記しないようにします。

第11章
サイト運用・保守・作業環境 ★★☆

まんが「公開後も続く仕事」

ピノキン「公開できました！これで完成です！」
先生「公開したあとも手入れが続くよ。」

先生「リンクや表示を定期的に確認しよう。」
ピノキン「古い案内を直しておきます。」

先生「長い作業では姿勢や休憩も大切。」
ピノキン「画面との距離や明るさも整えます。」

ピノキン「更新とバックアップを続けます！」
先生「安心して使えるサイトを保とう。」

ここだけ覚える

公開後は、更新・バックアップ・リンク確認・不具合修正・安全対策を続けます。

短い解説

FTPはファイル転送に使われるプロトコルです。SFTPはSSHを利用するファイル転送方式で、FTPをそのまま暗号化したものとは異なります。作業環境では姿勢、照明、休憩、画面の位置にも配慮します。

操作の流れ

更新内容を確認 → バックアップ → 変更 → 複数画面で確認 →
不具合があれば修正 → 作業記録を残す。

PC補足

更新前後の状態が分かるよう、変更点や日時を記録しておくと復旧や引き継ぎに役立ちます。

第12章
デザイン設計・情報設計・UI ★★☆

まんが「大学の迷路ホームページ」

ピノキン「秘密の通路をたくさん作りました！」
先生「授業案内が見つからないね。」

先生「作る前に、情報の順番を図にしてみよう。」
ピノキン「画面の設計図ですね。」

先生「大切な案内が自然に見つかるかな？」
ピノキン「関連する情報を近くに置きます。」

先生「目的に合わせて整理できたね。」
ピノキン「利用者の目線で確かめます。」

ここだけ覚える

ワイヤーフレームは、画面を作る前に情報や要素の配置を大まかに示す設計図です。

短い解説

制作は、目的と利用者を考えるところから始まります。情報を整理し、画面構成を決め、デザインと実装へ進みます。一貫性、近接、コントラスト、操作後のフィードバックも使いやすさを支えます。

操作の流れ

目的を決める → 利用者を考える → 情報を分類する →
ワイヤーフレームを作る → デザイン・実装 → 表示と操作を確認。

PC補足

大学の案内ページなら、授業・教材・申込み・問い合わせの順など、利用者が探す情報を優先して配置します。装飾より、迷わず目的に着けることを先に確かめます。

第13章 学科模擬試験の進め方
★★★

まんが「試験問題の読み違い」

ピノキン「知っている言葉が出たので、すぐ答えます！」
先生「問題文の条件も最後まで読もう。」

先生「似た用語の違いを確認しよう。」
ピノキン「HTTPSとサイトの信頼性は別ですね。」

先生「迷った問題に印をつけて、あとで戻ろう。」
ピノキン「時間を見ながら進めます。」

ピノキン「最後に全体を見直しました！」
先生「間違いの理由を次の勉強に活かそう。」

ここだけ覚える

学科では、用語の意味だけでなく、似た概念の違いと問題文の条件を正確に読む力が必要です。

短い解説

公式の試験要項や公開問題で、出題形式・問題数・時間を確認します。模擬試験では本番の構成に合わせ、真偽式と多肢選択式、制限時間、採点、解説、間違い直しをそろえます。

操作の流れ

時間を決める → 問題を一問ずつ解く → 迷った問題を記録 → 採点 →
解説で誤答理由を確認 → 弱点の章へ戻る。

PC補足

教材用のミニ問題と公式問題は区別して表示します。公式問題の転載や模擬試験の出題構成は、公開条件・最新の試験要項を確認して制作します。

第14章 実技60分の総仕上げ ★★★

まんが「提出フォルダーを完成させよう」

先生「まず指示と素材を確認しよう。」
ピノキン「作業時間を分けて、順番に進めます。」

ピノキン「リンクと画像の参照先を直しました。」
先生「ファイル名と保存場所も見よう。」

先生「画面からはみ出すところはないかな？」
ピノキン「CSSと画像サイズを見直します。」

ピノキン「表示もフォルダーも確認しました！」
先生「最後まで指示どおりに提出しよう。」

ここだけ覚える

実技は、正しく直すことに加えて、指定どおりに保存・提出し、ブラウザーで完成状態を確かめるところまでが作業です。

60分の進め方

0〜5分 課題全体と保存先を確認
5〜15分 ファイル構成、HTML、リンクを確認
15〜35分 指示されたHTML・CSS・画像の修正
35〜50分 ブラウザーで表示とリンクを確認
50〜60分 ファイル名、提出フォルダー、保存漏れを点検

総合課題の確認項目

未来大学校の案内ページを題材に、HTMLの構造、3ページ間のリンク、画像とalt属性、CSS参照、幅に応じた表示、提出フォルダーを確認します。具体的な素材・条件・作業内容は、実際の試験要項や公開問題の指示に合わせて差し替えます。

操作の流れ

課題文を読む → 変更箇所を決める → 保存先を確認 → 修正 →
ブラウザーで確認 → すべての必要ファイルを指定先へ保存 →
提出前に再確認。

PC補足

本章の60分配分と大学サイト課題は、学習用の目安です。実際の試験時間、課題、使用ソフト、提出方法は受検する回の公式案内に従ってください。