catch-img

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

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

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

目次[非表示]

  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のリンクの貼り方

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

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

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

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を指定すれば個別の変更が可能です。

■関連記事

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

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上で完結する問い合わせフォームが組み込まれたページを用意するとよいでしょう。

■関連記事

  トップページ- Java・フロントエンド研修のジョブサポート 法人向けエンジニア研修実績2500名以上。ジョブサポートは技術力、仕事の成果を出すためのビジネススキルも同時に身に付けます。研修は通学、オンライン・リモートの選択が可能です。Java・フロントエンドのエンジニア技術研修・新人研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート

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

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

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

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

新卒・中途未経験者を採用した
企業におすすめのエンジニア研修サービス

法人研修の実績2700名以上!中小企業~大手上場企業まで幅広く受講してます。
若手、新人エンジニア採用後の Java研修はジョブサポートお任せ下さい
おすすめお役立ち資料02
短期講座(入門5日、基礎10日) Java・フロントエンド (HTML5・CSS・JavaScript) 全国の中小~大手企業まで幅広くお問い合わせ、 受講を頂く人気講座です

運営会社

株式会社ジョブサポート

Java・フロントエンド(HTML5・CSS・JavaScript)の企業研修実績2700名以上を実施。受講満足度は95%。

おすすめお役立ち資料

おすすめお役立ち資料02
おすすめお役立ち資料02

関連記事

研修サービス一覧

プロエンジニア育成コース
新人エンジニア研修
短期通学講座
研修実績
よくあるご質問

ランキング

タグ一覧