7-02 リンクとファイル構造

2025年8月6日

📚 今日学ぶこと

[　 ] リンク（<a>タグ）の基本を理解する
[　 ] ファイル間のリンクを作成する
[ 　] Webサイトのファイル構造を学ぶ
[ 　] ナビゲーションを作成する
[ 　] 相対パスと絶対パスを理解する

🔗 1. リンクとは？

Webの本質：ハイパーテキスト

Webページの最大の特徴は、他のページに「跳ぶ」ことができることです。

リンクの役割

📄 ページ間の移動：別のHTMLファイルへの移動
🌐 外部サイトへのアクセス：他のWebサイトへの移動
⚓ 同じページ内の移動：長いページ内の特定箇所へジャンプ

リンクの仕組み

ユーザーがクリック → ブラウザがリンク先を取得 → 新しいページを表示

`<a>`タグ（アンカータグ）

リンクを作るには <a>タグ を使用します。

<a href="リンク先のURL">表示される文字</a>

📝 覚え方：

a = anchor（アンカー、錨）
href = hypertext reference（ハイパーテキスト参照）

🌐 2. リンクの基本的な使い方

外部サイトへのリンク

以下のコードを新しいファイル「link.html」として保存してください：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>リンクの練習</title>
</head>
<body>
    <h1>リンクの練習</h1>
    
    <p><a href="https://www.google.com">Googleで検索</a></p>
    <p><a href="https://www.youtube.com">YouTubeを見る</a></p>
    <p><a href="https://www.wikipedia.org">Wikipediaで調べる</a></p>
</body>
</html>

📁 ファイル名： 「link.html」として保存
💡 理由： リンクの練習用ファイルであることを明確にするため

リンクの属性

新しいタブで開く

<a href="https://www.google.com" target="_blank">Googleで検索（新しいタブ）</a>

リンクにタイトルを追加

<a href="https://www.google.com" title="検索エンジンGoogle">Google</a>

💡 ポイント： title属性はマウスを乗せると表示されるツールチップです

📁 3. ファイル構造とパス

Webサイトの基本構造

web_lesson/
├── index.html     (トップページ)
├── lesson1.html   (音楽とICT)
├── lesson2.html   (個人テーマ)
└── style.css      (将来追加予定)

パスとは？

パス（Path）= ファイルの住所

絶対パス

ファイルの完全な住所

<!-- 絶対パス：完全なURL -->
<a href="https://example.com/lesson1.html">レッスン1</a>

<!-- 絶対パス：フルパス -->
<a href="C:/Users/username/Desktop/web_lesson/lesson1.html">レッスン1</a>

相対パス

現在のファイルから見た相対的な住所

<!-- 相対パス：同じフォルダ内 -->
<a href="lesson1.html">レッスン1</a>
<a href="lesson2.html">レッスン2</a>

<!-- 相対パス：一つ上のフォルダ -->
<a href="../index.html">トップページ</a>

<!-- 相対パス：下のフォルダ -->
<a href="images/photo.jpg">写真</a>

💡 重要： Web制作では相対パスを使うのが一般的

💻 4. 実習：ファイル間リンクの作成

STEP 1: index.htmlの作成

新しいファイルを作成し、「index.html」として保存してください：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のWebサイト</title>
</head>
<body>
    <h1>私のWebサイトへようこそ</h1>
    
    <h2>サイトマップ</h2>
    <p>このサイトでは、以下のページをご覧いただけます：</p>
    
    <ul>
        <li><a href="lesson1.html">音楽とICTについて</a></li>
    </ul>
    
    <h2>外部リンク</h2>
    <p>参考になるサイト：</p>
    <ul>
        <li><a href="https://www.google.com" target="_blank">Google</a></li>
        <li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
    </ul>
</body>
</html>

📝 練習： 後でlesson2.htmlへのリンクも追加してみましょう！

STEP 2: 追加練習

index.htmlにlesson2.htmlへのリンクを追加してください：

<ul>
    <li><a href="lesson1.html">音楽とICTについて</a></li>
    <li><a href="lesson2.html">私の興味のある分野</a></li>
</ul>

保存してブラウザで確認し、両方のリンクが動作することを確認してください。

STEP 3: 動作確認

index.htmlをブラウザで開く
両方のリンクをクリックしてページが移動することを確認

🎉 成功！ 複数ページで構成されるWebサイトが完成しました！

🖼️ 5. 画像の表示（`<img>`タグ）

`<img>`タグの基本

画像を表示するには <img>タグ を使用します。

<img src="画像ファイルのパス" alt="画像の説明">

📝 覚え方：

img = image（画像）
src = source（ソース、元）
alt = alternative（代替テキスト）

HTMLで表示できる画像形式

HTMLで表示できる主な画像形式：

形式	拡張子	特徴	用途
JPEG	.jpg, .jpeg	写真に適している	風景、人物写真
PNG	.png	透明度をサポート	ロゴ、アイコン
GIF	.gif	アニメーション可能	簡単な動画、イラスト
WebP	.webp	高圧縮率	最新の画像形式

💡 ポイント： どの形式でも<img>タグで表示できます

画像表示の実習

STEP 1: 画像ファイルの準備

web_lessonフォルダ内に「images」フォルダを作成
練習用画像を「images」フォルダに保存：
- computer.gif – コンピュータの仕組み図
- animals.jpg – かわいい子犬と子猫
- guitar.gif – ギターのイラスト
- galaxy.jpg – 美しい銀河の画像

練習用画像↓

STEP 2: 画像表示のHTML

以下のコードを新しいファイル「images.html」として保存してください：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>画像の練習</title>
</head>
<body>
    <h1>画像表示の練習</h1>
    
    <h2>コンピュータの仕組み</h2>
    <img src="images/computer.gif" alt="コンピュータの内部構造図">
    
    <h2>かわいい動物たち</h2>
    <img src="images/animals.jpg" alt="子犬と子猫が並んでいる写真">
</body>
</html>

📁 ファイル名： 「images.html」として保存

STEP 3: 追加練習

images.htmlに残りの2つの画像を追加してください：

<h2>音楽</h2>
<img src="images/guitar.gif" alt="オレンジ色のギターのイラスト">

<h2>宇宙</h2>
<img src="images/galaxy.jpg" alt="美しい銀河の天体写真">

保存してブラウザで確認し、4つの画像すべてが表示されることを確認してください。

💡 注目： GIF形式とJPEG形式の両方が同じように表示されることを確認してみましょう！

画像の属性

サイズの指定

<img src="images/animals.jpg" alt="子犬と子猫" width="300" height="200">

タイトル属性

<img src="images/galaxy.jpg" alt="銀河" title="美しい銀河の写真">

💡 ポイント： alt属性は画像が表示されない場合の代替テキストで、アクセシビリティのために重要です

🧭 6. ナビゲーションの改良

`<nav>`タグについて

<nav>タグはナビゲーションを表す専用のタグです。

<nav>
    <a href="index.html">ホーム</a>
    <a href="lesson1.html">レッスン1</a>
    <a href="lesson2.html">レッスン2</a>
</nav>

実習：既存ファイルにナビゲーションを追加

lesson1.htmlを開いて、<body>の最初に以下を追加：

<nav>
    <a href="index.html">トップページ</a> |
    <a href="lesson2.html">私の興味のある分野</a>
</nav>
<hr>

lesson2.htmlを開いて、同様に<body>の最初に追加：

<nav>
    <a href="index.html">トップページ</a> |
    <a href="lesson1.html">音楽とICT</a>
</nav>
<hr>

動作確認

各ページのナビゲーションリンクで自由にページ間を移動できることを確認してください。

ナビゲーションのバリエーション

縦方向のナビゲーション

<nav>
    <a href="index.html">ホーム</a><br>
    <a href="lesson1.html">音楽とICT</a><br>
    <a href="lesson2.html">私のテーマ</a>
</nav>

水平線（`<hr>`）で区切り

<nav>
    <a href="index.html">ホーム</a> |
    <a href="lesson1.html">レッスン1</a> |
    <a href="lesson2.html">レッスン2</a>
</nav>
<hr>

📝 覚え方： hr = horizontal rule（水平線）

✅ 7. 確認問題

問題1: タグの意味

以下のタグの意味を答えてください：

<a> : _________________
<nav> : _________________
<img> : _________________
<hr> : _________________

問題2: 正しいリンクタグはどれ？

以下のうち、正しく書かれているリンクタグはどれでしょうか？

A) <a href="page.html">リンク<a>
B) <a href="page.html">リンク</a>
C) <link href="page.html">リンク</link>

答え： _______

問題3: 正しい画像タグはどれ？

以下のうち、正しく書かれている画像タグはどれでしょうか？

A) <img src="photo.jpg" alt="写真"> B) <image src="photo.jpg">写真</image> C) <img href="photo.jpg" alt="写真"></img>

答え： _______

問題4: パスの種類

以下のパスは絶対パスか相対パスか答えてください：

lesson1.html : _________________
https://www.google.com : _________________
images/photo.jpg : _________________
../index.html : _________________

📝 8. 個人作業時間（15分）

課題：画像付きWebサイトの作成

現在の3つのファイルを改良して、画像を追加してください：

フォルダ構成

web_lesson/
├── index.html
├── lesson1.html
├── lesson2.html
├── link.html
├── images.html
└── images/
    ├── computer.gif
    ├── animals.jpg
    ├── guitar.gif
    └── galaxy.jpg

各ページに追加する内容

index.html: サイト紹介画像として1-2枚追加
lesson1.html: 音楽関連画像（guitar.jpgなど）
lesson2.html: テーマに関連する画像

使ってほしいタグ

<img> で画像表示
<nav> でナビゲーション
<a> でリンク（内部・外部）

記入例

<nav>
    <a href="index.html">ホーム</a> |
    <a href="lesson1.html">音楽とICT</a> |
    <a href="lesson2.html">私のテーマ</a>
</nav>
<hr>

<h2>音楽とICT</h2>
<img src="images/guitar.jpg" alt="ギターのイラスト" width="300">
<p>音楽制作にもICTが活用されています。</p>

<h2>関連リンク</h2>
<p><a href="https://www.youtube.com" target="_blank">YouTube Music</a></p>
<p><a href="https://open.spotify.com" target="_blank">Spotify</a></p>

🚨 9. よくあるミスと解決方法

❌ リンクをクリックしてもページが変わらない

原因： ファイル名の間違い 解決：

ファイル名のスペルを確認
大文字・小文字を確認
ファイルが同じフォルダにあるか確認

❌ 「ファイルが見つかりません」エラー

原因： パスの間違い 解決：

相対パスが正しいか確認
ファイルの場所を確認

❌ 外部リンクが開かない

原因： URLの間違い 解決：

https://から始まっているか確認
URLにタイプミスがないか確認

❌ ナビゲーションが表示されない

原因： HTMLタグの間違い 解決：

<nav>タグが正しく閉じられているか確認
<a>タグが正しく書かれているか確認

❌ 画像が表示されない

原因： 画像ファイルのパスの間違い 解決：

画像ファイルがimagesフォルダにあるか確認
ファイル名のスペルと拡張子を確認
相対パス（images/filename.jpg）が正しいか確認

🔮 10. 次回予告

第3時間目：CSSでデザインを整える

次回は作成したWebサイトを美しくデザインします！

学習内容

**CSS（Cascading Style Sheets）**の基本
色の付け方：文字色、背景色
フォントの変更：種類、サイズ
レイアウトの調整：余白、配置
ナビゲーションのデザイン

CSSとは？

HTMLファイルにある情報を整理してカッコよく見せるための言語です。HTMLが「内容」を担当し、CSSが「見た目」を担当します。

事前準備

3つのHTMLファイルを必ず持参
GitHubアカウントの作成（まだの方）
すべてのリンクが正常に動作することを確認

🎯 目標： 美しくデザインされたWebサイトを完成させる

📋 11. 今日の学習チェックリスト

自分の学習状況をチェックしてください：

理解度チェック

[ ] <a>タグの基本的な使い方がわかる
[ ] 相対パスと絶対パスの違いがわかる
[ ] <nav>、<img>タグの役割がわかる

技能チェック

[ ] ファイル間のリンクを作成できる
[ ] 外部サイトへのリンクを作成できる
[ ] 画像を表示できる
[ ] ナビゲーションを作成できる

完成物チェック

[ ] index.htmlファイルが完成している
[ ] 3つのファイル間でリンクが機能している
[ ] ナビゲーションがすべてのページに設置されている

✨ すべてチェックできたら今日の目標達成！

📚 12. 参考資料

HTML基本タグ一覧（追加分）

タグ	意味	用途
`<a>`	アンカー	リンクの作成
`<img>`	画像	画像の表示
`<nav>`	ナビゲーション	サイト内の案内
`<hr>`	水平線	セクションの区切り

リンクの種類

内部リンク: 同じサイト内のページ
外部リンク: 他のサイトのページ
アンカーリンク: 同じページ内の特定箇所
メールリンク: メールアドレス（mailto:）
電話リンク: 電話番号（tel:）

パスの書き方

同じフォルダ: filename.html
一つ上のフォルダ: ../filename.html
下のフォルダ: folder/filename.html
ルートから: /folder/filename.html