LTech

レッスン2: HTMLの基本タグ（見出し・段落・リンク・画像・強調）を学ぼう

よく使うHTMLの基本タグの使い方を学び、Webページに文字・リンク・画像・強調を表示できるようになります。

🎯 学習目標

  • よく使うHTMLの基本タグ（<h1>〜<h6>, <p>, <a>, <img>, <strong>）の使い方を学ぶ
  • Webページに文字・リンク・画像を表示できるようになる

📝 目次

  1. 見出しタグ (<h1>〜<h6>)
  2. 段落タグ (<p>)
  3. リンクタグ (<a>)
  4. 画像タグ (<img>)
  5. 強調タグ (<strong>)
  6. 今日のまとめ
  7. 演習：自己紹介ページを作ろう
  8. 理解度チェック

📚 レッスン

1. 見出しタグ <h1>〜<h6>

見出しとは、文章のタイトルや章のタイトルを表すものです。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
  • <h1>が最も大きく、<h6>が最も小さい
  • ページの構造を表すために使い分ける（例: 記事のタイトルに<h1>、その中の節に<h2>など）

2. 段落タグ <p>

文章や説明文など、まとまった文章を表示するのが段落（paragraph）タグです。

<p>HTMLは、Webページの構造を作るための言語です。</p>
<p>見出しや画像など、様々な要素をタグで表現します。</p>

別のページに移動したり、外部サイトに飛ぶときに使うのがリンクタグです。

<a href="https://www.example.com">Exampleサイトへ</a>
  • href属性にリンク先URLを指定
  • <a>タグで囲った文字がクリックできるようになる

リンクタグの主な属性

属性 説明
href リンク先のURL（必須）
target リンクの開き方を指定（例：_blankで新しいタブで開く）
title マウスホバー時に表示されるツールチップ

リンクタグの活用例

1. 新しいタブでリンクを開く
<a href="https://www.example.com" target="_blank">新しいタブで開く</a>

target="_blank"を使うと、クリック時に現在のページを離れずに新しいタブでリンク先を開けます。

2. ページ内リンク（アンカーリンク）
<!-- ページ内の特定の場所にidを設定 -->
<h2 id="section1">セクション1</h2>

<!-- そのidへのリンク -->
<a href="#section1">セクション1へジャンプ</a>

ページ内の特定の場所にジャンプするには、リンク先となる要素にid属性を設定し、href属性に#id名を指定します。長いページで目次からジャンプする際によく使われます。

3. メールリンク
<a href="mailto:info@example.com">メールを送る</a>

mailto:を使うと、リンクをクリックした際にメールソフトが起動し、指定したアドレス宛の新規メールが作成されます。

4. 画像タグ <img>

Webページに画像を表示するには<img>タグを使います。

<img src="画像のパス.jpg" alt="画像の説明テキスト">

画像タグの主な属性

属性 説明
src 画像ファイルのURLまたはパス（必須）
alt 画像が表示できない時の代替テキスト（必須）
width 画像の横幅を数値で指定
height 画像の縦幅を数値で指定

※ <img>は閉じタグがない単独のタグです！

5. 強調タグ <strong>

テキストを強調して表示するには<strong>タグを使います。

<p>これは<strong>とても重要な</strong>ポイントです。</p>

<strong>タグで囲まれたテキストは通常、太字で表示され、重要度を示します。スクリーンリーダーでも強調して読み上げられます。

今日のまとめ

  • <h1>〜<h6>で見出しをつける
  • <p>で文章のまとまりを作る
  • <a href="...">でリンクを作れる
  • <img src="..." alt="...">で画像を表示できる
  • <strong>で重要なテキストを強調する

📚 リファレンス

このレッスンで学んだHTMLタグの詳細については、リファレンスページで確認できます。

✍️ 演習問題

ここでは学んだ内容を実際に使って、簡単な演習問題に挑戦してみましょう。エディタを使って実際にコードを書いてみてください。

右側のエディタにコードを入力して「実行」ボタンをクリックすると、結果をプレビューで確認できます。

1. 自己紹介ページを作ろう！

インラインエディタに自分の情報を入力してみましょう。

以下の要素を含めてください：

  1. h1タグを使用したページタイトル（例：「私の自己紹介」）
  2. h2タグを使用したセクション見出し（例：「趣味」「好きな場所」など）
  3. 複数の段落（自己紹介文）
  4. 強調テキスト（strongを使用）
  5. リンクタグ（お気に入りのサイトへのリンク）
  6. 画像タグ（プロフィール画像の表示）

参考例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自己紹介</title>
</head>
<body>
  <h1>私の自己紹介</h1>
  <p>こんにちは。私はWebの勉強を始めたばかりです。</p>
  
  <h2>趣味</h2>
  <p>映画鑑賞、旅行、<strong>プログラミング</strong>が趣味です。</p>
  
  <h2>お気に入りのサイト</h2>
  <p>私のお気に入りのプログラミング学習サイトは<a href="https://learning-tech.jp">LTech</a>です。</p>
  
  <h2>私の愛犬</h2>
  <img src="https://images.dog.ceo/breeds/terrier-russell/jack2.jpg" alt="私の愛犬" width="200" height="200">
</body>
</html>

右側のエディタで試してみましょう。結果がリアルタイムで表示されます。

✅ 理解度チェック

クイズに正解すると、このレッスンは「完了済み」として記録されます。

1. HTMLでは、見出しタグは何段階ありますか？

2. リンクを作成するためのタグは？

3. 画像を表示するために必要な属性は？

📘 次回予告

HTMLのHTMLで文章を整える！リスト・区切り・改行タグを学ぼうを学び、より整理された読みやすいページを作成できるようになります！

« レッスン1へ戻る レッスン3へ進む »

インラインエディタ