HTMLの基本を学ぼう

Webページの構造を作るHTMLの書き方を、一緒に学びましょう！

🎯 この章の目標

  • HTMLの基本的な役割と構造を理解する
  • よく使うHTMLタグ（見出し・段落・リンク・画像など）を使えるようになる
  • <ul>・<ol>を使ってリストを表現できるようになる
  • <a>タグで外部サイトへのリンクを作れるようになる
  • <img>タグで画像を表示し、alt属性の意味も説明できるようになる
👩‍💻

Kinova編集部

目次

1. HTMLってなに？

HTML（エイチ・ティー・エム・エル）は Webページの構造 を作るための言語です。
たとえばブログやショッピングサイトでも、ページの中には「見出し」「文章」「画像」「リンク」などが並んでいますよね。 これらを「どこに」「どんなふうに」表示するかを決めているのがHTMLです。

HTMLは、CSS（見た目を整える）やJavaScript（動きをつける）と一緒に使われることが多いですが、まずはこの“土台”であるHTMLの考え方と使い方をしっかり学びましょう。

Webページを作る3つの要素

🔤 HTML ：ページの骨組みを作ります。

例：見出し・段落・画像・リンクなどの「中身」

👉 この章では、このHTMLについて詳しく学んでいきます！

🎨 CSS ：ページの見た目を整えます。

例：色・サイズ・レイアウト・文字のフォントなど

🤖 JavaScript ：ページに動きをつけます。

例：ボタンを押すと表示が変わる、フォームチェック、スライドショー

エディタの使い方

🔹 コードを書いて動かしたいとき

左側のタブで「HTML」「CSS」「JavaScript」を切り替えてコードを入力します。
「プレビューする」ボタンを押すと、入力したコードの実行結果が右側に表示されます。

🔹 結果を大きな画面で見たいとき

「🔎 大きな画面で表示する」ボタンを押すと、プレビューだけを別タブで表示できます。

🔹 エディタ全体を別タブで操作したいとき

「🪟 ポップアップ」ボタンを押すと、エディタ全体を別タブで開いて操作できます。

🔹 表示のレイアウトを変えたいとき

↕ ボタンを押すと、画面の縦並び・横並びを切り替えられます。

🔹 エディタやプレビューの高さを変えたいとき

右上のスライダーを動かすと、エディタとプレビューの高さを調整できます。

🔹 JavaScriptの動作を確認したいとき

下側の「Console Output」エリアに、JavaScriptの出力が表示されます。

2. HTMLの基本構造を作ってみよう！

HTMLのページを作るとき、まず理解しておきたいのが「タグ（要素）」の構造です。
タグはページ内のテキストや画像、ボックスなど、あらゆる要素を定義するために使います。

📘 タグの基本構造

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

このように、HTMLのタグは
<開始タグ>内容</終了タグ>
という形でペアになっています。
※ 一部のタグ（例：<img />など）は終了タグを持ちません。

HTMLファイルには決まった「はじまりのかたち」があります。これを「テンプレート」や「ひな型」と呼びます。
ページのタイトルを決める場所や、画面に表示される本体を入れる場所など、それぞれのタグに役割があります。
この基本構造はどんなWebページでもほとんど共通していて、大きく変わることはありません。
だからこそ、<body>の中に何を書くか、がとても大切になります。実際に画面に表示されるのはこの部分だからです。


📘 覚えておこう：HTMLの基本構造

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <!-- 表示したい内容 -->
  </body>
</html>
タグ 役割
<!DOCTYPE html> HTML5で書かれていることをブラウザに伝えます
<html> HTML文書の開始と終了を示します
<head> ページの設定や情報（表示されない部分）をまとめます
<meta> 文字化けを防ぐための設定です。charset="UTF-8" は、日本語を含む多言語を正しく表示するために使われます。
<title> ブラウザのタブに表示されるページのタイトルです
<body> ここに書いた内容が実際に画面に表示されます

▼ 実践してみよう！

HTML基本構造をコピー&ペーストして、の中に文字を入力してみましょう！


解答例と表示結果をひらく

3. テキストを表示する基本タグ

Webページでは、見出しや文章など「文字」を表示するのが基本です。
ここでは、文字を表示するためによく使うHTMLのタグを紹介します。


📘 要素ってなに？
HTMLでは、何かを表す最小のまとまりを「要素」と呼びます。
例えば次のように <p>〜</p> で囲まれた部分です。 
<p>こんにちは！</p>
🔠

<h1>〜<h6>（見出し）

ページのタイトルや章の名前を示すときに使います。
<h1>が最も大きく、<h6>が最も小さくなります。
閉じタグが必要です（例：<h1>見出し</h1>）。

📄

<p>（段落）

文章のまとまり（段落）を表します。
自己紹介や説明文などに使えます。
閉じタグが必要です（例：<p>こんにちは</p>）。

↩️

<br>（改行）

文章の途中で改行したいときに使います。
閉じタグは不要です。

💪

<strong>（強調：太字）

重要な語句を強調したいときに使います。
閉じタグが必要です（例：<strong>重要</strong>）。

✨

<em>（強調：斜体）

気持ちや注意を引きたい言葉を斜体で表現します。
閉じタグが必要です（例：<em>大切</em>）。

▼ 実践してみよう！

<h1>タグで「自己紹介」という見出しを作り、
<p>タグで2行の自己紹介を書いてみましょう。
2行目の文の途中には <br> を使って改行を入れてください。


解答例と表示結果をひらく

4. リストを作成しよう

リストは、複数の項目を箇条書きで並べるときに使います。
食べ物のメニューや持ち物チェックリストなど、見やすく整理したいときに便利です。

📋

<ul>（順序なしリスト）

丸ポチ（●）で表示されるリストです。
買い物リストやチェックリストなど、順番に意味がないときに使います。
閉じタグが必要です。

🔢

<ol>（順序ありリスト）

番号つきで表示されるリストです。
手順やランキングなど、順番に意味があるときに使います。
閉じタグが必要です。

📝

<li>（リスト項目）

リストの中の各項目に使います。
閉じタグが必要です（例：<li>りんご</li>）。

▼ 実践してみよう！

<ul> と <ol> の両方を使ってみましょう。
順序なしリストでは「好きな食べ物」を3つ、順序ありリストでは「朝の支度の手順」を3つ書いてください。
例えば下記のようなHTMLになります

<ul>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ul>
<ol>
  <li>項目</li>
  <li>項目</li>
  <li>項目</li>
</ol>

解答例と表示結果をひらく

6. 画像を表示しよう

Webページに写真やイラストを表示したいときは <img> タグを使います。
画像を見せることで、ページをよりわかりやすく、楽しくすることができます。


🖼️

<img>（画像）

画像を表示するためのタグです。
src属性で画像のURLを、alt属性で代替テキストを指定します。
このタグは閉じタグ不要です。
例：<img src="画像URL" alt="説明文" />

▼ 実践してみよう！

<img>タグを使って、画像を1つ表示してみましょう。
下記の画像URLを使ってください（富士山の写真）：
https://upload.wikimedia.org/wikipedia/commons/3/3e/MtFuji_FujiCity.jpg


解答例と表示結果をひらく

まとめ：HTMLの基本をふりかえろう

HTMLは、Webページの「骨組み」を作るための言語です。
今回は最も基本的な要素に絞って学びましたが、Web制作の現場ではこの基本がとても大切です。
いきなり応用に飛びつくのではなく、「正しく・丁寧に」タグを書くことが、あとからCSSやJavaScriptでスタイルや機能を加えるときに活きてきます。

今回学んだこと

  • ✓ HTMLの基本構造（ひな形）を理解した
  • ✓ 見出しや段落、リスト、リンク、画像などの基本タグを使えるようになった
  • ✓ クラスとIDを使って、要素ごとに役割を持たせられるようになった
  • ✓ 「要素」といったHTMLの考え方に触れた

実際のWebサイトでは、これらの要素にデザインやレイアウトが加わって、より魅力的なページになります。
次のステップでは、 CSS を使って「見た目」を整えていきましょう！