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">サンプル２</a>
絶対パスで同じサーバーにあるHTMLを指定した例
<a href="/koho/archive/sample2.html">サンプル２</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ページを作れるようになりましょう。
