HTMLリンクの貼り方(URLの埋め込み方)を簡単に解説

HTMLリンクの貼り方(URLの埋め込み方)を簡単に解説

公開： 更新：
CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座

目次
  1. 基本的なHTMLリンクの貼り方
  2. 同じウインドウで開くHTMLリンク
  3. 別ウインドウで開くHTMLリンク
  4. 同じページ内を移動するHTMLリンク
  5. 画像にHTMLリンクを貼る
  6. HTMLリンク先をファイルにする
  7. HTMLリンク先をメールアドレスにする
  8. HTMLリンク先を電話番号にする
  9. HTMLリンクのデザインを変更する方法
  10. リンクに下線を表示しない
  11. リンクを好きな色に変える
  12. リンクをボタンにする
  13. HTMLリンクを貼る場合の注意点
  14. 絶対URL・相対URLの使い分け
  15. 別タブで開くかどうかの判断
  16. rel="noopener noreferrer"を書くべきかどうか

基本的なHTMLリンクの貼り方

HTMLでリンクを設定するには「<a>タグ」を使用します。<a>タグはアンカー(anchor)の略であり、ウェブページ間を繋ぐ役割を果たしています。基本的な構造は、href属性にリンク先のURLを指定し、開始タグと終了タグの間にリンクテキスト(アンカーテキスト)を記述する形式です。

リンクを貼る際の記述は「<a href="リンク先のURL">表示したいテキスト</a>」という構造になります。リンクテキストはクリックした先のページ内容を具体的に示すことが推奨されており、「こちら」や「クリックしてください」のような曖昧な表現ではなく、リンク先の情報が明確にわかる内容にすることでSEO効果も期待できます。

次セクションでは、HTMLリンクの貼り方について解説していきます。

  • 同じウインドウで開くHTMLリンク
  • 別ウインドウで開くHTMLリンク
  • 同じページ内を移動するHTMLリンク
  • 画像にHTMLリンクを貼る
  • HTMLリンク先をファイルにする
  • HTMLリンク先をメールアドレスにする
  • HTMLリンク先を電話番号にする

同じウインドウで開くHTMLリンク

最も基本的なリンクの設定方法であり、クリックすると現在開いているウインドウやタブでリンク先のページが表示されます。ユーザーは複数のウインドウを管理する必要がないため、サクサクと閲覧できる利点がありますが、リンク元のページに戻るには履歴をたどる必要があります。

<a href="https://example.com">サンプルサイト</a>

別ウインドウで開くHTMLリンク

リンク先を新しいウインドウまたは別のタブで開くには、target="_blank"属性を追加します。リンク元のページを残したまま新しいページを開くことができるため、外部サイトへのリンクや資料を参照してもらいたい場合に活用されます。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

target="_blank"を使用する際は、rel="noopener noreferrer"属性を必ず追加することが推奨されます。設定することによって、リンク先のページで負荷の高いJavaScriptが実行された場合でもリンク元のページのパフォーマンスが低下することを防ぎ、セキュリティ面の脆弱性も回避できます。

同じページ内を移動するHTMLリンク

ページ内リンクは、同一ページ内の特定の位置にジャンプする機能です。長いページやランディングページなどでよく使用されており、目次から各セクションへの移動を可能にします。

<a href="#section1">セクション1へ移動</a>

<h2 id="section1">セクション1</h2>
<p>セクション1の内容</p>

まず移動先となる要素にid属性を設定し、リンクのhref属性には#に続けてid名を指定します。id属性で設定する文字列は同一ページ内で重複してはならず、半角英数字で記述することが求められます。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

画像にHTMLリンクを貼る

画像をクリックして、リンク先に移動させることも可能です。バナー広告やボタン画像などで頻繁に使用される手法で、<a>タグの中に<img>タグを配置することで実現できます。

<a href="https://example.com">
  <img src="image.jpg" alt="サンプル画像の説明">
</a>

画像にリンクを設定する場合、alt属性を指定することが重要です。alt属性はアンカーテキストの代わりとなり、画像が表示されない環境でもリンク先の内容が伝わるようにするためです。画像ファイルのサイズは適切に調整し、ページの読み込み速度に悪影響を与えないようにする配慮が必要です。

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

PDFやWordファイル、Excelファイルなどをリンク先に指定することによって、ユーザーにファイルをダウンロードさせることができます。

<a href="document.pdf">資料をダウンロード</a>

<a href="report.pdf" download="レポート2024">レポートをダウンロード</a>

download属性を追加すると、ファイルをブラウザで開く代わりに直接ダウンロードさせることができます。download属性に任意のファイル名を指定することによって、ダウンロード時のファイル名を変更することも可能です。ただし、PDFファイルはスマートフォンでは非常に見づらいため、可能な限りテキストとしてウェブページ上に掲載することが推奨されます。

HTMLリンク先をメールアドレスにする

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

<a href="mailto:info@example.com">お問い合わせはこちら</a>

href属性にmailto:を記述し、その後にメールアドレスを指定します。ただし、予期せずメーラーが起動することをユーザーが不快に感じる場合もあるため、ウェブ上で完結する問い合わせフォームを用意する方が親切です。

HTMLリンク先を電話番号にする

電話番号へのリンクを設定すると、スマートフォンやタブレットでタップした際に、自動的に電話をかける画面に遷移します。

<a href="tel:0312345678">電話する: 03-1234-5678</a>

href属性にtel:を記述し、その後に電話番号を指定します。電話番号はハイフンを入れても入れなくても機能しますが、すべて半角で記述する必要があります。アンカーテキスト部分はハイフンを入れて見やすくすることが一般的です。

HTMLリンクのデザインを変更する方法

HTMLのみでリンクを設定した場合、基本的には「青色文字＋下線」で表示されます。サイトのデザインに合わせてリンクの見た目を変更するには、CSS(スタイルシート)を使用します。CSSを活用することによって、リンクの色や下線の有無、ボタンのようなデザインなど、さまざまなスタイルを適用できます。

リンクのスタイルを変更する際は、リンク前(未訪問)、リンク後(訪問済み)、マウスオーバー時の3つの状態を考慮することが推奨されます。これらの状態を適切に設定することによって、ユーザーはリンクであることを認識しやすくなり、既に訪問したページも判別できるようになります。

擬似クラス 説明
a 通常のリンク状態を指定
a:visited 訪問済みのリンク状態を指定
a:hover マウスオーバー時の状態を指定

【PR】『Python』を学べる企業・個人向けのプログラミングコース

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

リンクに表示される下線を消すには、CSSのtext-decorationプロパティを使用します。リンクの下線はデフォルトで表示されるため、デザイン性を重視する場合や画像リンクなどでは下線を非表示にすることが一般的です。

<style>
a {
  text-decoration: none;
}
</style>

<a href="https://example.com">下線を表示しないリンク</a>

上記のコードではページ内のすべてのリンクから下線が消えます。特定のリンクのみに適用したい場合は、該当する<a>タグにclass属性を追加し、CSSで個別に指定する方法が有効です。マウスオーバー時だけ下線を表示させることも可能であり、a:hoverにtext-decoration: underline;を指定することで実現できます。

<style>
a.no-underline {
  text-decoration: none;
}
a.no-underline:hover {
  text-decoration: underline;
}
</style>

<a href="https://example.com" class="no-underline">通常は下線なし、ホバー時に表示</a>

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

リンクの色を変更するには、colorプロパティを使用します。色はカラーコード(#FF0000など)または色名(redやblueなど)で指定でき、サイトのデザインに合わせた配色を実現できます。リンク前や訪問済み、マウスオーバー時でそれぞれ異なる色を設定することが可能です。

<style>
a {
  color: #1b8e00;
}
a:visited {
  color: #600671;
}
a:hover {
  color: #e53f03;
}
</style>

<a href="https://example.com">色を変更したリンク</a>

リンクの色は一般的に未訪問時は青、訪問済みは紫が標準とされています。大きく変えすぎるとユーザーがリンクであることに気づかない可能性があるため、リンクだと認識できる範囲での変更が推奨されます。特定のリンクのみ色を変更したい場合は、class属性を使用して個別に指定する方法が便利です。

<style>
a.custom-color {
  color: #ff6b6b;
  text-decoration: none;
}
a.custom-color:hover {
  color: #ff3838;
}
</style>

<a href="https://example.com" class="custom-color">カスタムカラーのリンク</a>

リンクをボタンにする

CSSを活用することによって、リンクをボタンのような見た目にカスタマイズできます。ボタンスタイルのリンクはクリックを促す効果があり、コール・トゥ・アクション(CTA)などで頻繁に使用されます。ボタン化するには、背景色やパディング、角丸などのスタイルを組み合わせて適用します。

<style>
.button-link {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1b8e00;
  color: #ffffff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
}
.button-link:hover {
  background-color: #0d5e00;
}
</style>

<a href="https://example.com" class="button-link">ボタン風リンク</a>

<a>タグはインライン要素であるため、一部のCSSプロパティが効きません。display: inline-block;またはdisplay: block;を指定することによって、パディングや幅などのブロック要素向けのスタイルが適用可能になります。マウスオーバー時に背景色を変化させることによって、ユーザーにクリック可能であることを視覚的に伝えることができます。

<style>
.fancy-button {
  display: inline-block;
  padding: 15px 30px;
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.fancy-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
</style>

<a href="https://example.com" class="fancy-button">グラデーションボタン</a>

HTMLリンクを貼る場合の注意点

HTMLリンクを適切に設定することは、ユーザビリティとSEOの両面において重要です。リンクの貼り方を間違えるとユーザーが必要な情報にたどり着けなくなるだけではなく、検索エンジンからの評価が下がる可能性もあります。このセクションでは、リンクを設定する際に注意すべき3つのポイントについて解説します。

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

URLの指定方法には「絶対URL」と「相対URL」の2種類があり、リンク先に応じて適切に使い分けることが求められます。絶対URLはhttps://から始まる完全なウェブアドレスを指定する方法であり、外部サイトへのリンクでは必ず絶対URLを使用します。相対URLは現在開いているページを基準として、リンク先のファイルの位置を指定する方法であり、同一サイト内のページ間リンクに適しています。

<!-- 絶対URL: 外部サイトへのリンク -->
<a href="https://example.com/page.html">外部サイトへ</a>

<!-- 相対URL: 同一サイト内のリンク -->
<a href="about/company.html">会社概要</a>
<a href="../index.html">トップページ</a>

自分のサイト内のリンクを絶対URLで記述すると、テスト環境での動作確認やファイル移動時の変更作業が大変になってしまいます。そのため、自サイト内では相対URLを使用し、他のサイトへのリンクには絶対URLを使用するという使い分けが推奨されますが、WordPressなどのCMSを使用している場合は、記事作成時に絶対URLで指定する方が管理しやすい場合もあります。

別タブで開くかどうかの判断

target="_blank"を使用して別タブでリンクを開くかどうかは、リンク先の内容やユーザー体験を考慮して判断する必要があります。外部サイトへのリンクやPDFファイル、デザインが大きく異なるページなどは別タブで開くことが適している場合が多いです。一方、サイト内の通常のページ遷移では、同じタブで開く方がユーザーにとって自然な動作になります。

  • 外部サイトへのリンク: 別タブで開くことを検討
  • PDFや画像などのファイル: 別タブで開くことを推奨
  • サイト内の通常のページ遷移: 同じタブで開くことを推奨
  • 参考資料として見てもらいたいページ: 別タブで開くことを検討

ただし、すべてのリンクを別タブで開くように設定してしまうと、クリックするたびにタブが増えていくため、ユーザーにとって煩わしく感じられます。別タブで開く必要性がない場合は無理に設定せず、ユーザーに選択の自由を残すことが重要です。スマートフォンでは別タブではなく別ウインドウとして開かれることも考慮しましょう。

rel="noopener noreferrer"を書くべきかどうか

target="_blank"で別タブを開く際は、セキュリティとパフォーマンスの観点からrel="noopener noreferrer"属性を追加することが強く推奨されます。この属性を設定しないと、リンク先のページがリンク元のページにアクセスできる状態になり、悪意のあるサイトがリンク元を操作する可能性があります。

<!-- 推奨: rel属性を指定 -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部サイト</a>

<!-- 非推奨: rel属性なし -->
<a href="https://example.com" target="_blank">外部サイト</a>

noopenerはリンク先のページからリンク元のページへのアクセスを防ぎ、noreferrerはリンク元の情報をリンク先に送信しないようにします。特にnoopenerはパフォーマンス面でも効果があり、リンク先で負荷の高いJavaScriptが実行されてもリンク元のページに影響を与えません。現在の多くのブラウザではtarget="_blank"を指定すると、自動的にnoopenerが適用されますが、古いブラウザでも確実に動作させるため明示的に記述することが推奨されます。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

CodeCampが提供するDX人材育成が可能なプログラミングやITが学べる公開講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプが提供する無料で学べるプログラミングスクール講座 - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア 配属3ヶ月で30%の生産性向上を実現するいよぎんコンピュータサービスの新人研修に迫る - IT・プログラミングを知って学べるコネクトメディア 金融業界の業務効率化を加速するニッセイアセットマネジメントの生成AI×GAS活用研修事例 - IT・プログラミングを知って学べるコネクトメディア 【製造業のDX人材育成事例】デジタル人材の即戦力化を実現する、日本ガイシ株式会社の異動者向オンボーディング研修 - ITやプログラミングを知って学べるコネクトメディア フューチャーアーキテクト株式会社が実現した新入社員向けIT研修プログラムでタスクフォース制度が主体的な学びと成長を生み出す - IT・プログラミングを知って学べるコネクトメディア コードキャンプDX人材育成研修 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【IT新入社員研修】オンラインとオフラインの最適バランスを実現したFutureOneの導入事例 - IT・プログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/【新入社員研修】柔軟なハイブリッド型Java研修で実現した新卒20名の成長と成果｜サークレイス株式会社 - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修｜株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩｜株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア

新着記事

ALL
IT NEWS
ITコラム
IT用語集
2025年 12月 24日
日本パレットレンタル株式会社がウェビナー開催、DD Plusで複写式伝票の課題を解決
2025年 12月 24日
日本経営協会が英文契約の実務ウェビナーを開催、読解力と作成力を体系的に解説
2025年 12月 24日
アスタミューゼが製造業向けウェビナーを再開催、データ駆動型経営での企業価値最大化を解説
2025年 12月 24日
クリークアンドリバー社が無料デザインセミナーを開催、ブランディングやCI/VIの基礎知識を解説
2025年 12月 24日
株式会社クリーク･アンド･リバー社がセミナー開催、3DCGの多様なキャラクター表現を比較解説
2025年12月24日

日本パレットレンタル株式会社がウェビナー開催、DD Plusで複写式伝票の課題を解決
2025年12月24日

日本経営協会が英文契約の実務ウェビナーを開催、読解力と作成力を体系的に解説
2025年12月24日

アスタミューゼが製造業向けウェビナーを再開催、データ駆動型経営での企業価値最大化を解説
2025年12月24日

クリークアンドリバー社が無料デザインセミナーを開催、ブランディングやCI/VIの基礎知識を解説
2025年12月24日

株式会社クリーク･アンド･リバー社がセミナー開催、3DCGの多様なキャラクター表現を比較解説

 IT NEWS
ITマガジン
IT用語集

対象者別で探す

全ての研修を確認する
CodeCampKIDSフランチャイズ募集
全てのコースを確認する

子供（小学生・中学生・高校生）向け
プログラミング教室検索する

子供（小学生・中学生・高校生）がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供（小学生・中学生・高校生）
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する