HTMLの強力な機能、リンクを使ってみましょう。

リンクについて

正式にはハイパーリンクと呼びますが、略してリンクと呼ぶことが多いです。
ハイパーリンク機能はHTML意外にも存在しますが、どれも同様に、他のファイルや機能を呼び出してくれるものです。
この「他のファイルや機能を呼び出す」ように設定することを、"リンクをかける"、と言ったりします。

HTMLのリンク

HTMLのリンクはアンカーリンクと呼ぶこともあります。
ハイパーリンクがリンク機能全般を指すのに対して、アンカーリンクはHTMLに限定したリンク機能を指します。

リンク先のHTMLを用意する

リンク先となるHTMLを用意しましょう。

現在はgieerディレクトリ配下にindex.htmlが一枚ある状態ですね。
もう一枚のHTMLを用意するため、TeraPadを開いて以下のHTMLを書いていきましょう。

<!doctype html>
<html>
<head>
<title>はじめてのリンク</title>
</head>
<body>
<h1>はじめてのリンク</h1>
</body>
</html>

これをlink.htmlという名前でgieerディレクトリ配下に保存します。

表示確認もしておきましょう。

link.htmlをダブルクリックします。

はじめてのリンク

このように表示されれば完璧!です。

リンクをかけよう

index.htmllink.htmlをリンクさせていきます。

まずはindex.htmlからlink.htmlに向けてリンクをかけましょう。
リンクをかけるためにはaというタグを使用します。

TeraPadでindex.htmlを開き、h1タグの下に以下のコードを追加します。

<a href="link.html">はじめてのリンク</a>

追加できたら保存しておきましょう。

続いてlink.htmlからhtml.htmlに向けてリンクをかけます。

link.htmlを開き、h1タグの下に以下のコードを追加します。

<a href="index.html">はじめてのHTML</a>

追加できたら保存しておきましょう。

aタグの書き方

aタグの構成は以下のようになっています。

<a href="呼び出したいファイル名">表示したい内容</a>

hrefってなんだ?については別の講座で説明します。

ここで注目しておきたいのは、href=""の中に呼び出したいファイル名(今回はindex.htmllink.html)を、タグの中に表示したい内容(今回は「はじめてのリンク」などのテキスト)を指定している点です。

確認

index.htmlをダブルクリックしてブラウザで表示を確認しましょう。

link画面へのリンク

「はじめてのリンク」という文字が表示されていますね。

では、クリックしてみましょう。

link画面へ遷移

画面がlink.htmlに切り替わりました!

今度は「はじめてのHTML」という文字をクリックしてみましょう。

link画面へのリンク

index.htmlに戻ってきましたね。

両ページのリンクをクリックした時にブラウザのURLが切り替わることも確認してみてください。

はじめてのリンク

まとめ

本講座では

  • HTMLでリンクをかける
  • aタグの基本的な書き方を知る

について学びました。

HTMLの強力な機能を1つ、身に付けることができました!

本講座の最終コード

  • index.html
<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
<a href="link.html">はじめてのリンク</a>
</body>
</html>
  • link.html
<!doctype html>
<html>
<head>
<title>はじめてのリンク</title>
</head>
<body>
<h1>はじめてのリンク</h1>
<a href="index.html">はじめてのHTML</a>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...