3 / 10
レッスン 3
30分テキスト・リスト・リンク・画像
📝 最後に理解度チェック（3問）がありますテキスト・リスト・リンク・画像
HTMLの基本構造を覚えたら、次は実際にコンテンツを作る上で最もよく使う4種類のタグを深く学びます。**テキスト（p/h）・リスト（ul/ol）・リンク（a）・画像（img）**は、どんなWebページにも必ず登場します。このレッスンでは各タグの基本的な使い方に加え、相対パスと絶対パスの違い、target属性のセキュリティ対策、alt属性の正しい書き方まで、実務で必要な知識を網羅します。
テキストタグ（p・h・strong・em）
Webページのテキストコンテンツは複数のタグで意味づけして記述します。
テキスト・リスト・リンク・画像タグの使い方とパス指定
p要素（段落）
<p>タグは**段落（Paragraph）**を表します。まとまった意味を持つテキストはすべてpタグで囲むのが基本です。
<p>HTMLはWebページの構造を定義するマークアップ言語です。</p>
<p>CSSはHTMLに見た目を適用するスタイルシートです。</p>
pタグはブロックレベル要素なので、前後に改行が入ります。改行のためだけに<br>を連続して使うのは避け、段落ごとにpタグを使い分けましょう。
h1〜h6要素（見出し）
<h1>から<h6>までの見出しタグはページの階層構造を表します。
<h1>Web制作入門ガイド</h1>
<h2>第1章：HTMLの基礎</h2>
<h3>1-1. DOCTYPE宣言について</h3>
| 見出しレベル | 用途 | 注意点 |
|---|---|---|
| h1 | ページの主タイトル | 1ページに1個が原則。SEOの最重要要素 |
| h2 | 主要セクションの見出し | 章タイトルのような使い方 |
| h3 | h2の下位セクション | 節・項目の見出し |
| h4〜h6 | さらに細かい階層 | 使用頻度は少ない |
⚠️ 見出しを装飾目的で使わない: h2を「大きく太字にしたいから」という理由で使うのは誤りです。見出しは意味的な階層を表すためのもので、見た目の調整はCSSで行います。また、h1の次にh3を使うなど順番を飛ばすのもSEO・アクセシビリティ上避けるべきです。
strong・em要素（強調）
<p>この設定は<strong>必ず有効にしてください</strong>。無効のままだとエラーが発生します。</p>
<p>この機能は<em>試験的</em>なため、本番環境での使用は推奨されません。</p>
- ◆
<strong>— 重要性の強調。スクリーンリーダーが強調して読む。太字表示 - ◆
<em>— 意味的な強調（声のトーンが上がるようなイメージ）。斜体表示 - ◆
<b>— 見た目だけの太字。意味的な重みはない - ◆
<i>— 見た目だけの斜体。意味的な重みはない
リストタグ（ul・ol・dl）
ul要素（順序なしリスト）
<ul>（Unordered List）は箇条書きリストを作ります。項目の順序に意味がない場合に使います。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
デフォルトでは各liの先頭に「・」が表示されます。ナビゲーションメニューもulとliで作るのが標準的です。
ol要素（順序ありリスト）
<ol>（Ordered List）は番号付きリストを作ります。手順・ランキング・優先順位など順番に意味がある場合に使います。
<ol>
<li>VSCodeをインストールする</li>
<li>拡張機能を追加する</li>
<li>index.htmlを作成する</li>
</ol>
dl・dt・dd要素（定義リスト）
定義リストは用語とその説明をペアで表現します。用語集・FAQ・仕様表などに適しています。
<dl>
<dt>HTML</dt>
<dd>Webページの構造を定義するマークアップ言語</dd>
<dt>CSS</dt>
<dd>HTMLに見た目とデザインを適用するスタイルシート言語</dd>
</dl>
💡 ul/olのネスト: リストの中にリストを入れることができます。ナビゲーションのサブメニューなど、階層構造を表現するときに使います。liの中にul/olを入れる形で記述します。
リンクタグ（a要素）
<a>（Anchor）タグはハイパーリンクを作成します。Webの根幹をなすタグで、ページ間の移動・外部サイトへの誘導・ページ内ジャンプに使います。
基本的な書き方
<!-- 同じサイト内のページへ -->
<a href="/about">会社概要</a>
<!-- 外部サイトへ（新しいタブで開く） -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部リンク</a>
<!-- ページ内アンカーリンク -->
<a href="#contact">お問い合わせに移動</a>
<!-- メールリンク -->
<a href="mailto:info@example.com">メールを送る</a>
<!-- 電話リンク（スマートフォンで発信） -->
<a href="tel:0120000000">電話する</a>
target属性
| target値 | 動作 |
|---|---|
| （省略） | 同じタブ・ウィンドウで開く（デフォルト） |
_blank | 新しいタブ・ウィンドウで開く |
_self | 同じフレームで開く（デフォルトと同じ） |
_parent | 親フレームで開く |
_top | 最上位のフレームで開く |
⚠️ target="_blank"には必ずrel="noopener"を追加:
target="_blank"だけだと、リンク先ページからJavaScriptで元のページを操作される「タブナビング攻撃」という脆弱性があります。rel="noopener noreferrer"を追加することで防げます。
ページ内アンカーリンク
同じページ内の特定の場所にジャンプするには、飛び先の要素にid属性を付け、aのhrefに「#id名」を指定します。
<!-- リンク -->
<a href="#section2">セクション2へ</a>
<!-- 飛び先 -->
<section id="section2">
<h2>セクション2</h2>
...
</section>
画像タグ（img要素）
<img>タグは画像を表示する**自己終了タグ（空要素）**です。src属性で画像のパスを、alt属性で代替テキストを指定します。
基本的な書き方
<img src="./images/photo.jpg" alt="山の上から見た夕日の写真" width="800" height="600">
alt属性の重要性
alt属性は画像が表示できない場合の代替テキストを指定します。以下の3つの場面で重要な役割を持ちます。
- ◆アクセシビリティ: 視覚障害のある方が使うスクリーンリーダーが画像の内容を読み上げる
- ◆SEO: Googleのクローラーが画像の内容を理解するために使用する
- ◆読み込み失敗時: 画像が表示されない場合に代わりにテキストが表示される
| 状況 | alt属性の書き方 |
|---|---|
| 内容のある画像 | 画像の内容を具体的に説明（「青い空の下に広がる富士山」など） |
| リンク画像（ボタン） | リンク先・操作内容を書く（「ホームページへ戻る」など） |
| 装飾目的の画像 | 空にする（alt=""）。空にするとスクリーンリーダーがスキップする |
width・height属性
<img src="./images/photo.jpg" alt="写真" width="800" height="600">
width・height属性を指定することで、ブラウザが画像読み込み前にスペースを確保します。これによりページ読み込み時のレイアウトシフト（CLS）が減り、Core Web Vitalsのスコアが改善します。
パス指定の種類
src属性やhref属性には「ファイルの場所」をパスで指定します。パスの指定方法は3種類あります。
相対パス
現在のHTMLファイルの場所を基準としてパスを記述します。
<!-- 現在のフォルダ内のimagesフォルダの画像 -->
<img src="./images/photo.jpg" alt="写真">
<!-- 1つ上のフォルダのcssフォルダのファイル -->
<link rel="stylesheet" href="../css/style.css">
<!-- 同じフォルダ内のファイル -->
<img src="photo.jpg" alt="写真">
| 記号 | 意味 |
|---|---|
./ | 現在のディレクトリ |
../ | 1つ上のディレクトリ |
../../ | 2つ上のディレクトリ |
絶対パス（サイト内）
サイトのルートディレクトリ（最上位フォルダ）を「/」として記述します。ファイルの場所が変わってもパスが変わらないメリットがあります。
<img src="/images/photo.jpg" alt="写真">
<link rel="stylesheet" href="/css/style.css">
外部URL（絶対パス）
他のサーバーにあるファイルはフルURLで指定します。
<img src="https://cdn.example.com/images/photo.jpg" alt="写真">
💡 相対パスか絶対パスかの選択: 同じプロジェクト内のファイルには相対パスまたはサイト内絶対パスを使います。外部サービス（CDN・外部画像）はフルURLを使います。ローカル開発環境では相対パスが安全です。
実践：シンプルなWebページを作る
これまでのタグを組み合わせてシンプルなページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自己紹介ページ</title>
</head>
<body>
<header>
<h1>田中太郎のプロフィール</h1>
<nav>
<ul>
<li><a href="#about">自己紹介</a></li>
<li><a href="#skills">スキル</a></li>
<li><a href="#contact">連絡先</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>自己紹介</h2>
<img src="./images/profile.jpg" alt="田中太郎のプロフィール写真" width="200" height="200">
<p>はじめまして。<strong>田中太郎</strong>といいます。</p>
<p>Webデザインとコーディングを学んでいます。</p>
</section>
<section id="skills">
<h2>習得中のスキル</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript（学習中）</li>
</ul>
</section>
</main>
<footer id="contact">
<p>お問い合わせ：<a href="mailto:taro@example.com">taro@example.com</a></p>
</footer>
</body>
</html>
⚠️ 画像ファイルが見つからないとき: imagesフォルダとphoto.jpgが実際に存在しないとimgタグは表示されません。DevToolsのNetworkパネルで404エラーが出ていないか確認しましょう。パスのスペルミスが最も多い原因です。
🏋️実践ワーク
以下のワークを実施してください。
- ◆リストの使い分け: ulとolの両方を使ったHTMLを書く。「好きな食べ物リスト」はul、「朝の準備手順」はolで作り、LiveServerで表示を確認する。
- ◆リンクの種類を試す: 同じページ内にh2タグで3つのセクションを作り（#section1〜#section3）、ページ上部にページ内アンカーリンクのナビゲーションを作る。外部リンクにtarget="_blank"とrel="noopener noreferrer"を追加することも忘れずに行う。
- ◆画像を表示する: PC内の任意の画像ファイルをHTMLファイルと同じフォルダの「images」フォルダに入れ、相対パスを使って画像を表示する。alt属性に画像の内容を説明するテキストを記述する。
- ◆alt属性の確認: 作ったページをChromeで開き、DevToolsのElementsパネルでimgタグを選択する。alt属性の値を確認し、その後にimgタグのsrc属性を存在しないパスに変更して、alt属性のテキストが表示されることを確認する。
📝まとめ
テキストはp・h1〜h6・strong・emで意味を持って記述します。リストはul（箇条書き）・ol（番号付き）・dl（定義リスト）を用途に応じて使い分けます。リンクはaタグのhref属性でURLを指定し、外部リンクにはtarget="_blank"とrel="noopener noreferrer"を必ず追加します。画像はimgタグのsrcにパスを、alt属性に代替テキストを記述します。パス指定は相対パス・サイト内絶対パス・外部URLの3種類を覚えておきましょう。次のレッスンではCSSを使って実際にスタイルを当てていきます。
理解度チェック
3問全問正解でこのレッスンが「完了」になり、コースの全レッスンを完了すると修了証が発行されます。解説つき・何度でも挑戦できます。
Q1.見出し横の飾り罫線など、装飾目的の画像のalt属性はどう書くのが適切ですか。
Q2.外部サイトへのリンクをtarget="_blank"で新しいタブに開きます。あわせて追加すべき属性はどれですか。
Q3.index.htmlと同じ階層にあるimagesフォルダ内のphoto.jpgを、相対パスで指定する書き方はどれですか。
すべての問題に答えると押せます
「HTML/CSSコーディング入門」全10レッスンを無料で修了しよう
- ✓ 理解度チェックの採点と、合格レッスンの記録
- ✓ 全レッスン合格で修了証を発行（URLでシェア・LinkedInに追加できます）
- ✓ 全レッスンの解説動画と、続きから再開できる学習ダッシュボード
無料で受講をはじめる（1分）
完全無料・クレジットカード不要
関連するブログ記事
関連レッスン（他のコースから）
AI画像生成マスター - Midjourney & Stable Diffusion
ControlNetとimg2imgで画像を自在に操る
Stable Diffusionの進化を一段階引き上げたのがControlNetとimg2imgの二大機能です。
25分本文は無料で閲覧可
実践Webデザイン - Figma完全マスター講座
Figmaの基本操作 - フレーム・シェイプ・テキスト
Figmaを開いた瞬間、無限に広がる白いキャンバスと見慣れないパネル群に戸惑う人は多いです。
30分無料公開
SEO完全ガイド
内部リンク戦略とサイト構造
内部リンクはSEOの中で最も見落とされがちでありながら、最もコントロールしやすい要素の一つです。
30分本文は無料で閲覧可
WordPress HP制作完全講座
GA4・Search Console導入
WordPressでホームページを公開しても、「どんな人が何人来ているか」「どのページが読まれているか」「どこから来たか」がわからなければ改
30分本文は無料で閲覧可
WordPress HP制作完全講座
ホームページの役割と企画
ホームページ（HP）を作る前に最も重要なのが「なぜ作るのか」という目的の明確化です。
30分無料公開
WordPress HP制作完全講座
サーバー・ドメインの選び方
WordPressでHPを公開するには、サーバー（サイトのデータを保存・配信する場所） と ドメイン（サイトのアドレス） の2つが必要です。
30分無料公開
レッスン一覧
各レッスンの理解度チェックに合格すると ✓ がつきます