リンクの張り方

概要

ベッド専門通販サイト「イーベッド」をご利用いただきありがとうございます。

当サイトや他のサイト様でもよく使用されている“別サイトへのリンク方法”などの紹介です。

例えば、お気に入りのサイトを紹介したい!といった時に、リンクを張って、ワンクリックで簡単にそのサイトに行けるようにするといった時に使用します。
そんな時に使用するのが aタグです。

今回は、その aタグを使用したリンク方法を覚えていきます。

aタグ

リンクを張る際には、<a href=""></a> と書きます。
このタグは当サイトでも使用されています。

例えば、皆さんもご存知の検索エンジンサイト「Google」にリンクを張る場合は下記のようになります。

<a href="https://www.google.co.jp/">グーグル</a>

グーグル

カタカナで書いたところは、自由に書けるリンクテキストになっていますが、リンク先がどこなのか分かるように書いておけば、そのリンクを利用する人も安心です。

ただ、この書き方の場合だと今開いているサイトを見れなくなってしまいます。
ブラウザのタブを使用したリンクを張る場合は下記のように書きます。

<a href="https://www.google.co.jp/" target="_blank">グーグル</a>

グーグル

サイト内のリンクを張る

自分が作成したページのリンクをサイト内に張る方法も紹介します。

例えば、「Hello」という下記のようなページを作成したとします。
作成したページは保存をして、ブラウザで読み込ませます。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<p>hello from hello.html</p>
</body>
</html>
この「Hello」というページにリンクさせるには

<p><a href="hello.html">Hello</a></p>

と書くと、リンクをクリックした先のURLに hello.html と書かれており、タイトルが「Hello」となっているはずです。

ページ内リンクの作成方法

ページ内の任意の場所にリンクを張って、その部分まで行くことも可能です。
例えば物凄く長いページを作成したとします。
行きたい場所には、分かり易いように「おはよう」と入れてあります。

aタグの Hello 2 のところには #hello2 と書きます。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの基本</title>
<meta name="description" content"HTMLの基本。">
</head>
<body>
<p><a href="#hello2">Hello 2</a></p>
<p>こんにちわ</p>
<p>こんにちわ</p>
<p>こんにちわ</p>
~~~~~~~~~~
~~~~~~~~~~
<p>こんにちわ</p>
<p id="hello2">おはよう<p>
<p>こんにちわ</p>
<p>こんにちわ</p>
</body>
</html>
そして、おはようの部分を<p id="hello2"><p>で囲むとおはようの部分に行けます。

まとめ

  • <a href=" "></a>が基本
  • <a href=" " target="_blank"></a>がタブの使用
  • <a href="# "></a>と<p id=" "><p>でページ内移動
ちょっと分かり難かったと思いますが、これでリンクを張れます。
今回のリンクの方法は、次回にも使用しますので覚えておきましょう。

今後もベッド専門通販サイト「イーベッド」をよろしくお願いします。