初心者サポート版

Webデザイン3級
やさしい実務入門

むずかしい専門用語を使わずに、
合格に必要な知識だけをギュッと凝縮しました。

🔰 0. Webサイトって、どうなってるの？

👨‍💻

Webサイト作りは、よく「家づくり」に例えられます。
いきなり全部覚えようとしなくて大丈夫。「骨組み」を作って、「壁紙」を貼る。たったこれだけの作業なんです。

🏗️ HTML (構造)

家の「柱」や「壁」です。
「ここが見出し！」「ここが画像！」とハンコを押していく作業です。

🎨 CSS (装飾)

家の「壁紙」や「インテリア」です。
骨組みに色を塗ったり、配置を整えたりして綺麗にします。

🏗️ 1. HTML：骨組みを作ろう

HTMLは、真っ白なページに「タグ（目印）」をつけていく作業です。
3級の試験では、以下のタグさえ覚えておけば合格ラインに届きます。

① 基本の3点セット

<h1>（見出し）：新聞のタイトルです。一番目立つ文字。
<p>（段落）：普通の文章です。長い話はこれで囲みます。
<img>（画像）：写真を貼り付けます。これだけは「囲まない」特別なタグです。

index.html <h1>株式会社ウェブデザイン</h1> <p> ここに会社の説明文が入ります。
ようこそ！ </p> <img src="logo.png" alt="ロゴ">

② メニューリストを作ろう (ul / li)

Webサイトにある「メニューボタン」は、実は「箇条書きリスト」で作られています。

<ul> <li>ホーム</li> <li>会社概要</li> <li>お問い合わせ</li> </ul>

🎨 2. CSS：おしゃれにデザイン

骨組みができたら、次はメイクアップ（CSS）の時間です。
「誰を（セレクタ）」「どうする（プロパティ）」のセットで指示を出します。

指示の書き方

style.css /* h1さん（見出し）を、赤くして！ */ h1 { color: red; } /* 画面全体の背景を、グレーにして！ */ body { background-color: #f0f0f0; }

【重要】すべての要素は「箱」である

ここが一番のポイントです。Web上のパーツは、すべて「四角い箱」でできています。
この箱には「3つのバリア」があります。

Margin (外の距離)

Border (枠線)

Padding (内側のスキマ)

文字や画像

💡

ここがテストに出ます！
「文字の背景に色をつけたい」時は、Padding（内側のスキマ）を使います。
Margin（外の距離）には色はつきません。ここを間違えると、思った通りのデザインになりません。

🗺️ 3. パス：ファイルの住所

試験で不合格になる最大の原因は、コードのミスではなく「画像の場所指定（パス）」の間違いです。
「画像が表示されない！」とならないよう、住所の書き方をマスターしましょう。

「相対パス」の考え方

たとえ話：「隣の家」

❌ 絶対パス（ダメな例）
「宇宙地球日本 ○○市 1-1 タロウさんの家」
→ 長すぎますし、タロウさんが引越したら届かなくなります。

⭕ 相対パス（正解！）
「隣の家」
→ これなら、自分がどこにいても「隣」の関係は変わりません。

魔法の記号「../」

これは「一つ上の階層（フォルダ）に戻る」という意味です。
「部屋を出る」とイメージしてください。

シチュエーション：
あなたは今、css という部屋の中にいます。隣の部屋（img）にある画像を取りに行くには？

正解の手順：
1. ../ で、一旦部屋を出る（廊下に出る）
2. img/ で、隣の部屋に入る
3. logo.png を取る

合体させると： url("../img/logo.png");

⏰ 4. 本番：60分の戦い方

試験時間は60分。迷っている暇はありません。以下の手順通りに進めれば、確実に間に合います。

[開始 05分] フォルダを開いて観察。「どこに画像があるか？」地図を頭に入れる。
[前半 20分] HTMLタグ打ち。見た目は崩れていてOK。まずは骨組みを作る。
[中盤 25分] CSSで色塗り。上から順にやる。わからない場所は飛ばす！
[最後 10分] リンクと画像の確認。これだけで20点アップします。

準備はできましたか？
次は実際の画面で、トラブルを解決してみましょう。

👉 実践トレーニングを開始する