• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / プログラミング入門 / HTMLのリンクをマスター!3種類のリンクを使えるようになろう!

HTMLのリンクをマスター!3種類のリンクを使えるようになろう!

2020-09-30 By プログラミング入門ナビ編集部

Tweet
このエントリーをはてなブックマークに追加
Pocket

目次

  • 1 はじめに
    • 1.1 動画解説
  • 2 リンクの基礎
    • 2.1 リンクの基本構文
    • 2.2 target属性とrel属性
    • 2.3 3種類のリンク
  • 3 外部リンク
  • 4 内部リンク
  • 5 ページ内リンク
  • 6 まとめ
  • 7 今すぐメルマガ登録!
  • 8 動画で学ぶプログラミング入門

はじめに

リンクの概念

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

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

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

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

動画解説

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

リンクの基礎

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

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

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

リンクの基本構文

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

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

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

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

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

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

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

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

リンクの例

target属性とrel属性

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

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

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

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

3種類のリンク

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

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

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

外部リンク

外部のサイトへ飛ばすための方法が外部リンクです。例えば下記のように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”」となっていますね。

ページ2へのリンク

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

リンク先のページ2

このように、内部リンクの場合は外部リンクの時のように絶対パスとして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(プログラス)でプログラミングを学んで、創れる人になろう!

在宅学習応援!今なら複数の基礎コースが無料!!

今すぐ詳細を確認する

Tweet
このエントリーをはてなブックマークに追加
Pocket

Filed Under: プログラミング入門 Tagged With: a, href, HTML, id, rel, target, リンク

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • WindowsからSSHでサーバに接続する方法(RLogin利用)
  • Apacheインストール時にエラー Cannot find a valid baseurl repo: base/7/x86_64
  • MySQL 5.7 for Windowsのアンインストール方法

最近の投稿

  • ウェブアプリケーションエンジニアになりたい!何を学習するべきか?
  • VSCodeで画像が表示されない場合の対処法
  • プログラミング学習での「質問のお作法」を理解しよう!最小限のやりとりで効率的に解決!
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • TypeScriptとは?JavaScriptとの違いは?人気の理由を徹底解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー