【2026年版】HTML/CSSの仕組みをやさしく理解する入門ガイド

大丈夫、Webサイトを作る第一歩はHTMLとCSSだけで始められるよ。この2つを覚えれば、今日中に自分のページをブラウザで表示できるんだ。特別なツールも最初はいらないし、プログラミング経験ゼロでも問題ない。HTMLは「ページの骨組み」、CSSは「見た目のデザイン」を担う役割分担で、家で言えばHTMLが柱や壁、CSSが壁紙やインテリアのイメージだね。

必要なのはパソコンとブラウザだけ。テキストエディタ（VS Codeがおすすめだけど、メモ帳でも動く）で index.html というファイルを作るところからスタートだよ。HTMLには html タグ、head タグ（ページの裏方情報）、body タグ（実際に表示される部分）という3層の基本構造があって、body の中に書いたものが画面に出てくる。このページを読み終わったら、30分で「自分の名前が表示されるページ」が作れるようになるよ。

ここで実際にメモ帳やVS Codeで「index.html」を作って、<h1>こんにちは！</h1> と書いて保存し、ブラウザにドラッグ＆ドロップしてみてね。大きな文字で「こんにちは！」と表示されれば成功だよ！

まず押さえたいのは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なら無料でホスティングできるよ。