Webサイトを作成するうえで、他のページへ移動できる「リンク」は欠かせない要素です。HTMLでリンクを設置するには、aタグと呼ばれる専用のタグを使用します。正しくリンクを貼ることで、ユーザーは目的の情報にスムーズにたどり着けるようになります。また、検索エンジンもリンクを通じてページ間の関係性を理解するため、SEO対策としても重要な役割を果たします。本記事では、HTMLリンクの基本的な書き方から、別タブで開く方法、画像にリンクを貼る方法まで、初心者の方にもわかりやすく解説します。実際のコード例を交えながら説明していきますので、ぜひ最後までご覧ください。
- HTMLリンクの基本的な書き方とaタグの構造
aタグとhref属性を組み合わせることで、クリック可能なリンクを作成できます
- 別タブで開くtarget属性の使い方
target=”_blank”を指定することで、リンク先を新しいタブで表示できます
- 画像やボタンにリンクを設定する方法
aタグの中にimgタグを入れることで、画像をクリック可能なリンクにできます
HTMLリンクの基本構造
HTMLでリンクを作成する際には、aタグを使用します。aタグは「anchor（アンカー）」の略で、ページ内の特定の場所や外部のページへ移動するための目印となる要素です。まずは基本的な構造を理解しましょう。
aタグとhref属性の役割
aタグは単体では機能せず、href属性と組み合わせることで初めてリンクとして動作します。href属性には、リンク先のURLやファイルパスを指定します。
基本的な書き方は次のとおりです。aタグの開始タグと終了タグの間に、リンクテキストとして表示したい文字を記述します。
| 要素 | 役割 | 記述例 |
|---|---|---|
| aタグ | リンクを作成する要素 | <a>〜</a> |
| href属性 | リンク先を指定する | href=”https://example.com” |
| リンクテキスト | クリック可能な文字 | サンプルページ |
これらを組み合わせると、<a href=”https://example.com”>サンプルページ</a>のような形になります。
絶対パスと相対パスの違い
href属性に指定するリンク先は、絶対パスと相対パスの2種類の書き方があります。絶対パスはURLをすべて記述する方法で、相対パスは現在のファイルからの位置関係で指定する方法です。
外部サイトへリンクする場合は絶対パスを使用し、同じサイト内のページへリンクする場合は相対パスを使うことが一般的です。相対パスを使うと、サイトのドメインが変わってもリンクが切れにくいメリットがあります。
| パスの種類 | 特徴 | 使用例 |
|---|---|---|
| 絶対パス | 完全なURLを記述 | https://example.com/page.html |
| 相対パス | 現在地からの相対位置 | ./page.html、../folder/page.html |
同じ階層のファイルには「./」を、一つ上の階層には「../」を使用します。
リンクテキストの書き方
aタグで囲んだテキストは、ブラウザ上で青色の下線付きで表示されるのが一般的です。このテキストは「アンカーテキスト」とも呼ばれ、ユーザーがクリックする部分になります。
リンクテキストには、リンク先の内容がわかる具体的な言葉を使うことが推奨されています。「こちら」や「ここをクリック」といった曖昧な表現よりも、「お問い合わせフォーム」や「料金プラン」のように、何のページへ移動するのかが明確にわかる表現を選びましょう。
aタグとhref属性の組み合わせが基本中の基本です。まずはこの構造をしっかり覚えておきましょう。
HTMLリンクを別タブで開く方法
リンクをクリックしたときに、現在のページを維持したまま新しいタブで開きたい場合があります。外部サイトへのリンクや、参考資料へのリンクなどでよく使われる手法です。この動作を実現するには、target属性を使用します。
target属性の基本
target属性に「_blank」を指定すると、リンク先が新しいタブまたは新しいウィンドウで開きます。これにより、ユーザーは元のページを閉じることなく、リンク先のページを閲覧できます。
記述方法は、aタグの中にtarget=”_blank”を追加するだけです。href属性と併記して使用します。
| target属性の値 | 動作 |
|---|---|
| _blank | 新しいタブで開く |
| _self | 現在のタブで開く（初期値） |
| _parent | 親フレームで開く |
| _top | 最上位フレームで開く |
通常のリンクは_selfが初期値となっているため、特に指定しなければ同じタブで開きます。
rel属性でセキュリティ対策
target=”_blank”を使用する際は、セキュリティ上の理由からrel属性も一緒に指定することが推奨されています。rel=”noopener noreferrer”を追加することで、リンク先のページから元のページを操作される危険性を防ぐことができます。
noopenerは、新しく開いたタブが元のページの情報にアクセスすることを防ぎます。noreferrerは、リンク元のURL情報をリンク先に送信しないようにします。
別タブで開くリンクを設定する際のチェックポイント
- target=”_blank”を追加しているか
- rel=”noopener noreferrer”を指定しているか
- 外部サイトへのリンクに適切に使用しているか
別タブ表示の使いどころ
すべてのリンクを別タブで開く設定にするのは、ユーザーにとって使いにくくなる場合があります。別タブ表示が適しているのは、外部サイトへのリンク、PDFファイルなどのダウンロードコンテンツ、フォーム入力中に参照したいヘルプページなどです。
サイト内の別ページへ移動する場合は、同じタブで開くほうがユーザーの操作負担が少なくなります。リンクの目的に応じて使い分けることが大切です。
別タブで開く設定は便利ですが、セキュリティ対策のrel属性を忘れずに追加してください。
バクヤスAI 記事代行では、
高品質な記事を圧倒的なコストパフォーマンスでご提供！
HTMLリンクの応用テクニック
テキストだけでなく、画像やボタンにもリンクを設定できます。また、ページ内の特定の場所にジャンプする「ページ内リンク」や、メールソフトを起動する「メールリンク」なども、aタグを使って実現できます。ここでは実践的な応用方法を紹介します。
画像にリンクを貼る方法
画像をクリックしたときに別のページへ移動させたい場合は、aタグの中にimgタグを入れます。aタグで囲まれた要素はすべてクリック可能になるため、imgタグをaタグの子要素として配置するだけで画像リンクが完成します。
バナー広告やロゴ画像など、視覚的な要素をリンクとして使用したい場面で活用できます。画像リンクを設定する際は、imgタグのalt属性に画像の説明を記述しておくと、画像が表示されない環境でもリンクの内容がわかります。
ページ内リンクの作り方
長いページで目次を作成したり、特定のセクションに直接ジャンプさせたりする場合には、ページ内リンクを使用します。移動先の要素にid属性を付与し、href属性には「#」に続けてそのid名を指定します。
たとえば、<h2 id=”section1″>見出し</h2>という要素に対して、<a href=”#section1″>この見出しへ移動</a>と記述すると、クリック時にその見出しまでスクロールします。
| リンクの種類 | href属性の指定方法 | 用途 |
|---|---|---|
| ページ内リンク | #id名 | 同一ページ内の移動 |
| 別ページの特定位置 | URL#id名 | 他ページの特定箇所へ移動 |
| ページトップへ戻る | #または#top | ページ最上部への移動 |
目次機能を実装する際に、ページ内リンクは非常に便利です。
メールリンクの設定
href属性に「mailto:」を付けてメールアドレスを記述すると、クリック時にメールソフトが起動します。問い合わせ先の案内などで使われることが多い機能です。
さらに、件名や本文をあらかじめ指定することもできます。「?subject=」で件名を、「&body=」で本文を追加でき、ユーザーの入力の手間を軽減できます。
メールリンクで指定できる項目
- 宛先アドレス（mailto:の後に記述）
- 件名（?subject=で指定）
- 本文（&body=で指定）
- CC（&cc=で指定）
電話リンクの設定
スマートフォンでWebサイトを閲覧している場合、電話番号をタップするだけで電話をかけられると便利です。href属性に「tel:」を付けて電話番号を記述することで、電話リンクを作成できます。
電話番号はハイフンなしで記述することが推奨されており、国際電話形式で「+81」から始める書き方もあります。店舗サイトやサービスサイトなど、電話での問い合わせを受け付けている場合に有効な機能です。
画像リンクやページ内リンクを活用すると、ユーザーの利便性が大きく向上しますよ。
バクヤスAI 記事代行では、高品質な記事を圧倒的なコストパフォーマンスでご提供！
バクヤスAI 記事代行では、SEOの専門知識と豊富な実績を持つ専任担当者が、キーワード選定からAIを活用した記事作成、人の目による品質チェック、効果測定までワンストップでご支援いたします。
ご興味のある方は、ぜひ資料をダウンロードして詳細をご確認ください。
サービス導入事例
株式会社ヤマダデンキ 様
生成AIの活用により、以前よりも幅広いキーワードで、迅速にコンテンツ作成をすることが可能になりました。
親身になって相談に乗ってくれるTechSuiteさんにより、とても助かっております。
▶バクヤスAI 記事代行導入事例を見る
HTMLリンクのスタイル設定
aタグで作成したリンクは、CSSを使って見た目をカスタマイズできます。リンクの色を変更したり、下線を消したり、マウスを乗せたときの見た目を変えたりすることで、サイトのデザインに合わせた表現が可能です。
リンクの状態による色分け
リンクには複数の状態があり、それぞれに異なるスタイルを設定できます。CSSの疑似クラスを使用することで、未訪問・訪問済み・ホバー時・クリック中といった状態ごとに見た目を変えられます。
| 疑似クラス | 状態 | 説明 |
|---|---|---|
| a:link | 未訪問 | まだクリックしていないリンク |
| a:visited | 訪問済み | すでにクリックしたリンク |
| a:hover | ホバー時 | マウスカーソルを乗せた状態 |
| a:active | クリック中 | クリックしている瞬間 |
これらの疑似クラスを使用する際は、記述する順番が重要です。link、visited、hover、activeの順で記述しないと、意図したスタイルが適用されない場合があります。
下線の表示切り替え
リンクに表示される下線は、CSSのtext-decorationプロパティで制御できます。下線を消したい場合は「text-decoration: none;」を指定し、下線を追加したい場合は「text-decoration: underline;」を指定します。
ナビゲーションメニューなどでは下線を非表示にすることが多く、本文中のリンクでは下線を残しておくことでクリックできることがわかりやすくなります。ユーザーがリンクを認識しやすいかどうかを考慮して設定しましょう。
ボタン風リンクの作成
aタグにCSSを適用することで、見た目をボタンのように装飾することもできます。背景色、角丸、パディングなどを指定すると、テキストリンクがボタン風の見た目に変わります。
display: inline-block;を指定することで、ボタンの幅や高さを自由に調整できるようになります。ホバー時に背景色を変化させると、クリックできることがユーザーに伝わりやすくなります。
ボタン風リンクを作成する際のCSSプロパティ
- background-color（背景色）
- padding（内側の余白）
- border-radius（角丸）
- display: inline-block（サイズ調整可能に）
CSSでリンクの見た目をカスタマイズすると、サイト全体の統一感が出せます。
HTMLリンク設定時の注意点
リンクを正しく設定しないと、ユーザー体験の低下やSEOへの悪影響を招くことがあります。ここでは、HTMLリンクを設定する際に気をつけるべきポイントを解説します。適切なリンク設定で、使いやすく検索エンジンにも評価されるサイトを目指しましょう。
リンク切れを防ぐ対策
リンク先のページが削除されたり、URLが変更されたりすると、リンク切れが発生してユーザーがページを閲覧できなくなります。定期的にサイト内のリンクをチェックし、リンク切れがないか確認することが重要です。
特に外部サイトへのリンクは、相手側の都合でURLが変わることがあります。リンクチェックツールを活用して、定期的にリンクの状態を確認する習慣をつけましょう。
アクセシビリティへの配慮
視覚に障がいのある方がスクリーンリーダーを使用してWebサイトを閲覧する際、リンクテキストの内容が読み上げられます。「ここをクリック」のような曖昧なリンクテキストは避け、リンク先の内容がわかる具体的な文言を使用しましょう。
また、リンクの色が背景色と区別しにくいと、色覚に特性のある方が認識しづらくなります。十分なコントラストを確保することも大切です。
SEOを意識したリンク設定
検索エンジンはリンクを通じてページ間の関係性を把握します。適切なアンカーテキストを使用することで、リンク先のページの内容を検索エンジンに伝えることができます。
外部サイトへのリンクでrel=”nofollow”を指定すると、検索エンジンにリンク先へ評価を渡さないよう伝えることができます。広告リンクや信頼性が不明なサイトへのリンクには、この属性を検討しましょう。
| rel属性の値 | 用途 |
|---|---|
| nofollow | リンク先への評価を渡さない |
| sponsored | 広告・スポンサーリンク |
| ugc | ユーザー生成コンテンツのリンク |
これらの属性を適切に使い分けることで、SEOの観点でも健全なリンク構造を維持できます。
リンク切れやアクセシビリティの問題は見落としがちなので、定期的なチェックを心がけましょう。
よくある質問
- HTMLリンクで別タブを開くにはどうすればよいですか
-
aタグにtarget=”_blank”を追加することで、リンク先を新しいタブで開くことができます。セキュリティ対策として、rel=”noopener noreferrer”も一緒に指定することが推奨されています。
- 画像をクリックしてリンク先に移動させるにはどう書きますか
-
aタグの中にimgタグを配置します。aタグで囲まれた要素はすべてクリック可能になるため、<a href=”URL”><img src=”画像パス” alt=”説明”></a>のように記述すると、画像がリンクとして機能します。
- ページ内の特定の場所にジャンプするリンクの作り方を教えてください
-
まず、移動先の要素にid属性を付けます。次に、aタグのhref属性に「#」とそのid名を指定します。たとえば、<h2 id=”section1″>見出し</h2>に対して<a href=”#section1″>この見出しへ</a>と記述すると、クリック時にその見出しまでスクロールします。
- リンクの下線を消すにはどうすればよいですか
-
CSSでaタグに対してtext-decoration: none;を指定することで、リンクの下線を非表示にできます。ナビゲーションメニューなどでよく使われる設定です。
まとめ
本記事では、HTMLリンクの基本的な書き方から応用テクニックまで幅広く解説しました。aタグとhref属性を組み合わせることで、テキストや画像をクリック可能なリンクに変換できます。
target=”_blank”を使えば別タブでリンク先を開くことができ、セキュリティ対策としてrel=”noopener noreferrer”を併記することが推奨されています。ページ内リンクやメールリンク、電話リンクなど、aタグにはさまざまな応用方法があります。
リンクを正しく設定することは、ユーザビリティの向上だけでなくSEO対策としても重要です。リンク切れのチェックやアクセシビリティへの配慮を忘れずに、使いやすいWebサイトを構築していきましょう。
