HTMLのリンクをマスター！3種類のリンクを使えるようになろう！ | プログラミング入門ナビ by Proglus（プログラス）

Pocket

1 はじめに
- 1.1 動画解説
2 リンクの基礎
3 外部リンク
4 内部リンク
5 ページ内リンク
6 まとめ
7 今すぐメルマガ登録！
8 動画でプログラミング入門をしよう

はじめに

リンクはHTMLの醍醐味といっても過言ではありません。

なぜなら「HTMLはどうやって開発された？経緯や主なバージョンについて紹介！」の記事でもご紹介した通り、元々HTMLは膨大な論文の中から関連性の高いもの同士をリンクさせて探しやすくするために開発されたからです。

そのため、リンクを使いこなせるようになることは、HTMLマスターへの第一歩ともいえますね！

この記事ではHTMLで用いられる３種類のリンクの使い方をソースコードと共に詳しく解説します。

動画解説

本記事の内容を動画でも解説しています。

リンクの基礎

リンクとは、今見ている部分からどこか他の部分へ飛ぶことです。

例えば「ここ」をクリックすれば、本ブログサイト「プログラミング入門ナビ」のトップページへと飛びます。

まずはリンクについて基礎的なことを覚えていきましょう。

リンクの基本構文

コンテンツをクリックすると他の場所へ飛ぶようにするには下記のように記述します。

<a href="リンク先のパス">コンテンツ</a>

aのタグは「anchor」の略で、リンクを張る時に使用します。

属性hrefは「Hypertext Reference」の略で、飛ばしたい先のパスを指定可能です。

簡単な例を見てみましょう。エディタを開いて「page1.html」を新規作成し下記のように記述してください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンク ページ１</title>
  </head>
  <body>
    <a href="https://blog.proglus.jp/">プログラミング入門ナビ</a>
  </body>
</html>

ブラウザで開くと下記のように表示されます。

「プログラミング入門ナビ」の文字をクリックして無事に本ブログへ飛べば成功です。

target属性とrel属性

href属性は必須の属性ですが、他にもリンクでよく使用する属性を見てみましょう。

target属性はリンクをクリックした時の開き先を指定可能で、例えば「target=”_blank”」とすれば新しいタブで開くことができます。

rel属性はリンク元とリンク先の文書の関係を指定可能です。セキュリティ対策のために「rel=”noopener”」としておけばリンク先が悪意のあるサイトであっても、自分のサイトを守ることができます。

詳しくはMDNの「リンク種別」ページを参照してください。

３種類のリンク

リンクは下記の３種類に分けられ、書き方が少し異なります。

外部リンク
内部リンク
ページ内リンク

それぞれどういったリンクなのか、次項から詳しく見ていきましょう。

外部リンク

外部のサイトへ飛ばすための方法が外部リンクです。例えば下記のようにGoogleへリンクする場合などがわかりやすいですね。

<a href="https://www.google.com/">Googleへのリンク</a>

href属性へ記述するパスは絶対パス（URLなど、誰がみても場所が明らかなパス）での指定となります。

「https://」の部分を省略しても問題ないか？という質問がよくありますが、省略してはいけません。

httpsの部分は、パソコンやスマートフォンなどとWebサーバがデータをやり取りするための「プロトコル」（通信を行うための決まりごと）の種類を表しているので、この部分がなくなると通信不可となってしまいます。

内部リンク

内部の別のページへ飛ばすことを内部リンクといいます。

具体的に書いてみた方がわかりやすいので、やってみましょう。

まずエディタを開いて「page1.html」を次のように記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンクの練習 page1</title>
  </head>
  <body>
    <h1>page 1</h1>
    <a href="page2.html">ページ2へ</a>
  </body>
</html>

次に、「page2.html」をpage1.htmlと同じフォルダ内に作成して次のように記述してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リンクの練習 page2</title>
</head>
<body>
  <h1>page 2</h1>
</body>
</html>

ブラウザでページ1を開くと下記のようにページ2へのリンクが表示されます。

リンク先は先ほど記述した通り、「href=”page2.html”」となっていますね。

クリックしてみると、下記のように先ほど作ったpage2.htmlが開かれます。

このように、内部リンクの場合は外部リンクの時のように絶対パスとしてURL等を指定せずとも、リンク元のページから見たリンク先ページへのパス（相対パスと呼びます）でリンクできます。

ページ内リンク

もう1つ、同じページ内の別の場所へ飛ばしたい時に使えるのがページ内リンクです。

ページによっては縦に長く、冒頭に戻りたい時にスクロールするのが面倒なことがありますよね。

そんな時に便利に使えます。

これもやってみた方がわかりやすいのでコードを書いてみましょう。

エディタで「page1.html」に下記のように記述してください。

縦に長いページを作るために少々コードが縦に長くなります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>リンクの練習 page1</title>
  </head>
  <body>
    <h1>page1</h1>
    <a href="#apple">りんごへ</a>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <h2 id="apple">りんご</h2>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
    <p>テスト</p>
  </body>
</html>

上記のコードでは冒頭部で「りんごへ」のリンクがあり、href属性で「href=”#apple”」としたことに注目してください。

また、たくさんの「テスト」段落が並ぶ中、真ん中段あたりに「りんご」の見出しがあり、この見出しにはid属性を使って「id=apple」としていますね。

ブラウザで開くと、下記のようになります。

「りんごへ」をクリックしてみると…

無事に「りんご」の位置まで飛ぶことができました！

このように、ページ内の他の要素（見出しや段落にすることが多いです）にid属性で一意なidを割り振り、a要素から#をつけてhref属性で指定すればページ内リンクを作ることができます。

まとめ

HTMLの醍醐味ともいえるリンクについて、基本的な使い方を解説しました。

また、3種類あるリンクの使い方についてもコード例を交えて説明しましたので、ぜひご自身でも書いて覚えてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Pocket