catch-img

HTMLのリンクの張り方を若手、新人向けに解説。タグの使い方と注意点

Webページからアクセスできる情報資源を参照可能にするために、リンクの設定は欠かせない技術といえます。リンクの貼り方を覚えれば、ユーザーにとってより便利なページを作成できるでしょう。タグの使い方やデザインの変更方法など新人エンジニア、社内HPを管理、修正する部の担当者向けに解説します。

目次[非表示]

  1. 1.HTMLのリンクの貼り方
    1. 1.1.基本はaタグを使う
    2. 1.2.別タブでリンクを開く場合
    3. 1.3.画像にリンクを設定する
  2. 2.リンクのデザインを変える
    1. 2.1.アンダーラインを消す
    2. 2.2.色を変える
  3. 3.Webサイト以外へのリンクの作成方法
    1. 3.1.ページ内リンクを作る
    2. 3.2.電話番号へのリンクを作る
    3. 3.3.メールアドレスへのリンクを作る
  4. 4.リンクを活用し、Webサイトをより便利にしよう

HTMLのリンクの貼り方

まずは、基本的なリンクの書き方を覚えておきましょう。リンク先のページを別タブで開く方法や、画像にリンクを貼る方法も解説します。

基本はaタグを使う

HTMLでリンクを貼る場合は、aタグを以下のように使います。

<a href="リンク先URL">アンカーテキスト</a>

アンカーテキストとは、ブラウザ上に表示されるテキストのことです。例えば、あるWebサイトのトップページにリンクを貼りたい場合は、以下のように記述します。

<a href="リンク先のURL">コチラのサイト</a>

ブラウザ上では『コチラのサイト』のみが表示され、一般的にはリンクであることを示すアンダーラインが引かれます。

別タブでリンクを開く場合

前項で解説した基本的な方法では、アンカーテキストをクリックするとページがそのままリンク先のページに遷移します。

現在のページを残したまま、リンク先を別タブで開きたい場合の書き方は以下の通りです。

<a href="リンク先のURL" target="_blank">コチラのサイト</a>

href=""とtarget="_blank"の間には半角スペースを入れましょう。

別タブにジャンプするリンクを必要以上に設定すると、リンクを開くたびにタブが増えていくため、ユーザーがうっとうしさを感じてしまいかねません。使いすぎには注意が必要です。

画像にリンクを設定する

HTMLで画像を表示させるためには、以下のように画像タグ<img>を使います。

<img src="画像ファイル名">

src属性には、ファイル名やウェブ上の画像を指定することが可能です。画像にリンクを貼る場合は、aタグで<img>タグを囲います。

<a href="リンク先のURL"><img src="画像ファイル名"></a>

テキストにリンクを貼る場合のアンカーテキストを画像に置き換えれば、画像にリンクを設定できるということになります。

■関連記事

  HTMLで画像を表示する方法解説。imageタグの使い方と注意点 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート 画像が適切に配置されているWebページは、テキストのみのページに比べ、格段に見た目が良くなります。HTMLファイルで画像を表示するには、imageタグを使うのが基本です。タグの使用方法や、画像の位置・大きさを変える方法などを解説します。 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート


リンクのデザインを変える

HTMLのみでリンクを設定すると、アンカーテキストにはアンダーラインが引かれ、リンクの色は青になります。アンダーラインを消す方法と、リンクの色を変更する方法を解説します。

アンダーラインを消す

リンクに限らず、HTMLで記述した要素のデザインを変更する場合は、CSSを使うのが一般的です。リンクのアンダーラインを消す場合は、CSSコードを以下のように記述します。

a {
 text-decoration:none;
}

この場合、ページ内にある全てのリンクからアンダーラインが消えます。特定のリンクのみに設定したい場合は、該当リンクのaタグに任意のclass名をつけ、CSSで個別に指定しましょう。

<HTMLコード>
<a class="noline" href="リンク先のURL">下線なし</a>
CSSコード>
.noline {
 text-decoration:none;
}

色を変える

リンクの色を青から他の色に変えたい場合も、CSSで設定できます。

CSSコード>
a {
 color: red;
}

redの部分には、blueやgrayなど色を名称で直接指定できるほか、#FF0000のようなカラーコードでも指定できます。

特定のリンクのみ色を変更したい場合は、アンダーラインを消す方法と同様に、該当するリンクにclassを指定すれば個別の変更が可能です。

フロントエンド(HTML・CSS・JavaScript)入門5日ー株式会社ジョブサポート

Webサイト以外へのリンクの作成方法

Webサイトで設定できるリンクは、外部ページだけではありません。ページ内リンク・電話番号へのリンク・メールアドレスへのリンクを設定する方法を解説します。

ページ内リンクを作る

同一ページ内における他の部分へリンクを貼る場合は、ジャンプしたい位置にidを設け、リンクのhref=""内に『#id』を記述します。

<a href="#company">会社概要へジャンプ</a>

~略~

<h2 id="company">会社概要</h2>

この場合、『会社概要へジャンプ』にリンクが貼られ、クリックすると同一ページ内の見出し『会社概要』へジャンプします。冒頭の目次でよく使われる手法です。

電話番号へのリンクを作る

スマホやタブレットなどでは、リンクが貼られた電話番号をタップすれば、電話をかける画面に遷移します。

特定の電話番号にリンクを貼る場合は、以下のようにhref=""内に『tel:電話番号』を記述しましょう。

電話でのお問い合わせは<a href="tel:05099887766">050-9988-7766</a>まで

href=""内に書く電話番号はハイフンがあっても構いませんが、数字もハイフンも半角で書くことが重要です。

メールアドレスへのリンクを作る

特定のメールアドレスにリンクを設定する場合は、href="mailto:メールアドレス"と書きます。

<a href="mailto:メールアドレス">メールでのお問い合わせはコチラ</a>

リンクをクリックすると自動でメーラーが起動し、メールアドレスが送信先に入力された状態でメールの新規作成画面が開きます。

メールアドレスへのリンクは、勝手にメーラーが起動することから、うっとうしさを感じるユーザーが多いのも事実です。

Webサイトで問い合わせを受け付けたい場合は、Web上で完結する問い合わせフォームが組み込まれたページを用意するとよいでしょう。

■関連記事

  HTMLとCSSをマスターしよう。作成の基礎や学習方法を紹介 | 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート HTMLとCSSは、Webサイトを作成するために開発されたプログラミング言語です。それぞれの書き方や関係性を知ることが、Webサイト作成の学習における第一歩といえるでしょう。作り方の基礎や大まかな流れ、おすすめの学習方法を紹介します 株式会社ジョブサポート-新人研修・未経験者向けエンジニア研修(Java,JavaScript)のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

リンクを活用し、Webサイトをより便利にしよう

Webサイト内でリンクをうまく活用すれば、ユーザーにとってより使い勝手のよいサイトになります。

下線を消したり色を変えたりといった、デザイン面で違いを出せるよう、CSSの知識も養っておきましょう。

ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)の受け入れを行っており、助成金を活用すれば費用負担を軽減して研修受講ができるのでお気軽にお問い合わせ下さい。


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。