MDNで学ぶ！ホームページ作成 基礎学習ロードマップ
初学者がゼロからWebサイト制作の基礎を習得するための順序を、MDN Web Docs（日本語）へのリンク付きでまとめた詳細ロードマップです。
Step 1. HTML の基礎
概要
Webページの構造を担う言語である HTML の基本を理解します。要素、属性、文書構造、主なタグの使用法を習得します。
学習内容
- HTMLとは何か：文書の構造と意味を定義する言語。
- 基本構造（
<!DOCTYPE html>,<html>,<head>,<body>など）。 - 代表的なタグ：見出し（
<h1>〜<h6>）、段落（<p>）、画像（<img>）、リンク（<a>）、リスト（<ul>/<ol>）、テーブル（<table>）、フォーム（<form>）。 - セマンティックHTML（
<header>,<nav>,<main>,<footer>等）。
推奨 MDN（日本語）
実践課題
- 自己紹介ページ（HTMLのみ）を作成する。
- 画像と外部リンクを含める。
Step 2. CSS の基礎
概要
HTMLで構造化したページに見た目・レイアウトを与えるための CSS を学びます。
学習内容
- CSSの基本構造（セレクタ・プロパティ・値）。
- 色・フォント・余白・枠線などのスタイリング。
- ボックスモデル（content・padding・border・margin）。
- レイアウト手法：
display, Flexbox, Grid。
推奨 MDN（日本語）
実践課題
- Step 1のページにCSSを適用して装飾する。
- FlexboxまたはGridでヘッダー・サイドバー・メイン・フッター構成を実装する。
Step 3. Webデザインとレスポンシブ／アクセシビリティ
概要
デザイン原則、レスポンシブ対応、アクセシビリティに配慮した作り方を学びます。
学習内容
- レスポンシブデザイン（メディアクエリ、モバイルファースト）。
- 配色・余白・視線誘導などのデザイン原則。
- ウェブアクセシビリティの基本（alt属性、ラベル、キーボード操作対応など）。
参考（MDN）
実践課題
- スマホ・タブレット・PCの横幅で表示確認し、レスポンシブ化する。
- すべての画像に
altを設定し、フォームに
Step 4. JavaScript の基礎
概要
ユーザーインタラクションに応じた動的挙動を実装するための JavaScript を学びます。
学習内容
- 文法の基礎（変数・関数・条件分岐・ループ）。
- イベントハンドラとDOM操作（要素の取得・変更・生成・削除）。
- フォーム検証、簡易的なアニメーション制御など。
推奨 MDN（日本語）
実践課題
- ボタンを押すとテキストが変わる処理を実装する。
- フォーム送信前に必須項目をチェックして、エラーメッセージを表示する。
Step 5. ミニサイト制作（統合実践）
概要
HTML・CSS・JavaScript を統合して、簡易的なサイトを制作・公開準備します。
実装要件（例）
- トップページ＋下層ページ2〜3枚。
- 共通ナビゲーション、画像、リンク、フォームの実装。
- レスポンシブ対応およびアクセシビリティ基礎の確保。
実践課題
- サイトマップを作成し、ページテンプレートを用意する。
- モバイルメニュー開閉や簡易スライダー等を JavaScript で実装する。
- ローカルでのブラウザ・画面幅チェックを行う。
Step 6. 公開と運用入門
概要
インターネット上にサイトを公開し、運用を開始するための基礎を学びます。
学習内容
- 公開方法：GitHub Pages（無料）、レンタルサーバー＋独自ドメイン（DNS・FTP等）。
- SEOの基礎：メタ情報・見出し構造・モバイル対応等。
- 運用フロー：バージョン管理（Git）、バックアップ、セキュリティ対策。
実践課題
- GitHub Pages へデプロイしてサイトを公開する。
- Google Search Console 等への登録方法を確認する。
- 更新フロー（Markdown→HTML→コミット→デプロイ）を作る。
Step 7. 発展学習（選択項目）
概要
プロダクションレベルや効率化を目的とした技術・ツールを学びます。
学習候補
- CSSアニメーション・トランジション。
- SASS/SCSS 等のプリプロセッサ。
- JavaScript による API 通信（
fetch()）と非同期処理。 - フロントエンドフレームワーク（React、Vue など）の入門。
実践課題
- 外部 API を使ってデータを取得・表示する。
- フレームワークを使った簡易 SPA を構築する。
参考・補助教材
- MDN Learn（日本語）: 総合チュートリアル
- Progate、ドットインストール等の入門学習サービス（補助教材として推奨）。
備考（貼り付け時の注意）
- カスタムHTMLブロックに貼り付け後、WordPressの「プレビュー」で表示確認を行ってください。
- 必要に応じて段落や見出しのスタイルはエディタ上で再指定してください（テーマ依存）。
- 外部リンクは target=”_blank” と rel=”noopener” を設定しています。必要なら削除してください。
