バナー画像

HTMLは、HyperText Markup Languageの略ですが、ハイパーテキストとはリンクで繋がっているテキストを意味する言葉です。

このように、HTMLとはリンクが作れるテキストであり、HTMLを学ぶならリンクは必須と言えます。

今回は、このようなHTMLのリンクの作り方とその活用方法について解説します。

そもそもリンクとは

今、インターネットで見られるWebページのほとんどに、一つ以上のリンクが作られています。

なお、HTMLは元々、スイスにある研究機関でコンピュータを使って関係する論文同志をリンクするために作られた言語です。

そのため、リンクが作れる言語として開発されました。このようなHTMLのリンクの機能を解説する前に、まずは、リンクとは何かについて解説します。

リンク(link)の基の意味

ITエンジニアなら、「リンク」という言葉を普段何気なく使っていることでしょう。

この「リンク」は、英語のlinkがIT用語になって言葉で、英語の基の意味は、チェーンなどで使われる繋がった輪を意味します。

また、その輪から転じて、結びつけるもの、連結、きずな、関連などの意味でも使われる言葉です。

IT用語のリンクは、何かと何かがつながること、として使われます。

例えばWebで使われるリンクは、HTMLやコンテンツを繋ぐことであり、通信の分野では信号の送受信が可能な状態をリンクと呼びます。

リンクはショートカットのようなもの

先ほど説明したとおり、リンクとは何かと何かがつながることですが、その例としてWindowsのショートカットが最も解りやすいでしょう。

ショートカットは、ファイルそのものをコピーするのではなく、そのファイルある場所を示す繋がりだけをファイルとして扱えます。

そして、ショートカットをクリックすることで、それに繋がったファイルが開けます。

なお、Windowsではショートカットと呼ばれますが、macOSではエイリアス、Linuxではシンボリックリンクと呼びます。

このシンボリックリンクのリンクは、まさにファイルとの接続という意味でつけらた名称です。そして、HTMLのリンクもこれと同じように使われます。

リンクにはこんな機能も

先ほど解説したように、リンクは、結びつけるもの、という意味があり、ちょうどWindowsのショートカットのように、リンクをクリックすると、そのリンクに結び付いたWebページが開きます。

しかし、HTMLで使えるリンクの機能はそれだけではありません。

例えば、縦に長いWebページでは、同じページ内の特定の場所にジャンプさせることが可能です。

また、リンク先にJavaScriptを指定すれば、リンクをクリックすることで、そのJavaScriptを動かせます。ぜひ、そういった使い方もマスターしましょう。

HTMLで作れるリンクの種類

先ほど紹介したように、HTMLで実現できるリンクは、別のWebページが開く機能だけではなく、他の用途でも利用可能です。

次から、HTMLで作れるリンクの種類について解説します。

他のWebページへのリンク

HTMLにおけるリンクの基本は、クリックすると別のWebページが開く機能です。とはいえ、別のWebページを指定する方法は1つではありません。

同じサーバー内の別のHTMLを指定する場合と、別のサーバー上のHTMLを指定する場合とがあり、同じサーバーならパス名を、また、別のサーバーならURLを指定します。

さらに、同じサーバー上のパス名を指定する場合、相対パスと絶対パスの2つの方法が使えます。

相対パスで同じサーバーにあるHTMLを指定した例

<a href="../archiv/sample2.html">サンプル2</a>

絶対パスで同じサーバーにあるHTMLを指定した例

<a href="/koho/archive/sample2.html">サンプル2</a>

別のサーバーのURLを指定した例

<a href="https://style.potepan.com/articles/13563.html"><プロが教える>失敗しないプログラミングスクールの選び方 | 「ポテパンスタイル」</a>

ページ内のリンク

縦に長いWebページを読んでいると、「トップへ」などのリンクがあり、これをクリックするとそのWebページの最も上にジャンプできたりします。

このような機能を使った方は多いのではないでしょうか。この機能もリンクで作成します。

まず、ジャンプ先を決めます。HTMLのバージョン5では、id名がジャンプ先になるので、ジャンプ先のid名を決めてください。

次に、アンカータグのhref属性に、#を付けて先ほどジャンプ先に決めたid名を指定します。

ジャンプ用リンクの例

//ジャンプ先
<h2 id="goal">ここにジャンプします。</h2>

//ジャンプ用リンク
<a href="#goal">ここをクリックするとジャンプ</a>

なお、HTMLの一番上にジャンプする場合は、href属性に#だけ指定します。

トップに戻るジャンプの例

<a href="#">トップへ</a>

リンク先のファイルをダウンロードさせる

HTMLのバージョン5から、アンカータグを利用してリンク先のファイルをダウンロードできるようになりました。

この機能を使うことで、サーバー上のファイル名とダウンロードされたファイルの名称を変えることも可能です。

リンク先のファイルをダウンロードさせる例

<a href="https://download.xxx/test20200401.pdf" download="test.pdf">PDFファイルをダウンロード</a>

JavaScriptを実行するリンク

JavaScriptを動作させるには、ボタンをクリックしたり、マウスカーソルが上に来た時など、いろいろなトリガーを設定できます。

そして、その一つがリンクのクリックです。なお、JavaScriptを実行するトリガーの書き方は複数あり、リンクを使った書き方も一つではありません。

JavaScriptを実行するリンクの作り方は、次から詳しく説明します。

JavaScriptを実行するリンクの書き方

次から、JavaScriptを実行するリンクの書き方について、具体例を示しながら解説します。

javascript:を使う方法

HTMLの書き方で、リンク先としてJavaScriptを指定する方法の一つ目は、アンカータグのhref属性として「javascript:」を使い、JavaScriptの関数を指定する方法です。

この書き方をすることで、アンカータグに囲まれた文字をクリックした際、指定されたJavaScriptの関数を実行します。

javascript:を使うリンクの作り方
<a href=”javascript:(JavaScriptの関数名)”>クリック</a>

javascript:を使うリンクの例

<a href="JavaScript:message('リンクがクリックされました')">ここをクリック</a>

<script type="text/javascript">
function message(message_text) {
 alert( message_text );
}
</script>

onClickを使う方法

JavaScriptのトリガーとしてよく使われる機能が、HTMLの要素をクリックしたことを判定するonClickです。

なお、このonClickは、ボタンや画像をクリックする際のトリガーとして使われます。そして、リンクをクリックした際にJavaScriptの関数を実行する際にも使えます。

onClickを使ったリンクの作り方は、アンカータグのhref属性に#を指定し、onClick属性にJavaScriptの関数を記述します。

onClickを使ったリンクの作り方は、アンカータグのhref属性に#を指定し、onClick属性にJavaScriptの関数を記述します。

onClickを使うリンクの作り方

<a href=”#” onClick=(JavaScriptの関数名)”>クリック</a>

onClickを使うリンクの例

<a href="#" onClick=message('リンクがクリックされました')">ここをクリック</a>

<script type="text/javascript">
function message(message_text) {
 alert( message_text );
}
</script>

linkタグと間違えないように

アンカータグで作るリンクは英語のlinkが語源ですが、HTMLのlinkタグは機能が全く違います。

なお、linkタグを説明すると、外部リソースを指定する際に使用するタグで、主に外部のCSSファイルを読み込むために使われます。

このようにlinkタグは、アンカータグで作るリンクとは全く別の機能を提供するタグなので、混同しないようにしましょう。

linkタグの使用例

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

まとめ

今使われているWebページには多くリンクが貼られており、これまで解説したようにリンクを使った便利な機能もよく使われています。

HTMLを学んでWebエンジニアを目指すのなら、リンクを使い方をマスターし、使いやすいWebページを作れるようになりましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。