リンクを作ってみよう
更新日：2026-08-02
前のページでは、画像を表示しました。
今回は、
- 別のページへ移動する
- Webサイト内を移動する
ために使われる「リンク」を学んでいきます。
Webサイトでは、リンクは非常に重要な仕組みです。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
├── index.html
└── profile.html
a タグを使う
リンクを作るときは、a タグを使います。
まずは、以下のように index.html を変更してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンクの練習</title>
<style>
body {
background-color: #f3f4f6;
text-align: center;
padding-top: 40px;
}
.link {
color: #2563eb;
font-size: 20px;
}
</style>
</head>
<body>
<h1>
リンクの練習
</h1>
<a
href="https://www.google.com/"
class="link"
>
Googleを開く
</a>
</body>
</html>
保存したあと、ブラウザを更新してください。
リンクが表示される
画面に、
Googleを開く
という文字が表示されるはずです。
クリックすると、Google が開きます。
href の意味
href="https://www.google.com/"
の href は、
どこへ移動するか
を指定しています。
現在は、
GoogleのURL
を指定しています。
a タグの中の文字
<a href="...">
Googleを開く
</a>
の、
Googleを開く
の部分が、画面に表示されるリンク文字になります。
ここは自由に変更できます。
別ページを作ってみよう
次は、自分で作ったHTMLへ移動してみます。
まず、
profile.html
というファイルを作成してください。
内容は以下のようにします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロフィール</title>
</head>
<body>
<h1>プロフィールページ</h1>
<p>
別ページへ移動できました。
</p>
</body>
</html>
index.html を変更する
次に、index.html のリンクを変更します。
<a href="profile.html">
プロフィールを見る
</a>
保存してブラウザを更新してください。
自分で作ったページへ移動できる
リンクをクリックすると、
profile.html
へ移動できるはずです。
これは、
同じフォルダ内のHTMLファイル
へ移動しているためです。
パスが重要になる
今回の、
href="profile.html"
も「パス」です。
つまり、
どのファイルへ移動するか
を指定しています。
前回の画像表示でも、同じ考え方を使っていました。
わざと間違えてみよう
例えば、
href="aaa.html"
に変更するとどうなるでしょうか？
存在しないページへ移動しようとするため、エラーになります。
Webサイトはリンクでできている
実際のWebサイトでも、
- メニュー
- ボタン
- ロゴ
- 記事一覧
など、多くの場所でリンクが使われています。
リンクをたどることで、ユーザーはページ間を移動しています。
右クリックしてURLを見てみよう
リンクを右クリックすると、
リンク先URLをコピー
などのメニューが表示されることがあります。
これは、href に指定されたURLです。
少しずつWebサイトらしくなってきた
現在は、
- HTMLを書く
- CSSで見た目を変える
- 画像を表示する
- リンクでページ移動する
という基本的な仕組みを触っています。
これらは、実際のWeb制作でも非常によく使われる基礎です。
次のページでは
次のページでは、
- フォルダ分け
- css フォルダ
- images フォルダ
- ファイル整理
などを学んでいきます。
実際のWeb制作に近い構成になっていきます。