【2026年版】HTML/CSSの始め方 — Webサイト制作の第一歩を完全ガイド

HTMLは「Webページの骨組み」で、CSSは「見た目を整えるペンキ」みたいなものだよ。HTMLで「ここが見出し」「ここが段落」「ここにリンク」と構造を決めて、CSSで「文字は青にしよう」「余白をもっと取ろう」とデザインを当てていくんだ。家で言えば、HTMLが柱や壁の骨組み、CSSが壁紙やインテリアだね。

そうだね、まずはテキストエディタ（VS Codeがおすすめ）で index.html というファイルを作るところから始めよう。HTMLファイルの先頭には「これはHTML5ですよ」と宣言する DOCTYPE を書いて、その下に html タグ、head タグ（ページの裏方情報）、body タグ（実際に表示される部分）の3層構造を作るよ。head の中には文字コードの指定やページタイトルを入れて、body の中に本文を書いていくんだ。

まず押さえたいのは7種類くらいだね。見出しの h1 から h6（h1 が一番大きい見出し）、段落の p タグ、リンクを貼る a タグ、画像を表示する img タグ、箇条書きの ul（番号なし）と ol（番号あり）リスト、そしてグループ化に使う div タグ。この7つで基本的なWebページはもう作れるよ。h1 はページに1つだけ使うのがSEO的にもアクセシビリティ的にも良い習慣だね。

CSSは「どの要素に」「何のスタイルを」「どう適用するか」の3点セットで書くよ。たとえば h1 の文字色を青にしたいなら、h1 がセレクタ、color がプロパティ、blue が値だね。CSSの書き方は3通りあって、style属性に直接書く方法、head内に style タグで書く方法、別ファイル（.css）に書いてlinkタグで読み込む方法。実務では別ファイルが基本だよ。そして超重要なのが「ボックスモデル」という概念。すべてのHTML要素は content（中身）、padding（内側余白）、border（境界線）、margin（外側余白）の4層構造になっているんだ。

そこで登場するのがFlexboxとGridだよ。Flexboxは「1次元のレイアウト」で、要素を横一列や縦一列に並べるのが得意。ナビゲーションメニューやカード一覧によく使うね。display を flex に指定して、justify-content で横方向、align-items で縦方向の位置を調整するよ。Gridは「2次元のレイアウト」で、行と列を同時に制御できる。ページ全体のレイアウト（ヘッダー・サイドバー・メイン・フッター）を組むのに最適だね。最初はFlexboxから覚えると取り組みやすいよ。

「レスポンシブデザイン」だね。CSSのメディアクエリという機能を使って、画面幅に応じてスタイルを切り替えるよ。たとえば画面幅が768px以下のときはカードを1列表示、それ以上なら3列表示、といった具合だね。head タグに viewport の meta タグを入れるのも忘れずに。これがないとスマホで表示が崩れるよ。最近の実務では「モバイルファースト」といって、まずスマホ向けのスタイルを書いてから、大きい画面向けにメディアクエリで上書きしていくアプローチが主流だよ。

ブラウザの「開発者ツール」が最強の味方だよ。ChromeならF12キーで開ける。要素をクリックするとHTMLの構造が見えて、CSSの適用状況もリアルタイムで確認・編集できるんだ。ボックスモデルも色分けで視覚的に表示されるから、余白の調整がすごく楽になる。レスポンシブのテストも、デバイスツールバーでスマホやタブレットの画面サイズをシミュレーションできるよ。

まずアクセシビリティの基本を押さえておこう。img タグには必ず alt 属性で画像の説明を入れる、見出しのレベルを飛ばさない（h1 の次にいきなり h4 とか）、色だけで情報を伝えないといったポイントだね。aria属性を使えばスクリーンリーダーへの対応もできる。CSSではカスタムプロパティ（CSS変数）を使うと、テーマカラーを一括管理できて便利だよ。最新だとコンテナクエリという機能もあって、画面幅じゃなくて親要素の幅に応じてスタイルを変えられるんだ。

その通り！HTML/CSSで「見た目」が作れるようになったら、JavaScriptで「動き」を付けるのが王道ルートだよ。ボタンを押したら表示が変わるとか、フォームの入力チェックとか。その先にはReactやVue、Astroといったフレームワークの世界が広がっている。ただ、急がなくて大丈夫。HTML/CSSをしっかり理解している人は、フレームワークを学ぶときも圧倒的に早いから。まずは簡単な自己紹介ページを作って公開するところから始めてみよう。GitHubPagesやCloudflare Pagesなら無料でホスティングできるよ。