HTML/CSSとは？Webページの仕組みを初心者向けに図解で解説

Q: HTML5 / CSS3 という表記をよく見ますが

A. 現在の標準が HTML5 / CSS3 です。古いタグ ( , など) は使われなくなり、セマンティックなタグ ( , など) が中心になりました。

普段あなたが見ているWebページは、すべてHTMLとCSSという2つの言語で作られています。ニュースサイト、ECサイト、SNS、どれも例外ではありません。この記事では、HTMLとCSSがそれぞれどんな役割を持ち、ブラウザがどのようにWebページを表示しているのかを、初心者の方にも分かるように解説します。

HTML と CSS とは

HTML は Web ページの「構造」を、CSS は「見た目 (色・余白・レイアウト)」を担当する言語のことです。両方は組で使われ、ブラウザで表示されるすべての Web サイトの土台になっています。

TL;DR 早わかりサマリー

HTML は Web ページの「骨組み」、CSS は「見た目」を担当する Web 制作の二大基礎です
両方とも 1-2 週間で基本を押さえられ、3-5 時間で 1 ページの LP が作れるようになります
「タグを覚える」より「セマンティック (意味) を理解する」のが SEO とアクセシビリティで効きます
Flexbox と Grid を覚えるとレイアウトの 9 割をカバーでき、現代的なデザインが組めます

HTMLとは「Webページの骨組み」

HTML（HyperText Markup Language）は、Webページの構造を定義する言語です。見出し、段落、画像、リンクといった要素を「タグ」で囲むことで、ブラウザに「ここは見出し」「ここは本文」と伝えます。

以下は、最もシンプルなHTMLの例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのWebページ</title>
</head>
<body>
  <h1>こんにちは、Web</h1>
  <p>これは最初のWebページです。</p>
  <a href="https://example.com">リンクはこちら</a>
</body>
</html>

このコードをブラウザで開くと、見出し、文章、リンクが表示されます。HTMLの役割は、あくまで「何がどこにあるか」を定義することです。色やレイアウトといった見た目の情報は含まれていません。

よく使うHTMLタグ

HTMLには多くのタグがありますが、まず覚えるべき基本タグは以下の通りです。

<h1> ~ <h6> : 見出し（h1が最も大きく、h6が最も小さい）
<p> : 段落（本文テキスト）
<a> : リンク（他のページへの参照）
<img> : 画像の表示
<ul> / <li> : 箇条書きリスト
<div> : 汎用的なブロック要素（レイアウトの区切りに使用）

これらを組み合わせるだけで、基本的なWebページの構造は作れます。

CSSとは「Webページの見た目」

CSS（Cascading Style Sheets）は、HTMLで定義した構造に「見た目」を与える言語です。文字の色、背景色、余白、フォントサイズ、レイアウトなど、デザインに関するすべてをCSSで制御します。

先ほどのHTMLに、CSSを適用してみましょう。

CSS

body {
  font-family: "Helvetica Neue", sans-serif;
  background-color: #f5f5f5;
  color: #333;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #007A5A;
  border-bottom: 2px solid #007A5A;
  padding-bottom: 10px;
}

a {
  color: #007A5A;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

CSSを適用すると、同じHTMLでも見た目が大きく変わります。背景色がつき、見出しに色とボーダーが加わり、リンクのスタイルも変化します。HTMLが「家の骨組み」なら、CSSは「壁紙や家具の配置」に例えられます。

CSSの3つの書き方

CSSをHTMLに適用する方法は3つあります。

外部ファイル：別の .css ファイルに記述し、HTMLから読み込む（推奨）
styleタグ：HTMLの <head> 内に <style> タグで記述する
インラインスタイル：HTMLタグに直接 style 属性で記述する

実務では、管理のしやすさから外部ファイルを使うのが一般的です。HTMLファイルの <head> 内に以下のように記述して読み込みます。

HTML

<link rel="stylesheet" href="style.css">

ブラウザはどうやってページを表示するのか

Webページが表示されるまでの流れを理解すると、HTMLとCSSの関係がより明確になります。

ブラウザがサーバーにHTMLファイルをリクエストする
サーバーがHTMLファイルを返す
ブラウザがHTMLを解析し、DOM（Document Object Model）というツリー構造を構築する
HTML内で参照されているCSSファイルを追加でリクエストする
CSSの情報をDOMと組み合わせ、レンダリングツリーを生成する
レンダリングツリーに基づいて、画面にピクセルを描画する

この一連の処理は非常に高速で、通常は数百ミリ秒以内に完了します。ポイントは、HTMLとCSSが別々に処理された後、最終段階で統合されるという点です。だからこそ、構造（HTML）と見た目（CSS）を分離して管理することに意味があります。

HTMLとCSSの役割を整理する

項目	HTML	CSS
役割	構造の定義	見た目の装飾
記述内容	見出し、段落、画像、リンク	色、サイズ、余白、レイアウト
ファイル拡張子	.html	.css
例え	家の骨組み	壁紙・家具の配置
単体で機能するか	表示可能（装飾なし）	HTML なしでは意味をなさない

HTMLだけでもWebページは表示できますが、CSSがなければ非常に素朴な見た目になります。逆に、CSSだけではページは成立しません。両者はセットで使うことが前提の技術です。

実際にコードを書いてみよう

HTMLとCSSの基本を理解したら、次は実際に手を動かしてみることが大切です。テキストエディタ（VS Codeなど）でHTMLファイルを作成し、ブラウザで開くだけで結果を確認できます。特別な環境構築は不要です。

以下のような簡単な自己紹介ページから始めてみましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>自己紹介ページ</title>
  <style>
    body { font-family: sans-serif; margin: 40px; }
    .profile { background: #fff; padding: 24px; border-radius: 8px; }
    .profile h2 { color: #007A5A; }
  </style>
</head>
<body>
  <div class="profile">
    <h2>山田太郎</h2>
    <p>Web開発を勉強中です。HTML/CSSから始めています。</p>
    <ul>
      <li>趣味：読書</li>
      <li>目標：Webサイトを自分で作れるようになること</li>
    </ul>
  </div>
</body>
</html>

このコードでは、HTMLで名前・紹介文・趣味リストの構造を定義し、CSSで背景色や角丸、色を指定しています。この小さなページを出発点にして、少しずつ要素を追加していくことで、HTMLとCSSの理解が深まります。

より実践的なWebサイト制作に挑戦したい方は、HTML/CSSで初めてのWebサイトを作ろうも参考にしてください。

HTML の重要タグ 10 選 — まずこれだけ覚える

タグは数百ありますが、実務で頻出するのは次の 10 個です。

1. <h1>〜<h6> 見出し。h1 はページ 1 つにつき 1 つが原則。SEO に直結します。

2. <p> 段落。本文の塊ごとに使います。

3. <a> リンク。href 属性で遷移先を指定。target="_blank" で別タブ。

4. <img> 画像。alt 属性を必ず書く (アクセシビリティと SEO)。

5. <ul> / <ol> / <li> 箇条書きと番号付きリスト。

6. <div> / <span> 汎用ブロック / インライン。意味を持たないグループ化。

7. <header> / <main> / <footer> セマンティックなレイアウト。SEO に有利。

8. <section> / <article> 意味のあるコンテンツの区切り。

9. <form> / <input> / <button> フォームと入力部品。

10. <table> / <tr> / <td> 表組み。レイアウトには使わない (古い手法)。

CSS の超重要プロパティ 10 選

CSS のプロパティも数百ありますが、最初は次の 10 個で 8 割カバーできます。

1. color / background 文字色 / 背景色。

2. font-size / font-weight 文字サイズ / 太さ。

3. margin / padding 外側余白 / 内側余白。

4. display: flex / grid モダンレイアウトの 2 大選択肢。

5. width / height / max-width 要素サイズの基本。

6. border / border-radius 枠線と角丸。

7. position: absolute / relative / fixed 配置の制御。

8. text-align / line-height 文字配置と行間。

9. transition ホバー時のアニメーション。

10. @media レスポンシブ対応のメディアクエリ。

これら 10 個を組み合わせれば、現代的な LP の 9 割は組めます。

ハンズオン Step-by-Step

HTML / CSS は専用ツール不要で、メモ帳と Chrome があれば動かせます。

Step 1. test.html を作る

メモ帳や VS Code で次を貼り付けて test.html として保存します。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head><meta charset="UTF-8"><title>はじめての HTML</title></head>
  <body>
    <h1>こんにちは</h1>
    <p>これは初めての HTML ページです。</p>
  </body>
</html>

Step 2. Chrome で開く

保存した test.html をダブルクリックすると Chrome で開き、見出しと段落が表示されます。

Step 3. CSS で色をつける

<head> の中に次の <style> を入れると、見出しが青、本文が灰色になります。

HTML

<style>
  h1 { color: #0066cc; }
  p { color: #555; font-size: 18px; }
</style>

Step 4. 余白を整える

body に padding を入れて、文字が画面端にくっつかないようにします。

CSS

body { padding: 2rem; font-family: sans-serif; }

Step 5. 再読み込みして確認

ブラウザで再読み込みすると、色と余白が反映されます。CSS を変えるたびに見た目が変わる体験が一番の楽しさです。

次は HTML/CSS ではじめての Web サイト制作で、複数ページを Netlify に公開してみましょう。

よくある質問

Q. HTML と CSS、どちらから学ぶべきですか

A. HTML → CSS の順です。1-2 日で HTML の主要タグを覚え、その後 1-2 週間で CSS を習得するのが標準ペースです。両方を同時に学んでも構いません。

Q. Bootstrap / Tailwind CSS は最初から使うべき？

A. 素の CSS で 1-2 サイト作ってから移行するのがおすすめです。基礎を飛ばしてフレームワークから入ると、応用が効かなくなります。

Q. HTML5 / CSS3 という表記をよく見ますが

A. 現在の標準が HTML5 / CSS3 です。古いタグ (<font>, <center> など) は使われなくなり、セマンティックなタグ (<header>, <article> など) が中心になりました。

Q. ChatGPT に書かせれば学ばなくていい？

A. AI 出力をチェックする目を持つには、HTML / CSS の基礎理解が必須です。複雑なレイアウトでは AI も間違えるので、自分で修正できる地力を持つのが安全です。

Q. スマホ対応 (レスポンシブ) はいつ学ぶべきですか

A. CSS の基礎を 1 週間学んだ後で、メディアクエリと Flexbox を加えて学習するとスムーズです。最初からモバイルファーストで書く習慣を付けると後で楽です。

Q. 次に何を学べばよいですか

A. JavaScript で動きを付けるのが次のステップです。詳しくは JavaScript とはと JavaScript で Web ページを動かすを順に進めてください。

次のステップへ

HTMLとCSSは、Web開発のすべての土台となる技術です。JavaScriptやReactといったフレームワークを学ぶ場合も、HTMLとCSSの理解が前提になります。まずはこの2つをしっかり身につけることが、Web開発者への最短ルートです。

チョットデキルの「HTML・CSS」コースでは、基本タグの使い方からレスポンシブデザインまで、手を動かしながら段階的に学べるカリキュラムを用意しています。この記事で興味を持った方は、ぜひコースで実践的なスキルを身につけてください。

次に読むべきリソース

学習を始めたい方 — HTML/CSS 入門コース
深く理解したい方 — HTML/CSS で最初の Web サイト
無料相談したい方 — LuaGate 無料相談

出典・参考リンク

本記事の主張・数値・仕様に関する根拠は、以下の一次情報・公式ドキュメントを参照しています。リンク先の更新により内容が変わる場合があるため、最新情報は各公式サイトで確認してください。

この記事について

監修: 生田陸人 (LuaGate エンジニア / 大手 IT 企業現役エンジニア)
公開: 2026-05-28
最終更新: 2026-05-28
カテゴリ: フロントエンド
検証環境: HTML Living Standard (WHATWG) / CSS3 / Chrome 124
編集ポリシー: 公式ドキュメント・公的統計を一次情報として優先し、社内エンジニアが実機検証した内容のみを掲載しています。修正提案や事実誤認の指摘はチョットデキル運営までお寄せください。

HTML/CSSとは？Webページの仕組みを初心者向けに図解で解説

TL;DR 早わかりサマリー

HTMLとは「Webページの骨組み」

よく使うHTMLタグ

CSSとは「Webページの見た目」

CSSの3つの書き方

ブラウザはどうやってページを表示するのか

HTMLとCSSの役割を整理する

実際にコードを書いてみよう

HTML の重要タグ 10 選 — まずこれだけ覚える

CSS の超重要プロパティ 10 選

ハンズオン Step-by-Step

Step 1. test.html を作る

Step 2. Chrome で開く

Step 3. CSS で色をつける

Step 4. 余白を整える

Step 5. 再読み込みして確認

関連リソース

よくある質問

Q. HTML と CSS、どちらから学ぶべきですか

Q. Bootstrap / Tailwind CSS は最初から使うべき？

Q. HTML5 / CSS3 という表記をよく見ますが

Q. ChatGPT に書かせれば学ばなくていい？

Q. スマホ対応 (レスポンシブ) はいつ学ぶべきですか

Q. 次に何を学べばよいですか

次のステップへ

次に読むべきリソース

出典・参考リンク

この記事について

似ている記事

HTML/CSSで初めてのWebサイトを作ろう｜ステップバイステップガイド

TypeScript vs JavaScript の違い｜初心者はどちらから始めるべき？

React vs Vue.js 徹底比較｜どちらを選ぶべき？違いと選び方