【HTML＋CSS初心者講座01】HTMLの基礎を0から学ぼう

ウェブサイト制作に欠かせない HTML について、初心者でもわかるようにひとつひとつ丁寧に解説します。図解を交えながら進めるので、プログラミング未経験の方もご安心ください。

1. HTMLとは？
2. HTMLをブラウザで表示してみよう
3. HTMLの書き方の基本
4. HTMLファイルの基本構造
5. よく使うタグの書き方
6. classとidを理解しよう
7. divタグ・spanタグを理解しよう
📝 まとめ

1. HTMLとは？

HTML（エイチ・ティー・エム・エル）とは、ウェブページの土台を作るための言語です。表示したい文章や画像などを専用の「タグ」と呼ばれる記号ではさんで書いていきます。

1-1. HTMLはウェブページの土台

インターネット上に公開されているウェブサイトで、HTMLを使っていないものはほぼ存在しません。今あなたが見ているこのページにも、HTMLが使われています。

HTMLはウェブページに表示する文字や画像の情報を記述するための言語です。

1-2. HTMLだけではウェブページは完成しない

HTMLで作れるのはウェブページの「骨格」です。HTMLだけで書いたページは、文字と画像だけが並ぶシンプルなものになります。

デザインやレイアウトを整えるには CSS（シーエスエス） と呼ばれる言語を使います。HTMLが「構造」を担い、CSSが「見た目」を担当するイメージです。

言語	役割	例え
HTML	ページの構造・内容	建物の骨格・間取り
CSS	デザイン・レイアウト	壁紙・インテリア

1-3. こんなふうに書く

HTMLはアルファベットや記号を組み合わせて書きます。次のようなイメージです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <title>はじめてのHTML</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ウェブデザインを学ぼう！</h1>
  <p>まずはHTMLから始めます</p>
</body>
</html>

一見複雑に見えますが、ひとつひとつ確認していくと難しいことはほとんどありません。

2. HTMLをブラウザで表示してみよう

理屈より先に、実際に動かしてみましょう。以下の手順でHTMLファイルをブラウザに表示できます。

必要なもの

テキストエディタ（メモ帳、VSCode、Sublime Text など）
ブラウザ（Google Chrome など）

手順

1
テキストエディタを開く

テキストエディタを起動します。新しいファイルを作成してください。

サンプルコードをコピーして貼り付ける

コピーするコード

<!DOCTYPE html>
<html>
<head>
  <title>はじめてのHTML</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ウェブデザインを学ぼう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

3
ファイルを保存する（拡張子は .html）

ファイル名を test.html のように .html で終わる名前で保存します。

Windows：Ctrl + S Mac：⌘ + S
4
保存したファイルをブラウザにドラッグ＆ドロップ

保存した test.html ファイルを、ブラウザのウィンドウ上にドラッグします。すると、ウェブページとして表示されます。

✅ ブラウザに「ウェブデザインを学ぼう！」という見出しと「まずはHTMLについて学びましょう」という文章が表示されれば成功です！

コードを変更して再表示する

テキストエディタで <h1> と </h1> の間の文字を変えて保存し、ブラウザを再読み込みしてみましょう。

Windows 再読み込み：F5 Mac 再読み込み：⌘ + R

3. HTMLの書き方の基本

3-1. 基本＝タグではさむ

HTMLの基本文法は、「開始タグ」と「終了タグ」ではさむことです。

<タグ名> ここに内容を書く </タグ名>

開始タグ内容（コンテンツ）終了タグ（スラッシュ付き）

開始タグ〜終了タグまでのひとかたまりを 「要素」 と呼びます。

例

<p>これは段落です。</p>
<h1>これは大見出しです。</h1>

3-2. タグの中にタグを書く（入れ子構造）

HTMLでは「タグの中にタグを書く」ことができます。これを入れ子構造（ネスト）と呼びます。

入れ子の例

<body>
  <h1>大見出し</h1>
  <p>段落テキスト</p>
</body>

⚠️ 入れ子にするとき、タグは正しい順番で閉じる必要があります。
❌ <p><strong>テキスト</p></strong>（NG）
✅ <p><strong>テキスト</strong></p>（OK）

3-3. 開始タグに属性を書くこともある

タグによっては、開始タグの中に「属性」と呼ばれる追加情報を書きます。

<a href=”https://example.com”> リンクテキスト </a>

タグ名 + 属性名=”値” 終了タグ

属性はタグ名の後に 半角スペース を空けてから書きます。

4. HTMLファイルの基本構造

HTMLファイルには決まった「骨格」があります。ひとつずつ確認していきましょう。

HTMLファイルの全体構造

<!-- ① DOCTYPE宣言 -->
<!DOCTYPE html>

<!-- ② htmlタグ（全体をはさむ）-->
<html>

  <!-- ③ headタグ（ページ情報）-->
  <head>
    <!-- ④ titleタグ -->
    <title>ページのタイトル</title>
    <meta charset="UTF-8">
  </head>

  <!-- ⑤ bodyタグ（画面に表示される内容）-->
  <body>
    <h1>見出し</h1>
    <p>文章</p>
  </body>

</html>

4-1. DOCTYPE宣言

<!DOCTYPE html>

「このファイルはHTML5で書かれています」という宣言です。必ずファイルの一番最初に書きます。終了タグはありません。

4-2. htmlタグ

<html> 〜 </html>

「ここからここまでがHTMLコードです」と示すタグです。DOCTYPE宣言を除くすべてのHTMLコードをこのタグではさみます。

4-3. headタグ

<head> 〜 </head>

ウェブページの設定・情報を書く場所です。ここに書いた内容は画面には直接表示されません。

CSSファイルの読み込み
フォントの読み込み
検索エンジン向けの情報（メタタグ）
文字コードの指定

4-4. titleタグ

<title>ページのタイトル</title>

ウェブページのタイトルを指定します。head内に書きます。

ブラウザのタブに表示される
Google などの検索結果に表示される
SNSでシェアしたときのタイトルになる

4-5. bodyタグ

<body> 〜 </body>

ブラウザの画面に表示される内容はすべてbodyの中に書きます。 見出し・文章・画像・リンクなど、実際に見える要素はここに入れます。

💡 bodyタグは1つのHTMLファイルに1回しか使えません。

5. よく使うタグの書き方

body内で使う、頻出タグを紹介します。

5-1. pタグで段落をつくる

<p> タグは 段落（Paragraph） を表す、最もよく使われるタグのひとつです。

HTMLコード

<p>ここに文章を書きます。段落ごとにpタグを使います。</p>
<p>これは別の段落です。</p>

ブラウザ表示イメージ

ここに文章を書きます。段落ごとにpタグを使います。

これは別の段落です。

5-2. h1〜h6タグで見出しをつくる

<h1>〜<h6> タグは見出しを作ります。数字が小さいほど大きい見出しです。

HTMLコード

<h1>h1 ── 最大の見出し</h1>
<h2>h2 ── 2番目に大きい見出し</h2>
<h3>h3 ── 3番目に大きい見出し</h3>
<h4>h4 ── 4番目に大きい見出し</h4>
<h5>h5 ── 5番目に大きい見出し</h5>
<h6>h6 ── 最小の見出し</h6>

ブラウザ表示イメージ

h1 ── 最大の見出し

h2 ── 2番目に大きい見出し

h3 ── 3番目に大きい見出し

h4 ── 4番目に大きい見出し

h5 ── 5番目に大きい見出し

h6 ── 最小の見出し

5-3. imgタグで画像を貼る

<img> タグは画像を表示します。終了タグは不要です。

属性	説明	例
`src`	画像ファイルのパスまたはURL	`src="images/photo.jpg"`
`alt`	代替テキスト（画像が読めない時に表示）	`alt="猫の写真"`
`width`	表示幅（px）	`width="300"`

HTMLコード

<img src="images/photo.jpg" alt="サンプル画像" width="400" />

⚠️ alt属性はアクセシビリティ（視覚障害者向け）とSEOのために必ず書きましょう。

5-4. aタグでリンクをつくる

<a> タグはリンクを作ります。href 属性にリンク先のURLを書きます。

テキストリンク

<a href="https://example.com">サンプルサイトへ</a>

新しいタブで開く場合は target=”_blank” を追加

<a href="https://example.com" target="_blank">新しいタブで開く</a>

画像をクリックでリンク（aタグでimgをはさむ）

<a href="https://example.com">
  <img src="images/banner.jpg" alt="バナー" />
</a>

5-5. ul・ol・liタグで箇条書きをつくる

箇条書きには <ul> または <ol> と <li> をセットで使います。

ul（点付き箇条書き）

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

表示結果

HTML
CSS
JavaScript

ol（番号付き箇条書き）

<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JSを学ぶ</li>
</ol>

表示結果

HTMLを学ぶ
CSSを学ぶ
JSを学ぶ

5-6. brタグで改行する

HTMLコード内でEnterキーを押しても、ブラウザ上の表示には改行が反映されません。改行したい箇所に <br> を書きます。終了タグは不要です。

HTMLコード

<p>1行目のテキスト<br>
2行目のテキスト（brで改行）</p>

表示結果

1行目のテキスト
2行目のテキスト（brで改行）

💡 <br> の多用は避けましょう。段落の区切りは <p> タグで表現するのが正しい書き方です。

5-7. コメントアウトでメモを書く

 ではさまれた部分はブラウザに表示されません。コードに自分用のメモを書くときに使います。

HTMLコード

<h1>タイトル</h1>

<!-- ここはナビゲーションエリア -->
<nav>...</nav>

<!-- 一時的に非表示にしたい要素 -->
<!-- <p>この段落は一時的に消しています</p> -->

<p>本文テキスト</p>

6. classとidを理解しよう

class と id は開始タグの中に書く属性のひとつです。タグに「管理名（名前）」をつけるために使います。

書き方

<p class="intro-text">段落テキスト</p>
<h2 id="section-title">見出し</h2>

6-1. 何のために名前をつけるの？

CSSでデザインを指定するとき、「この名前のタグだけデザインを変える」という指定をするために使います。

6-2. classとidの違い

	class	id
同じ名前を複数のタグに使える？	✅ 何度でもOK	❌ 1ページに1回のみ
主な用途	繰り返し使うデザイン指定	ページ内リンクの目印、JS連携
書き方（CSS）	`.クラス名 { }`	`#id名 { }`

6-3. 名前のつけ方ルール

英数字で書く（日本語は使わない）
先頭は数字にしない（1title はNG）
ハイフン - やアンダースコア _ は使えます

正しい例

<p class="intro-text">OK</p>
<p class="main_content">OK</p>

<!-- 同じclass名を複数のタグに使ってよい -->
<h2 class="section-title">見出し1</h2>
<h2 class="section-title">見出し2</h2>

7. divタグ・spanタグを理解しよう

<div> と <span> はコードにまとまりを作るためのタグです。それ自体に意味はなく、classやidと組み合わせてCSSでデザインを当てるために使います。

7-1. divとspanの違い

	div	span
要素の種類	ブロック要素	インライン要素
前後に改行が入る？	✅ 入る	❌ 入らない
主な用途	ページのセクション分割、レイアウト	文章の一部だけデザインを変えたい時

7-2. divの使い方

divタグで複数の要素をひとまとめにして、そのまとまりにCSSを適用できます。

HTMLコード（divで2つのエリアに分割）

<div class="area-blue">
  <h2>エリア1の見出し</h2>
  <p>エリア1のテキスト</p>
</div>

<div class="area-orange">
  <h2>エリア2の見出し</h2>
  <p>エリア2のテキスト</p>
</div>

CSSコード（例）

.area-blue  { background-color: #e0f2fe; }
.area-orange { color: #f97316; }

7-3. spanの使い方

spanタグは文章の一部にだけデザインを適用したい時に使います。前後に改行が入らないので、文の途中に使えます。

HTMLコード

<p>この文章の中で<span class="highlight">ここだけ</span>を強調します。</p>

CSSコード（例）

.highlight {
  background-color: #fef08a;
  padding: 0 4px;
}

表示結果

この文章の中でここだけを強調します。

📝 まとめ

HTMLはウェブページの構造と内容を記述する言語
デザインやレイアウトを整えるのはCSSの役割
基本文法は開始タグと終了タグではさむこと
タグの中にタグを書く入れ子構造が使える
開始タグ内に属性で追加情報を指定できる
head にはページ情報を、body には表示コンテンツを書く
p＝段落、h1〜h6＝見出し、img＝画像、a＝リンク
ul/ol + li で箇条書き、br で改行
class・id でタグに名前をつけてCSSと連携
div（ブロック）と span（インライン）でまとまりを作る

次のステップ

HTMLの基本が身についたら、次は CSS でデザインを整えましょう。