Skip to content
Dev Guides
Playground

1.HTML

学習目標

  • HTML ファイルを作成し、ブラウザーで表示できる
  • HTML の基本構造（html / head / body）の役割を理解している
  • 見出し・段落・リスト・リンク・画像のタグを使って、ページの内容を組み立てられる
  • main / footer などのセマンティックタグでページを構造化できる

1. はじめての HTML

Section titled “1. はじめての HTML”

ブラウザーで見ているウェブサイトは、裏側ではコードで書かれています。今開いているページ上で右クリックして「ページのソースを表示」を選ぶと、大量のコードが表示されます。

これが HTML（HyperText Markup Language）です。ウェブページの内容と構造を記述するための言語です。このドキュメントでは、HTML を自分で書いてブラウザーに表示するところから始めます。

  1. フォルダーの作成

    ターミナルで以下のコマンドを順に実行してください。

    Terminal window
    mkdir html-practice
    cd html-practice
    code .

    mkdir html-practice は html-practice という名前のフォルダーを作るコマンド、cd html-practice はそのフォルダーの中に移動するコマンド、code . は今いるフォルダーを VS Code で開くコマンドです。

  2. HTML ファイルの作成

    VS Code の左側にあるファイル一覧で右クリックし、「新しいファイル」から index.html を作成してください。.html は HTML のファイルであることを示す拡張子です。

    ファイルを開いて以下の1行を記述し、保存（Ctrl + S）してください。

    index.html
    こんにちは

  3. ブラウザーで開く

    保存した index.html をエクスプローラーからダブルクリックして開いてください。ブラウザーが起動し、画面に「こんにちは」と表示されます。

  4. 内容の変更と再読み込み

    index.html を以下のように書き換えて保存してください。

    index.html
    はじめての HTML です

    ブラウザーに戻ってページを再読み込み（Ctrl + R または F5）すると、表示が「はじめての HTML です」に変わります。

2. HTML の構造

Section titled “2. HTML の構造”

「こんにちは」と書いただけで表示できました。しかし、ブラウザーのタブを見ると、ページタイトルがファイル名のまま表示されています。また、環境によっては日本語が文字化けする可能性もあります。

こうした設定を書く場所が必要です。HTML には、ページ全体の構造を示すための テンプレート が用意されています。

2-1. 最小のテンプレート

Section titled “2-1. 最小のテンプレート”

index.html を以下の内容に書き換えてください。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめての HTML</title>
</head>
<body>
  <p>こんにちは</p>
</body>
</html>

ブラウザーで再読み込みすると、画面の表示自体はほぼ変わりません。しかし、タブに「はじめての HTML」というタイトルが表示されるようになりました。これから HTML を書くときは、常にこのテンプレートから始めます。

2-2. 各部分の役割

Section titled “2-2. 各部分の役割”
  • <!DOCTYPE html>: 「このファイルは HTML で書かれています」とブラウザーに伝える宣言です。すべての HTML ファイルの1行目に書きます。
  • <html lang="ja">: HTML の内容全体を囲むタグです。lang="ja" は「このページの言語は日本語」という意味です。
  • <head>: ページの設定情報を書く場所です。ここに書いた内容は画面には表示されません。文字コードやページタイトルなど、ブラウザーに対する指示を置きます。
  • <meta charset="UTF-8">: 文字コードの指定です。これがないと日本語が文字化けする場合があります。
  • <title>: ブラウザーのタブに表示されるページタイトルです。「はじめての HTML」を別の文字に変えて再読み込みすると、タブの表示が変わることを確認できます。
  • <body>: 画面に表示する内容を書く場所です。HTML を書くときに実際に手を動かすのは、ほとんどこの <body> の中です。

2-3. タグの基本的な書き方

Section titled “2-3. タグの基本的な書き方”

HTML では タグ を使って内容に意味をつけます。<p>こんにちは</p> を例に確認します。

<p>こんにちは</p>

<p> が 開始タグ、</p> が 終了タグ です。終了タグには / がつきます。この2つで「こんにちは」というテキストを挟み、<p>（「paragraph（段落）」の略）は、この範囲が1つの段落であることをブラウザーに伝えています。

HTML はこのように「タグで囲んで意味をつける」のが基本です。囲むタグの種類によって、見出し・リンク・リストなど、要素の種類が決まります。

2-4. インデント

Section titled “2-4. インデント”

HTML ではタグのネスト構造を見やすくするために インデント（字下げ）をつけます。

<body>
  <p>こんにちは</p>
</body>

<body> の中にある <p> は、スペース2つ分のインデントで字下げされています。これにより「<p> は <body> の中にある」という関係が視覚的に分かります。

インデントがなくても動作しますが、コードが読みにくくなります。

<!-- インデントなし: どこからどこまでが body の中なのか分かりにくい -->
<body>
<p>こんにちは</p>
<p>さようなら</p>
</body>


<!-- インデントあり: 構造が一目で分かる -->
<body>
  <p>こんにちは</p>
  <p>さようなら</p>
</body>

2-5. コメント

Section titled “2-5. コメント”

<!-- ... --> で囲んだ部分は コメント として扱われ、ブラウザーには表示されません。

<!-- ここはコメント。画面には出ない -->
<p>こんにちは</p>

メモの記述や、タグの一時的な無効化に使います。直前のコード例にある <!-- インデントなし: ... --> も同じ書き方です。

3. 自己紹介ページ

Section titled “3. 自己紹介ページ”

自己紹介ページには、見出し・段落・リスト・リンク・画像など、よく使う HTML タグが揃っています。以降のコード例は <body> の中に書きます。テンプレートの <head> などは省略しています。

3-1. 見出しと段落

Section titled “3-1. 見出しと段落”

見出し は <h1> から <h6> までの6段階があり、<h1> が最も大きく、数字が増えるほど小さくなります。段落 は <p> です。

<h1>自己紹介</h1>
<h2>基本情報</h2>
<p>田中太郎です。東京都在住です。</p>


<h2>趣味</h2>
<p>読書と映画鑑賞が好きです。</p>

ブラウザーで表示すると、見出しは太字で大きく、段落は通常の文字サイズで表示されます。これはブラウザーが「<h1> は最も重要な見出しだから大きく表示する」「<p> は本文だから通常サイズで表示する」と判断しているためです。

<h1> はページ全体のタイトル、<h2> はセクションの見出しとして使うのが一般的です。

3-2. リスト

Section titled “3-2. リスト”

趣味を1文で書くのではなく、箇条書きにしたほうが見やすい場合があります。項目を並べるときに使うのが リスト です。

順序なしリスト（<ul> + <li>）は、順番に意味がない場合に使います。

<h2>趣味</h2>
<ul>
  <li>読書</li>
  <li>映画鑑賞</li>
  <li>ランニング</li>
</ul>

<ul> は「unordered list（順序なしリスト）」、<li> は「list item（リストの項目）」の略です。ブラウザーでは各項目の先頭に「・」が表示されます。

順序ありリスト（<ol> + <li>）は、手順やランキングなど順番に意味がある場合に使います。

<h2>好きな映画ベスト3</h2>
<ol>
  <li>千と千尋の神隠し</li>
  <li>ショーシャンクの空に</li>
  <li>インセプション</li>
</ol>

<ol> は「ordered list（順序ありリスト）」の略です。各項目の先頭に「1. 2. 3. …」と番号が自動的に振られます。

3-3. リンク

Section titled “3-3. リンク”

自己紹介ページに自分の GitHub や SNS へのリンクを載せるには、<a> タグを使います。

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

href は「このリンクをクリックしたらどこに飛ぶか」を指定する 属性 です。<a> と </a> で囲んだテキストが、画面上でクリックできるリンクとして表示されます。

属性はタグの中に 属性名="値" の形で書きます。HTML ではこのように、タグに追加情報を与えるために属性を使う場面がよく出てきます。

3-4. 画像

Section titled “3-4. 画像”

プロフィール写真やアイコンを表示するには <img> タグを使います。

<img src="photo.jpg" alt="プロフィール写真">

src は画像ファイルの場所（パス）を指定する属性、alt は画像が表示できない場合に代わりに表示されるテキストです。パスの書き方は パスとフォルダー構成 で扱います。

画像を試すには、好きな画像ファイルを html-practice フォルダーに入れて、そのファイル名を src に指定してください。

<!-- profile.png というファイルが同じフォルダーにある場合 -->
<img src="profile.png" alt="プロフィール写真">

3-5. タグのネスト

Section titled “3-5. タグのネスト”

タグの中に別のタグを入れることを ネスト（入れ子）と呼びます。これまでの例でも既に使っています。

<ul>
  <li>読書</li>
  <li>映画鑑賞</li>
</ul>

この例では <ul> の中に <li> が入っています。リストの項目（<li>）はリスト（<ul>）の中にしか置けないので、必ずネストになります。

リンクを含むリストも作れます。自己紹介ページの「リンク」セクションで使う形です。

<ul>
  <li><a href="https://example.com">サンプルサイト</a></li>
  <li><a href="https://github.com">GitHub</a></li>
</ul>

ネストは何段階にもできますが、開始タグと終了タグの対応関係を崩さないようにします。

<!-- 正しい: タグが正しくネストされている -->
<p><a href="https://example.com">リンク</a></p>


<!-- 間違い: タグが交差している -->
<p><a href="https://example.com">リンク</p></a>

間違いの例では、<a> の終了タグ </a> が </p> の後に来ています。開いた順番の逆で閉じる必要があります。

4. ページの構造化

Section titled “4. ページの構造化”

見出し・段落・リスト・リンク・画像でページの中身は書けますが、内容が増えるとページ全体の整理が必要になります。

4-1. <div> でのグループ化

Section titled “4-1. <div> でのグループ化”

ページの内容が増えてくると、「ここからここまでが1つのまとまり」を明示したくなります。<div> はそのためのタグです。

<div>
  <h2>基本情報</h2>
  <p>田中太郎です。東京都在住です。</p>
</div>


<div>
  <h2>趣味</h2>
  <ul>
    <li>読書</li>
    <li>映画鑑賞</li>
  </ul>
</div>

ブラウザーで表示しても、<div> がない場合とほとんど変わりません。<div> 自体は見た目に何も影響しないからです。グループ化しておくと、CSS で「この <div> 全体に背景色をつける」「この <div> を横並びにする」のようにグループ単位でスタイルを指定できます。

4-2. セマンティックタグ

Section titled “4-2. セマンティックタグ”

HTML には、<div> よりも意味が明確なタグが用意されています。

<body>
  <main>
    <h1>田中太郎</h1>
    <p>東京都在住のエンジニアです。</p>


    <h2>自己紹介</h2>
    <p>Web 開発に興味があります。</p>
  </main>


  <footer>
    <p>&copy; 2025 田中太郎</p>
  </footer>
</body>

<main> はページの主要な内容、<footer> はページの下部（著作権表示や連絡先）を表します。<div> の代わりにこれらを使うと、コードを読んだだけで「ここが本文で、ここがフッターだ」と分かります。こうした意味を持つタグを セマンティック（意味的な）タグ と呼びます。

セマンティックタグには他にも <header>（サイト上部のロゴやナビゲーションを置く領域）、<section>（章立てされたまとまり）、<article>（記事のような独立した内容）などがあります。シンプルな1ページのサイトでは <main> と <footer> だけで十分で、<header> を省略することも多くあります。

4-3. 自己紹介ページの全体像

Section titled “4-3. 自己紹介ページの全体像”

これまで紹介したタグを組み合わせると、自己紹介ページは以下のような構造になります。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>田中太郎 | 自己紹介</title>
</head>
<body>
  <main>
    <h1>田中太郎</h1>
    <p>エンジニア / 東京都在住</p>


    <h2>自己紹介</h2>
    <p>Web 開発に興味があります。最近は JavaScript を勉強中です。</p>


    <h2>趣味</h2>
    <ul>
      <li>読書</li>
      <li>映画鑑賞</li>
      <li>ランニング</li>
    </ul>


    <h2>リンク</h2>
    <ul>
      <li><a href="https://github.com">GitHub</a></li>
    </ul>
  </main>


  <footer>
    <p>&copy; 2025 田中太郎</p>
  </footer>
</body>
</html>

このコードをすべて index.html に貼り付けて、ブラウザーで確認してください。まだ装飾のないシンプルな見た目ですが、HTML の構造としてはこれで完成です。CSS を使えば、この構造をそのままに見た目を自由に変えられます。

5. 演習

Section titled “5. 演習”

(演習ファイル準備中)