Webサイト制作の教科書

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

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

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

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

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

セマンティックHTMLとは｜header・main・article の使い分け … まず HTML の役割と、意味に沿ってタグを選ぶ考え方を知ります。
box-sizing: border-boxとは｜幅の計算と全体指定のやり方 … CSS でつまずきやすい「サイズの計算」を最初に片づけます。
CSS Flexboxの使い方｜横並び・gap・flex:1の基本 … 横並びのレイアウトを作れると、コーディングが一気に実践的になります。
let・const・varの違い｜使い分けとスコープの基本 … JavaScript は変数の扱いから。スコープの考え方はすべての土台です。
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 HTML Living Standard
CSS	見た目とレイアウト	W3C（仕様）、MDN（解説）
JavaScript	動きとデータ処理	ECMAScript 仕様、MDN
PHP	サーバー側の処理	PHP マニュアル
Vue.js	UI のフレームワーク	Vue.js 公式ガイド

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の基本から読めます。

編集部の見解｜このサイトの使い方

Web制作は、「全部を順番に覚える」よりも、作りたいものから逆算して学ぶほうが続くと考えます。たとえば、問い合わせフォームを作るなら HTML のフォーム、CSS のレイアウト、JavaScript の入力チェック、PHP の送信処理という具合に、複数の技術が一つの目的でつながるからです。このサイトは辞典として、そうした必要な部分を拾い読みできるように作っています。

つまずきやすいのは、エラーの原因が CSS の詳細度や JavaScript の this のように「仕組み」にある場合で、書き方の暗記では解決しにくい点です。そのため、各記事では「なぜそうなるか」を重視しています。一方で、新しい機能や仕様は更新が早く、本サイトの内容も最新ではなくなる可能性があります。実際の案件に使うときは、公式ドキュメントと対応ブラウザを必ず確認してください。

また、セキュリティに関わる内容（フォームの扱いや PHP の安全対策など）は、一般的な考え方の紹介であり、個別のサイトの安全を保証するものではありません。公開前には、自分の環境での検証をおすすめします。