第1部 HTML — Day 4 / 30

リンク

リンクは <a> タグで作ります。href にURL全体を書くと外部サイトへ(絶対パス)、ファイル名を書くと自分のファイルから見た場所へ(相対パス)移動します。

<!-- 絶対パス: URL全体を書く -->
<a href="https://www.example.com/">外部サイトへ</a>

<!-- 相対パス: 自分のファイルから見た位置を書く -->
<a href="profile.html">同じフォルダの自己紹介ページへ</a>
<a href="../index.html">1つ上のフォルダのトップへ</a>

../ は「1つ上のフォルダ」という意味です。このサイトの出席確認ページも、../index.html でトップページに戻っています。

今日の練習

hello.html と profile.html の2つのファイルを作り、お互いに行き来できるようにリンクを張りましょう。

模範解答を見る

<!-- hello.html -->
<p>こんにちは、HTML!</p>
<a href="profile.html">自己紹介ページへ</a>

<!-- profile.html -->
<h1>自己紹介</h1>
<a href="hello.html">hello.html に戻る</a>

2つのファイルを同じフォルダに置けば、ファイル名だけの相対パスでお互いにリンクできます。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. 相対パスで「1つ上のフォルダ」を表す書き方はどれでしょうか?

../ // **

Completed

正解です！Day 4 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 4 リンク
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。