「aタグってどうやって使うんだろう」や「リンクのカスタマイズ方法を知りたい」と悩んでいませんか？
ここでは、リンクの作り方やデザインの変更方法などを、分かりやすく解説します。
ホームページで、aタグはとてもよく使われるタグです。
リンクを作るためのタグである「aタグ」を上手に使う方法をお伝えするので、ぜひ最後までご覧ください。
■ 【目次】このページを読んで分かること
- aタグの基礎知識
- aタグの主な属性
- リンクのカスタマイズ方法
- リンクを使うときのテクニック
- 【まとめ】aタグとは
|
aタグの基礎知識
まずは、aタグの基礎知識からお伝えします。
aタグとは
aタグは、リンクを作るためのタグです。
リンクをクリックすると、他のページやウェブサイトに移動することができます。
aタグの基本的な書き方
文章や画像を aタグで囲むことで、リンクを表示することができます。
■ <a> タグの記述例
|
<a href="https://toretama.jp/">ここをクリック</a>
|
■ ホームページ上の表示
aタグを使うときは、必ず「href」という属性を使います。
そして、href属性には、リンク先のURLを指定します。
この例では、「ここをクリック」というテキストがリンクになり、クリックすると「https://toretama.jp/」のページに移動します。
■ 同じホームページ内にリンクを貼る場合
同じホームページ内にリンクを貼るのであれば、URLをすべて指定するのではなく、「ファイル名」を指定しても良いです。
たとえば、同じホームページ内であれば、下記のように「ファイル名」を書くことで、そのページに移動することができます。
|
<a href="tag19.html">ここをクリック</a>
|
aタグの主な属性
ここでは、aタグの主な属性について、お伝えします。
href属性：リンク先のURLを指定する
aタグでいちばん大切な属性は、「href」です。
hrefは、リンク先のURLを指定するための属性です。
リンクをクリックすると、このURLに移動します。
たとえば、次のように書きます。
|
<a href="https://toretama.jp/">ここをクリック</a>
|
この例では、「ここをクリック」というテキストがリンクになり、クリックすると「https://toretama.jp/」に移動します。
target属性：新しいタブでページを開く
target属性は、リンクをクリックしたときにどのようにページを開くかを指定します。
よく使うのは「_blank」という値です。
これを使うと、新しいタブでページを開くことができます。
たとえば、次のように書きます。
|
<a href="https://toretama.jp/" target="_blank">新しいタブで開く</a>
|
この例では、「新しいタブで開く」というリンクをクリックすると、新しいタブで「https://toretama.jp/」が開きます。
rel属性：リンク先の関係を指定する
rel属性は、リンクとリンク先の関係を指定するための属性です。
たとえば、「noopener」や「noreferrer」という値を使うことがあります。
これらはセキュリティやプライバシーを守るために使います。
たとえば、次のように書きます。
|
<a href="https://toretama.jp/" target="_blank" rel="noopener noreferrer">安全なリンク</a>
|
この例では、「安全なリンク」というテキストがリンクになり、クリックすると「https://toretama.jp/」に移動しますが、セキュリティが強化されます。
リンクのカスタマイズ方法
ここでは、リンクのカスタマイズ方法について、お伝えします。
リンクの色を変更する方法
CSSを使うことで、リンクの色や下線、フォントサイズを変えることができます。
たとえば、リンクの色を赤にしたいときは、次のように書きます。
|
<a href="https://toretama.jp/" style="color: red;">赤いリンク</a>
|
この例では、「赤いリンク」というテキストが赤色になります。
ホバーエフェクトの追加方法
ホバーエフェクトは、マウスをリンクの上に置いたときに見た目が変わる効果です。
たとえば、マウスをリンクの上に置いたときに色が赤に変わるようにするには、次のように書きます。
|
<a href="https://toretama.jp/" style="color: blue;" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">ホバーで色が変わるリンク</a>
|
この例では、「ホバーで色が変わるリンク」というテキストが、マウスを置くと赤色に変わり、マウスを離すと青色に戻ります。
リンクの下線（アンダーライン）を消す方法
リンクの下線も、CSSを使って変更できます。
たとえば、リンクの下線（アンダーライン）を消したいときは、次のように書きます。
|
<a href="https://toretama.jp/" style="text-decoration: none;">下線がないリンク</a>
|
この例では、「下線がないリンク」というテキストに、下線が引かれません。
文字のサイズを変更する方法
リンクの文字のサイズも、CSSで変更できます。
たとえば、リンクの文字を大きくしたいときは、次のように書きます。
|
<a href="https://toretama.jp/" style="font-size: 20px;">大きい文字のリンク</a>
|
この例では、「大きい文字のリンク」というテキストが大きく表示されます。
メールアドレスをリンクにする方法
メールアドレスをリンクにするためには、href属性に、「mailto:」を使います。
メールアドレスのリンクをクリックすると、メールアプリが開いて、新しいメールの作成画面が表示されます。
たとえば、メールアドレス「example@example.com」にリンクする場合、次のように書きます。
|
<a href="mailto:example@example.com">ここにメールする</a>
|
電話番号をリンクにする方法
電話番号をリンクにするためには、href属性に、「tel:」を使います。
電話番号のリンクをクリックすると、電話アプリが開いて、指定された番号に電話をかけることができます。
たとえば、電話番号「090-1234-5678」にリンクする場合、次のように書きます。
|
<a href="tel:090-1234-5678">この番号に電話する</a>
|
ページの途中に飛ぶ方法
リンクをクリックすると、ページの途中に移動する方法もお伝えします。
まず、移動したい場所に、下記の一行を記載します。
そして次に、下記のようにリンクを表示させます。
|
<a href="#koko">ページの途中にジャンプ</a>
|
こうすることで、リンクをクリックすると、同じページ内にある <a name="koko"></a> の記述がある場所に、移動することができます。
なお、もし別のページの <a name="koko"></a> の記述がある場所に移動したい場合は、下記のように記述します。
|
<a href="page1.html#koko">page1.htmlページの途中にジャンプ</a>
|
上記のように、ファイル名を指定することで、そのページの途中に移動することができますよ。
なお、上記の「koko」という記述はただの目印であるため、どんな文字列でも問題ありません。
リンクを使うときのテクニック
ここでは、リンクを使うときのテクニックについて、お伝えします。
人が分かりやすい文章でリンクを作ること
リンクを作るときは、人が分かりやすい文章でリンクを作るようにしましょう。
たとえば、リンクのテキストは「ここをクリック」ではなく、リンク先の内容がわかるように書くとよいです。
|
<a href="https://toretama.jp/">ホームページの作り方を動画で学ぶにはこちらから</a>
|
このように書くと、リンクを見ただけで何が書いてあるかがわかります。
リンクを置く位置
リンクは、ページの中で見やすい場所に置くことが大切です。
たとえば、重要なリンクはページの上の方に置くとよいです。
また、リンクの数が多いときは、メニューを作って整理すると見やすくなります。
<nav>
<ul>
<li><a href="https://toretama.jp/page1.html">ページ1</a></li>
<li><a href="https://toretama.jp/page2.html">ページ2</a></li>
<li><a href="https://toretama.jp/page3.html">ページ3</a></li>
</ul>
</nav>
|
このようにメニューを作ると、リンクがたくさんあっても見やすくなります。
リンクの色を工夫する
リンクの色は、ページのデザインにあわせて変えることができます。
そのため、「これはリンクだ」と、人がわかりやすい色を使うことが大切です。
たとえば、青いリンクはよく使われるので、基本的にはリンクの色は青色がおすすめです。
|
<a href="https://toretama.jp/" style="color: blue;">青いリンク</a>
|
【まとめ】aタグとは
aタグとは？リンクの作り方と属性を初心者にわかりやすく解説の内容は、いかがでしたでしょうか？
aタグは、リンクを作るためのタグです。
リンクをクリックすると、他のページやウェブサイトに移動することができます。
ホームぺージで、リンクはとても大切です。
リンクをクリックすることで、いろいろなページを見ることができるからです。
実際に、検索エンジンもリンクは重要視していて、キレイに整理されたホームぺージは回遊率が高くなり、滞在時間も伸びるため、検索エンジンの評価が高くなります。
関連するページへのリンクを入れたり、リンクであることを分かりやすくすることが、良いホームページを作るためのポイントになりますよ。
