/*サーチコンソール*/ /*google adcense*/

初心者向けリンクの貼り付け方法【HTML】

2020年1月22日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はa要素を使ったリンクの貼り方について解説していきます。Webサイトを作成するにあたって「リンクを張り付けること」は必要不可欠です。自分のサイトをわかりやすくするために、他のサイトのリンクを張り付けることも多々あります。

HTML初心者にとってa要素は少し難しく感じるかもしれませんが、とても大切な要素なのでゆっくりと理解していきましょう。

この記事の要点まとめ
リンクを張り付けるa要素
a要素は、テキストや画像に対してリンクを張ることのできる要素。
ハイパーリンク
リンクはハイパーリンクの略称。ハイパーリンクとは、「ファイルの住所」を表したもの。
href属性
a要素を使いテキストや画像に対してリンクを張る場合、href属性が必要となる。
a要素の書き方
<a href="属性値">テキストまたは画像</a>
target属性
target属性にはいくつかの種類がある。
target="self"
属性名selfは、今開いているウィンドウを使ってリンクを表示するもの。
target="blank"
属性値blankは、クリックするたび新規ウィンドウを開くもの。
絶対パスと相対パス
Web上でリンクを張る場合、絶対パスと相対パスがある。
絶対パス
URLのようなhttp:から始まる指定方法。
相対パス
今いる階層を基準にして別のページへリンクさせる。
まずはa要素とhref属性を理解しよう
aタグ内にhref属性を入れて、herf属性に属性値を指定すればリンクを張ることができる。

リンクを張り付けるa要素

ハリボー
ハリボー

リンクって緑の帽子かぶった運動神経抜群なイケメンだよね。

なんだかすっごく勘違いしているよ?

ヒナ
ヒナ

a要素とは、テキストや画像に対してリンクを張ることのできる要素で、「アンカー」と読みます。

a要素はHTML初心者にとって少し難しく感じるかもしれません。p要素などは『<p>テキスト</p>』のように「テキストをタグで囲むだけで、囲まれたテキストが表示」されます。しかしa要素はp要素のように、タグで囲むだけでリンクを表示することができません。

ハイパーリンク

これからHTMLを勉強しよう」と思っている人は少なからずWebに関して興味のある人だと思うので、リンクを知らない人はいないと思いますが、一応説明しておきます。何気なく「そこのリンク押したらヤフーに飛ぶよ」みたいに言っているけど、実際よくわかっていない人もいるかもしれません。ここで一度、リンクについてきちんと理解しておきましょう。

リンク(link)とは日本語にすると、「鎖」「関連づけられた」などという意味です。Web上でのリンクとは実は略称で、正式には「ハイパーリンク」と言います。

ハイパーリンクは「ファイルの住所」を表したものです。ハイパーリンクを関連づけられたテキストをクリックすることで、記入されたファイルへ移動するという仕組みです。よく見るのが下線の入った青文字で表示されたものが、別のページへリンクします。これは例なのでリンク指定はされていませんが、こんなやつです

href属性

a要素を使いテキストや画像に対してリンクを張る場合、「href属性」というものが必要となります。href属性は「Hypertext Reference(ハイパーテキストリファレンス)」の略称で、「エイチレフ」と読みます。HTMLとしてはa要素とセットで使う必要があり、<a href〜>となり、合わせて「アンカーエイチレフ」と読みます。

この「〜」の部分ですが、ここには属性値を記入します。書き方としては<a href="属性値">となります。hrefの後に=を書き、属性値をダブルクォーテーション(”)で囲みリンクを表示させます。

属性値と聞くと難しく感じるかもしれませんが、href属性ではリンク先を記入します。href属性の後に属性値(リンク先)を書くことで、そこへ移動することができます。以降、この記事では属性名に対して絶対パス(後ほど説明します)と呼ばれる「URL」を当てはめて考えます。

これは覚えなくてもいいのですが、プログラミングにおいて「=」とは、数学で習ったものとは意味が異なります。「右辺(ここで言うa href)と左辺(ここで言う"URL")が同じ」という意味ではなく、「右辺に左辺を代入する」というものです。今回の場合、「a hrefとURLは同じものだからURLが表示される」という認識でも問題はありませんが、「URLをa hrefに代入してURLを表示される」と覚えておく方が、後々楽かもしれません。

数学とプログラミングで使う=の違い
クリックで拡大

a要素の書き方

前項でほとんど説明してしまいましたが、a要素を使いリンクを表示させるには、
<a href="URL">テキストまたは画像</a>
と書きます。終了タグ(</a>)を忘れないようにしましょう。

※CodePenの使い方がわからない方はこちら

See the Pen KKwvMbY by Kosei@SplaTech (@pompom_stk) on CodePen.

上の例の場合、URLの部分にはこのSplaTechのトップページ、テキストの部分はサイト名を記入しています。サイト名がテキストとして表示され、それをクリックするとこのブログのトップページに移動するようになっています。

「a」という要素、「href」という属性、この二つを組み合わせる必要があるため、p要素などと比べて難しく感じるかもしれません。慣れるまで何度か使ってみて、ゆっくりと理解していきましょう。

「要素」と「属性」の違いについてはまた別の記事にします。また、画像にリンクを張るにはまた別の属性が必要となるので、これもまた別の記事にします。

target属性

ハリボー
ハリボー

ねぇもういいって、属性は。

また属性かよ、、」そう思ったあなた、もう少し頑張りましょう!

target属性もhrefと同じように属性値を記入します。target属性の属性値にはいくつか種類がありますが、この記事では2つ紹介します。

target="self"

targetの属性値selfは、「今開いているウィンドウを使ってリンク先を表示するもの」です。target属性を指定していない場合と同じ効果なので、基本的には使いません。

書き方は<a href="URL" target="self">テキスト</a>です。hrefと同じように、target属性の後に=を付け、属性名であるselfをダブルクォーテーション(”)で囲みます。

こちらをクリックしてみてください。

同じウィンドウを使いこのブログのトップページが表示されることを確認できましたか? 新しいウィンドウを開かないのでうっとうしくないというメリットがありますが、他のサイトなどをリンクさせた場合、もとのページに戻ってきてくれない可能性があるというデメリットもあります。

target="blank"

targetのblankは、「新規ウィンドウを開いてリンク先を表示するもの」です。以下にblank属性の入ったリンクを用意します。

こちらをクリックしてください。

新しくウィンドウが開いたと思います。これが「blank」です。selfと違い、新しいウィンドウが開かれるためうっとうしいというデメリットがありますが、他のサイトへリンクさせても、selfよりはもとのページに戻ってきてくれる可能性が高いと言うメリットもあります。

新しく開いたウィンドウはもう閉じても大丈夫ですよ!笑

targetの属性値
クリックで拡大

絶対パスと相対パス

ここからは、ここまでを理解できてまだ余裕のある方だけ読んでください。先ほど少しだけ出てきた「絶対パス」についてです。

Web上でリンクを張る場合、「相対パス」と「絶対パス」というものがあります。これらに関してきちんと説明しようとすると長く難しくなるので、ここでは簡単に説明していきます。今は「こんなものもあるんだ」程度に捉えてもらえれば大丈夫です。

絶対パス

絶対パスは、「自サイト外のリンクを張る場合」に使用します。この記事でいくつかリンクを張り付けていますが、これらは全て絶対パスを使っています。

絶対パスとは、URLのような「http:(またはhttps:)」から始まる指定方法のことを指します。基本的に自サイト外へのリンクに対して使いますが、この記事でも使ったように、自サイトに対して使うこともできます。

例えばこのブログのHTMLカテゴリーに移動する場合、
<a href="https://pompom-stk.com/category/programming/html/“>HTMLに移動</a>
と書きます。

これを書いたものが、「HTMLに移動」です。クリックするとカテゴリーに移動します。

このように、http:から始まるURLをリンクさせる指定方法が絶対パスです。

相対パス

相対パスは、絶対パスと比較すると書き方がやや複雑です。が、ここでは深く説明しません。

相対パスは、「今いる階層(ページ)を基準にして別のページへリンクさせる」指定方法です。自サイトに対して使うもので、自サイト外に使用することはできません。説明は割愛しますが、自サイトに対して相対パスを使用するメリットもいくつかあります。

このブログのHTMLカテゴリーに移動する場合、
<a href="../category/programming/html/">HTMLに移動</a>
と書きます。

これを書いたものが「HTMLに移動」です。これをクリックすると、先ほど絶対パスで指定したページと同じHTMLのカテゴリーに移動します。

これ以外にも「ルート相対パス」というものも存在しますが、これもまた別の記事で説明します。今はあまり深く考えなくて大丈夫です。

まずはa要素とhref属性を理解しよう

ハリボー
ハリボー

、、、、、

あれ?大丈夫?ちょっと難しかったかな?

ヒナ
ヒナ

今回は「a要素」「href属性」「target属性」「絶対パスと相対パス」これだけのことを解説していきました。HTMLを始めたばかりの人がこれを全て理解するのは少し難しいと思います。

まずは「aタグ内にhref属性を入れて、href属性に属性値(URLなど)を指定すればリンクを張ることができる」これだけは理解しておきましょう。余裕があればtarget属性についても理解しておくと、とても便利です。何度もしつこいですが、今は絶対パスと相対パスは無視して大丈夫です。

Webサイトでリンクを張ることは、サイトをわかりやすくするためや商品を購入してもらうためなどに、よく使われます。とても大切なものなので、ゆっくりと理解していきましょう。