【link】aタグをつかってリンクを張ろう!!内部リンクと外部リンクの記述方法

こんにちは。ヒロユキです。

今回は、aタグをつかって内部リンクと外部リンクの張り方を解説していきますよ〜。

aタグをつかってリンクを張ろう!!

小松田くん

Webサイトってページがリンクで繋がってますよね。あれもタグを使えば出来るようになるんですか?

尾地ヒロユキ

リンクは「aタグ」をつかえば設定できるぞ。内部リンクと外部リンクは少し違うから比べながらやってみようか。

今回解説する「aタグ」を使ったリンクは大きく分けて2種類あります。

  • 外のページに移動する「外部リンク」
  • 内のページに移動する「内部リンク」

外部リンクの張り方

外部リンクとは、今閲覧しているWebサイトのページから他のWebサイトのページに移動するリンクのことです。

今回は指定した文字列に、リンクを張る方法を解説します。↓

リンクの張り方1

本文のpタグが今はこうなってます。↓

<p>プロじゃないけどProgramming「つみきのーと」</p>

外部リンクを張るためにはリンクを張りたい文字列をaタグ(!)で囲み、href属性でURLを指定します。今回指定するURLは「https://hiroyukioji3.com」↓

<p>プロじゃないけどProgramming「<a href="https://hiroyukioji3.com">つみきのーと</a>」</p>

aタグ(エータグ)

リンク先を指定する要素。「Anker」の頭文字を取って「aタグ」。

コードを加筆してブラウザで確認すると…↓

リンクの張り方2

はい!このとおり!!

aタグで指定した部分の文字色が変わって下線が引かれています。設定にもよりますが、一般的にリンクが張られている文字列はこのような見た目をしています。

実際にリンク部分をクリックして、目的のページへ移動できたら成功ですね。

リンク先を新しいタブで開きたい場合

リンク先を「新しいタブ」で開きたい場合につかうのは、target属性(!)です。

target属性

リンク先のページをどのように開くのかを指定する属性。

target属性はhref属性で指定したURLのあとに記述します。↓

<p>プロじゃないけどProgramming「<a href="https://hiroyukioji3.com" target="_blank">つみきのーと</a>」</p>

今回のように新しいタブでリンク先を開く場合、target属性の属性値は「_blank」です。

尾地ヒロユキ

「_(アンダーバー)」を忘れちゃだめだぞ。

内部リンクの張り方

内部リンクとは、今閲覧しているWebサイトの中でページからページへ移動するリンクのことです。

例えば、今作っているWebサイトに「プロフィール」と「ブログ記事」のページがあるとします。トップページから各ページへリンクを張るには、href属性でページのファイル名を指定するのです。

リンクを張る前のトップページのコードは、こんな感じ。↓

リンクの張り方3
<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>プロじゃないけどProgramming「<a href="https://hiroyukioji3.com" target="_blank">つみきのーと</a>」</p>
   <p>プロフィールはコチラから</p>
   <p>ブログ記事はコチラから</p>
</body>
</html>

今回はサイトのファイル構造がこうなってます。↓

リンクの張り方4

「トップページ」と「プロフィール」は同じ階層にあります。この場合、href属性の値にファイル名をそのまま記述します。↓

<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>プロじゃないけどProgramming「<a href="https://hiroyukioji3.com" target="_blank">つみきのーと</a>」</p>
   <p>プロフィールは<a href="profile.html">コチラ</a>から</p>
   <p>ブログ記事はコチラから</p>
</body>
</html>
リンクの張り方5

はい!このとおり!!リンクが表示されました。↑

リンクをクリックすると指定したファイルが開きます。↓

リンクの張り方6

つぎは「ブログ記事」へのリンクを張ります。

リンクの張り方4

ブログ記事のファイルは、トップページのファイルよりもひとつ下の階層にあります。ファイルの階層構造については別の記事で解説してるので、そちらも合わせてご覧ください。

フォルダの階層構造

ひとつ下の階層にあるファイルを指定したいときは、属性の値が↓

href=”同じ階層のフォルダ名” / “下の階層のファイル名”

↑というふうになります。つまり「/」は「〜の中の」っていう意味なんですね。

というわけで、今回のコードはこんな感じになります。↓

<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
   <h1>つみきのーと</h1>
   <p>プロじゃないけどProgramming「<a href="https://hiroyukioji3.com" target="_blank">つみきのーと</a>」</p>
   <p>プロフィールは<a href="profile.html">コチラ</a>から</p>
   <p>ブログ記事は<a href="blog/index.html">コチラ</a>から</p></body>
</html>

ブラウザで表示確認すると↓

リンクの張り方7

はい!リンクが張られてます。

このようにhref属性では、ファイル名と階層を正しく指定する必要があります。そのためには、フォルダの階層構造を理解してファイルの管理を行いましょう。

尾地ヒロユキ

ファイルの名前は自由だけど、拡張子には「.html」を忘れずにね

トップページへ戻るリンクの注意点

リンク先のページからトップページへ戻る場合も、aタグをつかって同じ要領でリンクを張ります。…が、注意点がひとつ!!

同じ階層のファイルなら問題ないですが、ひとつ下の階層から上の階層にあるファイルを指定する場合には属性の値が少し変わります。↓

リンクの張り方8
<!DOCTYPE html>
<html lang="ja">
 <head>  

 </head>
 <body>
   <h1>ブログ記事</h1>
   <p><a href="../index.html">トップページへもどる</a></p>
</body>
</html>

ひとつ上の階層にあるファイルを指定する属性の値は↓

href= ../”上の階層にあるファイル名”

↑というふうになります。つまり「../」の部分が「ひとつ上の」っていう意味なのです。

小松田くん

編集中のファイルからみて「指定するファイル」が、階層のどの位置にあるかで属性値の記述が変わるんですね。

aタグをつかってリンクを張ろう!!まとめ

  • リンクを張りたい文字列をaタグで囲む
  • href属性でリンク先のファイル名を指定する
  • ひとつ下の階層にあるファイルの属性値は
    href=”同じ階層のフォルダ名” / “下の階層のファイル名”
  • ひとつ上の階層にあるファイルの属性値は
    href= ../”上の階層にあるファイル名”
  • リンク先を新しいタグで開きたい時は
    <a “リンク先のURL” target=”_blank”>文字列</a>

内部リンクや外部リンクは、Webサイトを構築するための必須項目です。利便性の高いリンクは良いサイトの条件になります。しっかり身につけましょうね。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪