【HTML入門】 リンクの作り方

Webページにリンクを貼ることで、自分のサイト内だけでなく、外部のサイトにも移動できます。

まずはHTMLタグを使ってリンクを作成してみましょう

タグについてはこちら

【HTML入門】 簡単なHTMLを書いてタグを理解しよう!

タグとは、HTMLで文章に意味を付ける(段落なのか、ヘッダーなのか、箇条書きなのかなど) ために、その範囲を指定するために使用するものです。 H…

リンクの作り方

リンクでは、aタグを用います。

See the Pen html link by Totori (@souki202) on CodePen.

クリックするとexample.comのページが表示されますね。

<a href="(パス)">リンクの表示文字列</a>のように書き、パスには移動先のページのURLを設定します。

パスの種類

hrefに設定するパスには、大まかに分けて相対パス、絶対パス、URLの3種類あります。

• 相対パスは、今のページを基準として移動する
• 絶対パスは、今のWebサイトの根本を基準として移動する
• 普通のURLは、そのまま設定した場所に移動する

URLの構造に関しては下の記事をご覧ください

URLの構造を徹底解説!

URLとは、Web上の住所です。1つのURLは1つのWebページと結びつきます。 このURLの構造と、合わせてドメインの構造も理解して、リンクの…

開き方の種類

ページの開き方でよく利用するのは、同じタブで開く、新しいタブで開くの2つです。

See the Pen html target by Totori (@souki202) on CodePen.

上の例を試すと、上のリンクはその画面で開くのに対し、下のリンクは新しいタブで開くことがわかります。

設定方法

開き方を指定するには、target属性を用います。

<a href="https://example.com" target="_blank" rel="noopener">...</a>

子要素

aタグは特殊で、インラインやブロック関係なくほとんどの要素を子要素にできます。

<!-- OK pの要素全体がリンクになる -->
<a href="http://example.com">
    <p>pの要素</p>
</a>

<!-- OK divの要素全体がリンクになる -->
<a href="http://example.com">
    <div><strong>div, strongの要素</strong></div>
</a>

<!-- OK imgの要素(画像)がリンクになる -->
<a href="http://example.com">
    <img src="..." />
</a>

<!-- NG aの子要素にaを含むことはできない -->
<a href="http://example.com">
    <a href="http://example.com/aaa/bbb">
        aの要素
    </a>
</a>

See the Pen html link block by Totori (@souki202) on CodePen.

前のページに戻るボタン

つまり、ブラウザバックと同じ挙動をするボタンを作るには、javascriptを埋め込みます。

<a href="javascript:history.back();">戻る</a>

hrefにjavascript:history.back();を設定するとリンクでブラウザバックが可能です。

まとめ

リンクは、<a href="(パス)">リンクの表示文字列</a>の形式で書きます。

特に、リンクを開くだけでなく、新しいタブで開く操作は頻繁に利用するので把握しておきましょう!