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

社内のエンジニア不⾜を解決するたった1つの解決⽅法はこちら

HTMLのリンクの貼り方

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

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

基本は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のみでリンクを設定すると、アンカーテキストにはアンダーラインが引かれ、リンクの色は青になります。アンダーラインを消す方法と、リンクの色を変更する方法を解説します。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

アンダーラインを消す

リンクに限らず、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を指定すれば個別の変更が可能です。

■関連記事

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

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

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

ページ内リンクを作る

同一ページ内における他の部分へリンクを貼る場合は、ジャンプしたい位置に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上で完結する問い合わせフォームが組み込まれたページを用意するとよいでしょう。

■関連記事

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

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

短期5日・10日講座(Java・フロントエンド)研修実績はこちら

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