【HTML初心者向け】はじめてでもわかる!HTMLでリンクを貼るaタグの使い方!



【HTML初心者向け】はじめてでもわかる!HTMLでリンクを貼るaタグの使い方!

HTMLでサイトを作るときに必須のリンク。書き方はとっても簡単です。HTML初心者のあなたにもすぐ書けますよ!今日、覚えてしまいましょう!

目次
  1. HTMLでリンクを設定する意味
  2. リンクを設定する際に使うタグ 解説!
  3. 絶対URL・相対URLの使い分け
  4. リンクを貼ろう!覚えておきたい aタグの書き方8個!
  5. 同じウインドウでひらくリンク
  6. 別ウインドウでひらく
  7. 同じページ内で移動する
  8. 画像にリンクをはる
  9. リンク先をファイルにする
  10. リンクに下線を表示しない
  11. リンクを好きな色に変える
  12. リンクをボタンにする
  13. まとめ

HTMLでリンクを設定する意味

image

たとえばこのようなクリックできるテキストをリンクといいます。インターネット上のHTMLサイトでは、メニュー画面からリンクをどんどんたどっていって、他のページへ移動します。リンクは、サイトを見に来てくれた人が必要な情報にたどり着くための、道標やドアの役割を担っているのです。

リンクを設定する際に使うタグ 解説!

リンクを貼るには、aタグを使います。"(ダブルクォーテーション)で囲んだ部分に、リンク先のURLを書きます。aタグで挟まれた部分に、リンクとして表示したい文字(アンカーテキスト)を書きます。

<a href= "xxxx.html" >アンカーテキスト</a>

上記のタグを実際のHTMLで表示すると、このようになります。

絶対URL・相対URLの使い分け

image リンクにつかう URL (xxx.html の部分) の書き方は、大きく分けて絶対URL相対URLの2種類があります。

相対URLは、現在開いているページを基準にして、どのページに移動するかを記述する書き方です。 それに対して絶対URLとは、「http〜」からのインターネット上のアドレスを完全に記述する書き方です。

リンク全てに「http://www.xxxxx〜」と書いてしまうと、HTMLのテストを別の環境で行う場合や、ファイルを移動したときの変更が大変になってしまいます。このため、自分のサイト内のリンクは通常*相対URL*で記述します。

他のサイトへのリンクは、httpから始まる絶対URLで記述してくださいね。

 

リンクを貼ろう!覚えておきたい aタグの書き方8個!

image ここからは、具体的にどんな使い方をするのか、解説していきます!

同じウインドウでひらくリンク

<a href= "xxxx.html" >同じウインドウで開くリンク</a>

基本のタグで記載すると、ブラウザの同じウインドウで新しいページが開きます。ウインドウが複数開かないので、サイトを見ている人はサクサクとネットサーフィンができますが、リンク元のサイトに戻りたくても履歴をたどる必要があり、戻りづらいという面もあります。

別ウインドウでひらく

<a href= "xxxx.html" target="_blank" >別ウインドウで開くリンク</a>

target="_blank"をタグにつけると、開いた新しいウインドウにリンク先のページが表示されます。リンク元のページを別ウインドウに残す事ができるので、サイトを見ている人にまた戻ってきてもらいたい場合や、複数のページを同時に見たほうが便利な場合などに使うと良いでしょう。

ただし、たくさんのウインドウが開きすぎると、サイトを見ている人に不快な印象を与えてしまうこともあります。多用には注意しましょう。

同じページ内で移動する

同じページの指定した場所にリンクをはることもできます。 スマートフォン対応ページで特にここ数年よく見る、長〜い1枚のHTMLページ(ランディングページ)などでもよく使われていますね。

リンク
<a href= "#xxx" >同じページの指定箇所に飛ぶリンク</a>
指定箇所
<h1 id="xxx">

リンクを押して移動したい場所のタグに、id=を使って名前をつけておきます。名前をつけるタグは、hタグでもpタグでもdivタグでもかまいません。

サンプルコード

<div class="tagtag">
サンプル:<br>
この記事の<a href="#tag1"><b>まとめ</b>に飛ぶリンク</a>
</div>

表示結果

サンプル:
この記事のまとめに飛ぶリンク

 

画像にリンクをはる

リンクは、テキストだけでなく画像にも貼ることができます。

<a href= "xxx.html" alt="画像にリンク"> <img src="zzz.jpg"> </a>

画像を表示するタグを、アンカーテキストを書き込んでいた場所に記載します。すると、画像をクリックすると指定したページに飛ぶリンクになります。

サンプルコード

<div class="tagtag">
サンプル:<br>
まとめに飛ぶ画像は
<a href="#tag2"><img src="link_sample.jpg"></a>
こちら
</div>

表示結果

サンプル:
まとめに飛ぶ画像はこちら

リンク先をファイルにする

PDFやテキストファイル、Word、Excelなどのファイルをリンク先に指定することができます。サンプルファイルや、資料などをダウンロードさせたい場合に活用できそうですね。

個人情報の記載されたファイルは、インターネットに置いてはいけませんよ。

サンプルコード

<div class="tagtag">
html_link_sample.pdf:<br>
<a href="html_link_sample.pdf">ダウンロードはこちら</a>
</div>

リンクに下線を表示しない

リンクの線を、CSS(スタイルシート)で変更することができます。スタイルシートとは、HTMLで記載した文字や画像の配置や色を細やかに設定するためのコードです。

サンプルコード

<!-- ここからスタイルシート -->
<style>
/* リンクの線をなくす変更 */
a.sample1 {
  text-decoration: none;
}
</style>
<!-- スタイルシートここまで -->

<a href="xxx.html" class="sample1">下線を表示しないリンク</a>
<a href="xxx.html" >変更を設定していないリンク</a>

表示結果

リンクには「sample1」という名前をつけたスタイルシートの設定を作り、指定したリンクだけ下線を表示しないようにしています。

リンクを好きな色に変える

スタイルシートによって、リンクの色も変更できます。

サンプルコード

<!-- ここからスタイルシート -->
<style>
/* リンクの色を変更 */
a.sample2 {
  color:red;
  text-decoration: none;
}

/* マウスを載せたときの色を変更 */
a.sample2:hover {
  color:#orange;
}
</style>
<!-- スタイルシートここまで -->

<a href="xxx.html" class="sample2">文字を赤にし、下線を表示しないリンク</a>
<a href="xxx.html" >変更を設定していないリンク</a>

表示結果

文字を赤にし、下線を表示しない
変更を設定していないリンク

リンクを赤文字にして、マウスをのせるとオレンジになるようにしました。リンクには「sample2」という名前をつけたスタイルシートの設定を作り、指定したリンクだけ色が変わるようにしています。

リンクをボタンにする

上記の色や線を変更するCSSを応用することで、リンクをボタンのような見た目にすることもできます!他にも色々な見た目に変更できるので、調べて試してみてくださいね。

サンプルコード
<!-- ボタンにするスタイルシート ここから -->
<style>
.sample3_btn {
    display: inline-block;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    color: white;
    background: pink;
    font-weight: bold;
    border: solid 4px pink;
    border-radius: 8px;
}

.sample3_btn:hover {
    background: white;
    color: pink;
}
</style>
<!-- ボタンにするスタイルシート ここまで -->

<a href="#tag1" class="sample3_btn">sample</a>

表示結果

sample

おすすめ弊社記事:
もう悩まない!コピペで簡単CSSボタンデザインと便利なジェネレータ8選
【CSS初心者向け!】角を丸くする方法をコードを交えて詳しく解説

まとめ

リンクの貼り方はわかりましたか?コピー&ペーストして、リンク先(src=".....")を書き換えることから、まずは始めてみましょう!

のりぴよ
この記事を書いた人
のりぴよ
\無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp