HTMLとは？CSSとの違いから実際のコーディング手順までぜんぶ解説

2025年11月28日

HTML

Webページを自分で作ってみたいと思ったとき、最初にぶつかるのがHTMLとCSSです。

どちらも聞いたことはあるけれど、何が違うのか、どこから手を付ければよいのかが分からないという方は多いです。

本記事では、HTMLとは何かという基礎から、CSSとの違い、実際のコーディング手順までを、図解とサンプルコードを交えながら丁寧に解説します。

目次 [ close ]

HTMLとは何か

HTMLの基本概念とは

HTMLとはHyperText Markup Languageの略で、Webページの「文書構造」を記述するための言語です。

プログラミング言語のように計算をしたり条件分岐をしたりするものではなく、文章の意味や役割をブラウザに伝えるための「マーク(印)」を付ける言語だと考えると理解しやすいです。

文章の一部を見出しにしたいときには<h1>タグ、段落にしたいときには<p>タグというように、タグと呼ばれる記号で囲むことで「これは見出しです」「これは段落です」と伝えます。

HTMLの役割は、Webページの「何がどこにあるか」「これは何という種類の情報か」を整理して構造化することです。

これが後からCSSやJavaScriptによるデザインや動きの土台となります。

HTMLでできること・できないこと

HTMLでできることは、主に次のようなものです。

見出しや段落など、テキストの構造を表す
画像やリンク、動画などをページに埋め込む
リストや表で情報を整理する
入力フォームを設置してユーザーから情報を受け取る

一方で、HTMLだけでは次のようなことはできません。

文字サイズや色、レイアウトなど細かい見た目の指定
アニメーションや動きのあるインタラクション
商品の合計金額の計算など、複雑なロジックや処理

デザインはCSS、動きや処理はJavaScriptといった役割分担になっているため、HTMLだけで「きれいなWebサイト」や「動くWebアプリ」を完成させることはできないという点を最初に押さえておくと混乱しにくくなります。

Webページが表示される仕組み

Webページが表示されるまでには、いくつかのステップがあります。

ここをイメージできると、HTMLとCSSの役割もよりはっきりしてきます。

1つの典型的な流れを文章で追ってみます。

まずユーザーがブラウザ(ChromeやEdgeなど)にURLを入力すると、ブラウザはそのURLの先にあるWebサーバーへ「ページを見せてください」というリクエストを送ります。

Webサーバーはそれに対してHTMLファイル、CSSファイル、画像ファイルなどを返します。

ブラウザは最初にHTMLを読み込み、上から順に解析しながらDOM(Document Object Model)という内部的な構造を組み立てます。

続いてCSSを読み込み、どの要素にどのスタイルを当てるかを計算し、レイアウトを決定します。

最後に、その結果を画面に描画します。

ここで重要なのは「ブラウザはまずHTMLを読み、それをもとにCSSやJavaScriptを適用する」という順序です。

このためHTMLでの構造づくりがとても重要であり、CSSはその上に乗るデザインレイヤーだと理解できます。

HTMLとCSSの違い

HTMLは「骨組み」CSSは「デザイン」

HTMLとCSSの関係は、「骨組み」と「見た目の装飾」と表現されることが多いです。

HTMLは、ページの中にある要素を「見出し」「本文」「画像」「リンク」といった意味・役割で区切り、論理的な構造を作ります。

これは、家づくりで言えば柱や壁、部屋の間取りにあたります。

一方CSSは、その構造の上に色やフォント、余白、配置(レイアウト)などを指定します。

家で言えば壁紙の色、家具の配置、照明のデザインといった部分です。

この2つをセットで使うことで、読みやすく、見やすく、使いやすいWebページができあがります。

HTMLタグとCSSプロパティの役割の違い

HTMLとCSSは文法も役割も異なります。

具体的な例で比較してみます。

HTMLの例(構造を定義)

HTML

<!-- 見出しと段落を定義するHTML -->
<h1>はじめてのHTML</h1>
<p>これはHTMLの基本的なサンプルです。</p>

CSSの例(見た目を定義)

CSS

/* 上のHTMLに対して見た目を指定するCSS */
h1 {
  color: blue;           /* 文字色を青にする */
  font-size: 32px;       /* 文字サイズを32pxにする */
}

p {
  line-height: 1.8;      /* 行間を少し広くする */
}

HTMLでは<h1>や<p>といったタグを使って「これは何か」を定義します。

一方でCSSは、colorやfont-sizeなどのプロパティを使い「どう見えるか」を指定します。

このように、タグとプロパティはまったく別物であることを意識しておくと、混乱を防ぎやすくなります。

よくある誤解とHTMLだけでできない表現

初心者の方がよく持つ誤解として、次のようなものがあります。

HTMLタグに何か特別なものを使えば、勝手におしゃれなデザインになる
HTMLだけでボタンの色や形、位置まで完全にコントロールできる
表現したい見た目ごとに、専用のHTMLタグが存在する

実際には、HTMLタグはあくまで「意味づけ」であって、見た目を大きく変える力はほとんどありません。

例えば、丸いボタンやグラデーション背景、アニメーションなどはHTMLだけでは実現できず、CSS(場合によってはJavaScript)が必要です。

そのため、デザインを変更したい場合には「どのタグを使うか」ではなく「どの要素にどんなCSSを当てるか」という視点で考える必要があります。

HTMLの基本構造とよく使うタグ

HTML文書の基本構造

HTMLファイルには、どのページでも共通する基本のひな型があります。

まずはこれを丸ごと覚えてしまうのがおすすめです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、HTML</h1>
  <p>これはHTMLの基本構造を示すサンプルです。</p>
</body>
</html>

上から順番に役割を整理すると次のようになります。

<!DOCTYPE html>
この文書がHTML5で書かれていることをブラウザに伝えます。
<html>...</html>
HTML文書全体を囲むルート要素です。lang="ja"は日本語のページであることを示します。
<head>...</head>
ページタイトルや文字コード、CSSの読み込みなど、画面には直接表示されない情報を記述します。
<body>...</body>
実際に画面に表示される内容(見出し、文章、画像など)をすべてここに書きます。

「HTMLを書く = <body>の中身を中心に作っていく」という感覚を持つと、何をどこに書くべきかが分かりやすくなります。

覚えておきたい基本タグ

初心者のうちは、すべてのタグを覚える必要はありません。

まずは次の基本タグから慣れていくとよいです。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>基本タグの例</title>
</head>
<body>
  <!-- 見出し -->
  <h1>これは大見出しです</h1>
  <h2>これは中見出しです</h2>

  <!-- 段落 -->
  <p>これは1つ目の段落です。文章を書くときに使います。</p>
  <p>これは2つ目の段落です。</p>

  <!-- 区切り用のブロック -->
  <div>
    <p>divは要素をグループ化するときに使います。</p>
  </div>

  <!-- インライン要素 -->
  <p>文章の<code>&lt;span&gt;

代表的なタグを表にまとめると、次のようになります。

タグ	役割の概要
`h1〜h6`	見出し(数字が小さいほど重要度が高い)
`p`	段落(文章のかたまり)
`div`	ブロック要素をまとめる箱
`span`	行内の一部を囲むための箱
`br`	改行
`hr`	水平線

タグは「意味」で選ぶという意識を持つと、正しいマークアップに近づいていきます。

リンク(aタグ)と画像(imgタグ)の書き方

Webページらしさを出すためには、リンクと画像の扱い方を早めに覚えておくと便利です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リンクと画像の例</title>
</head>
<body>
  <!-- リンク(aタグ) -->
  <p>
    公式サイトは
    <a href="https://www.example.com">こちらのページ</a>
    をご覧ください。
  </p>

  <!-- 別タブで開くリンク -->
  <p>
    別タブで開く場合は
    <a href="https://www.example.com" target="_blank" rel="noopener">こちら</a>
    をクリックします。
  </p>

  <!-- 画像(imgタグ) -->
  <p>サンプル画像を表示します。</p>
  <img src="images/sample.jpg" alt="サンプル画像の説明テキスト" width="300">

</body>
</html>

上の例のポイントを整理します。

リンク文字
href属性で遷移先のURLを指定します。
target="_blank"
リンク先を新しいタブで開く指定です。rel="noopener"もセットで書くのが推奨です。
<img src="..." alt="...">
srcに画像ファイルのパス、altには画像の説明テキストを書きます。altは画面読み上げや画像の読み込み失敗時に重要なので、必ず記述する習慣を付けるとよいです。

リスト(ul・ol・li)と表(table)の基本

情報を整理して見せるときに便利なのがリストと表です。

リストの例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>リストの例</title>
</head>
<body>
  <h1>リストのサンプル</h1>

  <!-- ul: 順序なしリスト -->
  <h2>好きなフルーツ(順不同)</h2>
  <ul>
    <li>りんご</li>
    <li>みかん</li>
    <li>ぶどう</li>
  </ul>

  <!-- ol: 順序付きリスト -->
  <h2>作業手順(順番が重要)</h2>
  <ol>
    <li>材料を準備する</li>
    <li>下ごしらえをする</li>
    <li>調理する</li>
  </ol>
</body>
</html>

リストでは、ulまたはolでリスト全体を囲み、その中にliタグで1項目ずつ書いていきます。

表(table)の例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>表の例</title>
</head>
<body>
  <h1>価格表のサンプル</h1>

  <table border="1">
    <tr>
      <th>商品名</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>あり</td>
    </tr>
    <tr>
      <td>みかん</td>
      <td>80円</td>
      <td>品切れ</td>
    </tr>
  </table>
</body>
</html>

表では、行を<tr>、見出しセルを<th>、通常のセルを<td>で表します。

border="1"は簡易的な枠線ですが、実際のデザインではCSSでスタイルを調整することが多いです。

フォーム(form・input)の超入門

フォームは、ユーザーから情報を入力してもらう仕組みです。

基本形を1つ覚えておくと、応用しやすくなります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームの超入門</title>
</head>
<body>
  <h1>お問い合わせフォーム</h1>

  <!-- formタグでフォーム全体を囲む -->
  <form action="/send" method="post">
    <p>
      <label>お名前：
        <input type="text" name="name">
      </label>
    </p>

    <p>
      <label>メールアドレス：
        <input type="email" name="email">
      </label>
    </p>

    <p>
      <label>お問い合わせ内容：</label><br>
      <textarea name="message" rows="4" cols="40"></textarea>
    </p>

    <p>
      <button type="submit">送信</button>
    </p>
  </form>
</body>
</html>

ここでは、最低限次のポイントだけ押さえれば十分です。

<form>タグでフォーム全体を囲む
<input>タグで1行の入力欄を作る(種類はtype属性で指定)
<textarea>で複数行の入力欄を作る
<button type="submit">で送信ボタンを作る

実際の送信処理にはサーバー側のプログラムが必要になりますが、HTMLの段階では「どんな項目を入力してもらうのか」だけを考えればOKです。

HTMLとCSSのコーディング手順

コーディング前に準備するもの

HTMLとCSSを書き始める前に、最低限次の3つを準備します。

パソコン(Windows, macOS どちらでもOK)
テキストエディタ
1. VS CodeやAtom、Sublime Textなどがおすすめです。初心者のうちはVS Codeを選んでおけば問題ありません。
ブラウザ
1. Chrome、Firefox、Edgeなど開発者ツールが使えるものなら大丈夫です。

フォルダ構成としては、最初はシンプルにindex.htmlだけから始め、慣れてきたらcssフォルダやimagesフォルダを作って整理していくとよいです。

HTMLファイルを作る手順

実際の手順を、具体的に追ってみましょう。

テキストエディタを開き、新規ファイルを作成します。
先ほど紹介したHTMLの基本構造をコピペします。
ファイル名をindex.htmlとして保存します。

サンプルとして、次のようなHTMLを書いてみます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTMLページ</title>
</head>
<body>
  <h1>はじめてのHTMLページ</h1>
  <p>これは、HTMLファイルを自分で作ってブラウザで表示した最初のページです。</p>
</body>
</html>

保存したindex.htmlをブラウザにドラッグ&ドロップすると、自分で作ったページが表示されます。

「自分で書いた文字がブラウザに表示される」という感覚は、とても大事な第一歩です。

HTMLで骨組みを作る流れ

実際に少しだけ本格的な骨組みを作ってみましょう。

ここでは、シンプルな1ページサイトの構造を考えてみます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルサイトの骨組み</title>
</head>
<body>
  <!-- サイト全体のヘッダー -->
  <header>
    <h1>サンプルサイト</h1>
    <nav>
      <ul>
        <li><a href="#about">このサイトについて</a></li>
        <li><a href="#features">特徴</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <section id="about">
      <h2>このサイトについて</h2>
      <p>このサイトは、HTMLとCSSの学習用サンプルとして作成されています。</p>
    </section>

    <section id="features">
      <h2>特徴</h2>
      <ul>
        <li>シンプルな構造</li>
        <li>基本タグのみで作成</li>
        <li>初心者向けのコメント付き</li>
      </ul>
    </section>

    <section id="contact">
      <h2>お問い合わせ</h2>
      <p>ご質問がある方は、フォームからお気軽にお問い合わせください。</p>
    </section>
  </main>

  <!-- フッター -->
  <footer>
    <p>&copy; 2025 Sample Site</p>
  </footer>
</body>
</html>

ここで重要なのは、「見た目」ではなく「意味」だけを考えてタグを配置していることです。

どこがヘッダーか、どこがメインコンテンツか、どこがフッターか、といった構造をまずHTMLで作り、その後CSSでデザインを整えていく流れになります。

CSSファイルを作成してHTMLに読み込む

次に、HTMLで作った骨組みにCSSでデザインを付けてみます。

まずはCSSファイルを作成し、HTMLから読み込む方法を確認します。

プロジェクトフォルダ内にcssというフォルダを作成します。
その中にstyle.cssというファイルを作り、次のような内容を書きます。

CSS

/* css/style.css */

/* ページ全体の基本設定 */
body {
  font-family: sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ヘッダーのデザイン */
header {
  background-color: #333;
  color: #fff;
  padding: 16px;
}

/* ナビゲーションのスタイル */
nav ul {
  list-style: none;      /* 先頭の黒丸を消す */
  padding: 0;
  margin: 0;
  display: flex;         /* 横並びにする */
  gap: 16px;             /* 要素間のすき間 */
}

nav a {
  color: #fff;           /* リンク文字を白にする */
  text-decoration: none; /* 下線を消す */
}

/* メインコンテンツ */
main {
  padding: 16px;
}

/* フッター */
footer {
  background-color: #f0f0f0;
  text-align: center;
  padding: 8px;
  font-size: 12px;
}

HTML側の<head>内で、このCSSを読み込みます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSを読み込むサンプル</title>
  <!-- ここでCSSファイルを読み込む -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- ここに先ほどのheader, main, footerなどを配置 -->
</body>
</html>

HTMLとCSSは別ファイルに分けて管理し、HTMLからCSSを読み込むというスタイルが、実際のWeb制作でも一般的です。

クラス(class)とID(id)を使ったCSSの当て方

CSSを効率的に当てるには、class属性とid属性の使い方を理解することが大切です。

HTML側の記述

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>classとidの例</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1 id="page-title">サンプルページ</h1>

  <p class="lead">これはページの概要を説明するリード文です。</p>

  <a href="#" class="btn-primary">詳しく見る</a>
  <a href="#" class="btn-secondary">戻る</a>
</body>
</html>

CSS側の記述

CSS

/* idで指定するときは # を使う */
#page-title {
  color: #333;
  text-align: center;
}

/* classで指定するときは . を使う */
.lead {
  font-size: 18px;
  font-weight: bold;
}

/* ボタン風のスタイル */
.btn-primary {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
}

.btn-secondary {
  display: inline-block;
  background-color: #6c757d;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
}

ポイントを整理すると、次のようになります。

id
1つのページ内で一意(1回だけ)付ける名前。CSSやJavaScriptで特定の1要素を指定したいときに使います。
class
複数の要素に共通のスタイルを当てたいときに使います。1つの要素に複数のclassをスペース区切りで指定することもできます。

初心者のうちは、スタイルをまとめたいときはclass、ページ内で特別な役割を持つ要素にはidという目安で使い分けるとよいです。

デベロッパーツールを使ったHTML・CSSの確認方法

HTMLやCSSを書いていると、「この見た目はどのCSSで決まっているのか」「この要素にはどんなスタイルが当たっているのか」を調べたい場面が必ず出てきます。

そこで役立つのがブラウザのデベロッパーツールです。

ブラウザごとに細かい操作は異なりますが、Chromeを例にすると以下のように使います。

調べたいページをChromeで開きます。
調べたい部分で右クリックし、「検証」を選択します。
画面の右側または下側にデベロッパーツールが表示されます。
左側にHTML構造(Elementsタブ)、右側に選択した要素に適用されているCSS(Stylesタブ)が表示されます。

このツールを使えば、他のサイトのHTML構造やCSSの書き方を学ぶこともできますし、自分のサイトの不具合を探すデバッグにも使えます。

最初はとっつきにくいかもしれませんが、少しずつ触って慣れていくと大きな武器になります。

初心者がつまずきやすいポイントと対処法

最後に、初心者の方が特につまずきやすいポイントと、その対処法をまとめておきます。

CSSが反映されない

CSSを書いたのに見た目が変わらない場合は、次の点を順番に確認します。

<link rel="stylesheet" href="...">のパスが間違っていないか
CSSファイルを保存し忘れていないか
ブラウザのキャッシュが残っていないか(強制再読み込みしてみる)
セレクタ(例: .class名)がHTML側と一致しているか

8割くらいはパスの間違いかスペルミスですので、落ち着いて目で確認してみましょう。

画像が表示されない

画像が出ないときも、ほとんどの場合はパスの指定ミスが原因です。

src="images/sample.jpg"と書いた場合、本当にimagesフォルダの中にsample.jpgがあるか
拡張子が.jpgか.jpegか.pngかを正しく指定しているか
大文字・小文字の違いがないか(サーバーでは区別されることが多い)

また、alt属性には必ず説明テキストを書いておくと、表示されないときでも原因の切り分けがしやすくなります。

レイアウトが崩れる

CSSを書き始めると、思った通りにレイアウトされないことがよくあります。

その際には、次の手順で原因を探すとよいです。

デベロッパーツールで要素を選択し、どんなCSSが当たっているか確認する。
疑わしいプロパティ(例: marginやwidthなど)を一時的に無効化して、影響を見ていく。
問題のCSSだけをコメントアウトして、少しずつ元に戻しながら原因を特定する。

一度にたくさんのCSSを書きすぎず、少しずつ変更してはブラウザで確認するというサイクルを回すと、トラブルが起きたときにも原因を絞り込みやすくなります。

まとめ

HTMLはWebページの骨組みと意味を定義する言語であり、CSSはその骨組みにデザインやレイアウトを与えるスタイル指定の言語です。

本記事では、HTMLの基本構造やよく使うタグ、リンクや画像、リストや表、フォームの書き方に加え、CSSファイルの作成と読み込み方、classやidを使ったスタイルの当て方、デベロッパーツールの活用方法まで、一連の流れを解説しました。

最初はシンプルなindex.htmlとstyle.cssから始め、少しずつタグやプロパティのレパートリーを増やしながら、実際に手を動かして学んでいくのがおすすめです。