概要
まずは以下のファイルをダウンロード、解凍しましょう。
作業する場所に移動し、VScodeで「フォルダで開く」をしましょう。
ダウンロードしたデータは3ページのWEBサイトです。
現在リンクが繋がっていません。
各ページを行き来できるようにファイルを修正しリンクを繋げてください。
※この課題は修正課題です。ファイルの新規作成は不要です
作業内容
- TOPページに画像を設置してください。
- 各ページを相互にリンクしてください。
→かならず動作チェックをすること - 電話番号とメールのリンクも追加してください。
書き方の例
同じフォルダにあるページへ移動するリンクは、次のように書きます。
<a href="about.html">会社概要</a>
<a href="contact.html">お問い合わせ</a>画像ファイルがimagesフォルダ内にある場合は、HTMLファイルから見た場所をsrcに書きます。画像の意味が伝わるようにaltも指定します。
<img src="images/main.jpg" alt="会社の外観">電話番号とメールアドレスは、次のようにリンクできます。
<a href="tel:0312345678">03-1234-5678</a>
<a href="mailto:info@example.com">メールで問い合わせる</a>動作を確認する手順
index.htmlをブラウザで開きます。- 会社概要とお問い合わせのリンクを順番にクリックし、正しいページが開くか確認します。
- 各ページからTOPページへ戻れるか確認します。
- 画像が表示されるか、画像が表示されない場合にも
altの内容で意味が伝わるか確認します。 - リンク確認後、ブラウザの戻るボタンだけに頼らず3ページを行き来できるか確かめます。
よくある間違い
hrefとsrcを逆にする：ページのリンクはhref、画像の場所はsrcです。- 閉じる
</a>を忘れ、後ろの文章までリンクになる。 about.htmlをabut.htmlと書くなど、ファイル名が一致していない。- 電話番号の表示だけを書き、
href="tel:..."を付け忘れる。 - 自分のパソコン内だけで通じる絶対パスを使う。
基本タグに不安がある場合は、先に基本タグの練習を確認してください。この課題ができたらリンク・パス練習 中級へ進み、最後にHTML・CSSで作ったページを公開する方法で公開後のリンクも確認できます。
参考：MDN「<a> アンカー要素」、MDN「<img> 画像埋め込み要素」（2026年10月7日確認）
参考
TOPページ : index.html
会社概要 : about.html
お問い合わせ：contact.html
完成イメージ
目的
aタグ/imgタグの使い方、相対パスの使用方法を理解する。
データ
使用ソフト
VisualStudioCode
答え（作業完了後に答え合わせ）
さらに学びを深める
リンク・パス練習 中級
概要画像のパスの仕組みを理解します。まずは初級に取り組んでからこちらの課題に取り組んでください。課題を終えたら、HTML・CSSで作ったページを公開する手順を参考にサーバーへアップロードし、ローカルと公開後の表示を比べてみましょう。初期状態...
photogentle.com
2025.04.04
こちらの課題に取り組みましょう！
