Webサイト制作の教科書

Web制作とは｜このサイトで分かること

Webサイト制作の教科書は、HTML、CSS、JavaScript、PHP、Vue.js、jQuery と Web デザインを、調べたいときにすぐ引ける辞典の形でまとめたサイトです。Web制作の勉強を始めたばかりで、コーディング初心者として何から手をつければよいか迷っている人、実務でフロントエンドを担当するコーダーが「あのプロパティの挙動をもう一度確認したい」というときに使えることを目指しています。

各記事は、「書き方の基本」「よくあるつまずき」「実際に動かして確認した結果」を軸にまとめています。仕様の細部は変わりうるため、迷ったときの最終的な拠り所は MDN や WHATWG、W3C、各言語の公式ドキュメントです。このサイトは、公式を読む前の道案内として、また読んだ後の実例集として使ってもらえればと考えています。

Web制作がまったくはじめての人は、HTMLサイトを作って公開するまでを8ステップでまとめたHTMLサイトの作り方ロードマップ（初心者ガイド）から、Vue.js を学びたい人はVue.js ステップガイドから読むと迷いません。

はじめての人へ｜最初に読む5本

Web制作の学習では、ページの骨組み、見た目、動きの順に進むのが一般的です。次の5本は、その順番で選びました。

1. セマンティックHTMLとは｜header・main・article の使い分け … まず HTML の役割と、意味に沿ってタグを選ぶ考え方を知ります。
2. box-sizing: border-boxとは｜幅の計算と全体指定のやり方 … CSS でつまずきやすい「サイズの計算」を最初に片づけます。
3. CSS Flexboxの使い方｜横並び・gap・flex:1の基本 … 横並びのレイアウトを作れると、コーディングが一気に実践的になります。
4. let・const・varの違い｜使い分けとスコープの基本 … JavaScript は変数の扱いから。スコープの考え方はすべての土台です。
5. querySelectorとは｜使い方・querySelectorAllとの違い・nullエラー対策 … HTML の要素を JavaScript で取得する、DOM 操作の入口です。

テーマ別の入口

目的が決まっている人は、次のカテゴリから探せます。各カテゴリには全体の地図となる導入文があります。

• HTML … 文書の構造とフォームの基本。代表記事は HTMLフォームの基本｜label・name・required・autocomplete の書き方 と picture と srcset の使い方｜sizes・レスポンシブ画像の書き方 です。
• CSS基礎 … 「CSSが効かない」を解消する土台。CSS詳細度とは｜計算方法と効かないときの直し方 と CSS変数（カスタムプロパティ）の使い方｜var()とスコープ がおすすめです。
• CSSレイアウト … 横並び、2カラム、中央寄せ。CSS Gridの使い方｜2カラム・自動折り返し・aspect-ratio と CSSで中央寄せする方法｜水平・垂直・上下左右の使い分け から始められます。
• CSSアニメーション・レスポンシブ … 動きとスマホ対応。CSSメディアクエリの書き方｜ブレークポイントとモバイルファースト と CSS transitionとは｜hoverで滑らかに変化させる書き方 が入口です。
• JavaScript基礎 … 言語そのものの理解。JavaScriptのthisとは｜呼び出し方で変わる値と対処法 と map・filter・reduceの使い方｜配列メソッドを実例で を取り上げています。
• JavaScript DOM・非同期 … 画面操作と通信。fetch APIとasync/awaitの使い方｜JSON取得・POST・一覧表示 と イベント委譲とは｜closestで書く実装と動的要素への対応 が代表です。
• jQuery … 既存サイトの保守と移行に。jQuery on()の使い方｜イベント登録・off()・名前空間・one() と jQueryから素のJavaScriptへ移行｜書き換え対応表と注意点 を読んでください。
• Vue.js … Vue 3 の基本。Vue 3 refとreactiveの違い｜使い分けと落とし穴 と Vue 3 script setupとは｜書き方・defineProps・defineEmits から始められます。
• PHP基礎 … 言語の書き方と新しい構文。PHPの型宣言とは｜strict_typesとnullable・union型の書き方 と PHPのmatch式とは｜switchとの違い・使い方・注意点 が代表です。
• PHP実践（フォーム・DB） … フォーム処理と安全対策。PHPのフォーム送信の受け取り｜$_POSTの基本と注意点 と PHPのPDOとプリペアドステートメント｜SQLインジェクション対策 です。
• Webデザイン基礎 … 読みやすさの設計。コントラスト比とは｜WCAG基準と配色の決め方 と line-heightの決め方｜日本語の行間・文字サイズ・行の長さ を扱います。
• UI・UX・アクセシビリティ … 誰でも使える画面に。alt属性の書き方｜画像の代替テキストの基準と例 と :focus-visibleとは｜キーボード操作のフォーカス表示の作り方 が入口です。
• 開発環境・ツール … 開発の道具。Gitの基本｜commit・branch・mergeの流れと使い方 と npmとpackage.jsonの基本｜init・install・scriptsの使い方 です。

最初に押さえたい基礎知識（リサーチ）

公式ドキュメントで確認できる、Web制作の全体像です。最新は各公式サイトで確認してください。

• HTML の仕様は WHATWG が Living Standard として継続的に更新しています。
• MDN の学習コースは、コアのモジュールとして HTML、CSS、JavaScript、アクセシビリティなどを並べ、基礎を終えた人向けに非同期 JavaScript やサーバーサイド開発などの発展モジュールを用意しています。
• アクセシビリティの国際的なガイドラインは W3C の WCAG で、最新版は 2.2（2023年10月公開）です。2.0・2.1 との後方互換性が保たれるよう設計されています。
• Vue は、HTML、CSS、JavaScript を土台にした UI のフレームワークで、静的な HTML への部分的な導入から SPA まで、段階的に使える「プログレッシブフレームワーク」と説明されています。API は Options API と Composition API の2種類があります。

よくある質問

Q. Web制作は何から勉強すればよいですか。
A. HTML、CSS、JavaScript の順が定番です。まず セマンティックHTMLとは｜header・main・article の使い分け から始めてください。

Q. コーディング初心者がつまずきやすい点は。
A. CSS が効かない原因と、サイズの計算です。CSS詳細度とは｜計算方法と効かないときの直し方 と box-sizing: border-boxとは｜幅の計算と全体指定のやり方 を読むと整理できます。

Q. jQuery は今も勉強する必要がありますか。
A. 既存サイトの保守では今も出会います。読み書きと移行は jQueryから素のJavaScriptへ移行｜書き換え対応表と注意点 を参照してください。

Q. PHP と JavaScript の違いは何ですか。
A. PHP はサーバー側、JavaScript は主にブラウザ側で動きます。PHP の入口は PHPのフォーム送信の受け取り｜$_POSTの基本と注意点 です。

Q. Vue.js を始めるのに必要な準備は。
A. HTML、CSS、JavaScript の基礎があれば、CDN から試せます。Vue 3 CDNで使う方法｜ビルドなしでHTMLに読み込む手順 を見てください。

Q. アクセシビリティは後回しでもよいですか。
A. 後から直すほうが手間がかかりやすいため、早めに意識するのがおすすめです。ARIA属性の使いどころ｜aria-expanded・aria-labelの基本 から読めます。