UI HACK 
※本ページはプロモーションが含まれています。
本記事は、「HTMLの初心者なんだけど、aタグの基本的な使い方や属性を知りたいな…」と思いつつ
・特定の属性の使い方を知りたい（例えばhrefやtarget）人
・ページ内リンクや他のページへのリンクの設定方法を知りたい人
・画像やボタンをリンクにしたい人
上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。
この記事では、「前半」では「HTMLのaタグの基本的な使い方」を「後半」では「「絶対パス」と「相対パス」の違いと使い分け」や「HTMLのaタグで画像をリンク」を詳しく解説します。
プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。
それでは、ご一読ください！
HTMLの<a>タグは、ウェブページ内でリンクを作成するのに使います。例えば、「クリックしてください」というテキストをクリックすると、指定したウェブページに移動できます。
この場合、hrefという属性にリンク先のウェブページのアドレスを指定します。リンクのテキストは「クリックしてください google検索に飛びます」という部分です。
基本的なリンクを作成するには、以下の手順に従います。
<a href="https://www.example.com">Visit Example Website</a>この例では、”Visit Example Website”というテキストがリンクになり、
クリックすると”https://www.example.com”に遷移します。
この章では、現場でもよく利用される基本的な属性の使い方を説明します。
href属性
href属性はリンク先のURLを指定します。絶対パスや相対パスを使うことができます。
<a href="https://www.example.com">Visit Example Website</a>target属性
target属性はリンクが開かれる場所を指定します。例えば、新しいタブで開く場合には”_blank”を使います。
<a href="https://www.example.com" target="_blank">Visit Example Website</a>id属性
同じページ内の特定のセクションにリンクするには、href属性に#とセクションのIDを組み合わせます。
<a href="#section2">Go to Section 2</a>その他のaタグで利用できる属性の一覧
| download | リンク先のリソースをダウンロードします。 例：<a href=”file.pdf” download>Download PDF</a> |
| rel | リンク先のリソースとの関係を指定します 例：<a href=”https://www.example.com” rel=”nofollow”>Visit Example Website</a> |
| title | マウスオーバー時に表示されるツールチップを指定します。 例：<a href=”https://www.example.com” title=”Visit Example Website”>Visit</a> |
| class | 要素にクラスを指定します 例:<a href=”https://www.example.com” class=”link-style”>Visit Example Website</a> |
charset属性、coords属性、name属性、rev属性、shape属性はMDN Web Docsでは非推奨になっています。
これらの属性を活用することで、リンクの動作や見た目をカスタマイズできます。これが、使いやすいページを作成する一歩です。ぜひ、実際に試してみてください！
HTMLの<a>タグを使ってリンクを作成する際、href属性を活用することでリンク先を指定できる事は前章で解説しましが。以下では、href属性の使い方について詳しく解説します。
「絶対パス」と「相対パス」の違いを解説！使い分けのポイントとは？
リンク先を指定する際に使われる方法は「絶対パス」と「相対パス」です。それぞれの違いを理解し、使い分けて見て下さい。
絶対パスとは？
絶対パスは、ウェブ上の特定の場所を完全なURLで指定する方法です。これによって、どのページからでも同じ場所にアクセスできます。
以下に例を記載します。
<a href="https://www.example.com/about">About Us</a>このリンクは常に「https://www.example.com/about」にアクセスします。
相対パスとは？
相対パスは、現在のファイルからの相対的な場所を指定する方法です。主に同一サイト内のリンクを作成する際に使います。
<a href="about.html">About Us</a>この場合、about.htmlは現在のディレクトリ内にあるファイルと仮定され、そのファイルにリンクします。
- 絶対パスの使用
外部のウェブサイトへのリンクや、自身のサイトの特定のページへのリンクを作成する場合に適しています。 - 相対パスの使用
同一サイト内の異なるページ間でのリンクを作成する場合に便利です。ファイルの階層構造を考慮する必要があります。
class属性を追加することで、特定のCSSを要素に対して追加でき「色」や「文字サイズ」を変更できたりします。
以下は、class属性を追加する例です。
<a href="https://www.example.com" class="custom-link">Visit Example Website</a>この例では、class属性に“custom-link”という値が指定されています。
以下のCSSを上記のHTMLに対応しております。
.custom-link {
color: pink;
text-decoration: underline;
font-size: 30px;
}実行結果
・color: pink;テキストの色をピンクに設定します。
・text-decoration: underline;テキストに下線を追加します。
・font-size: 30px;テキストのフォントサイズを30ピクセルに設定します。
HTMLにおいて、画像をリンクとして使用する際、<a>タグを使います。この場合、必ず画像にalt属性を追加しましょう。
以下は、画像をリンクとして使用する基本的なHTMLの例です。
<a href="https://www.example.com">
<img src="image.jpg" alt="代替テキスト">
</a>この例では、<a>タグでリンク先のURLを指定し、その内部に<img>タグを配置しています。<img>タグにはsrc属性で画像のファイルパスを指定し、alt属性には画像の代替テキストを記述します。
alt属性の役割と必要性
altは、画像の代替テキストを指定する属性です。以下のように使います。
<img src="example.jpg" alt="代替テキスト">なぜ必要なのか
- アクセシビリティ向上
alt属性は、画像が読み込めない場合や視覚障害者向けの補助技術を利用する場合に、画像の内容を伝える重要な手段です。 - SEO（検索エンジン最適化）
検索エンジンは、画像のalt属性を読み取り、コンテンツの理解に役立てます。適切な代替テキストを提供することで、検索結果への影響を与えることがあります。 - 遅延読み込みの補完
ページが読み込まれる際に、画像が遅れて表示される場合でも、alt属性が表示されるため、ユーザーにとって理解可能です。
alt属性は、アクセシビリティを向上させ、SEOを強化し、画像が正しく理解されることを保証します。すべての画像に適切な代替テキストを提供
今回は、HTMLのaタグでリンクを貼る方法についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。
- HTMLのaタグの基本的な使い方
- aタグの属性（href、target、idなど）の使い方
- aタグのhref属性を使ったリンク先の指定方法
- aタグにclass属性を追加する方法
- aタグで画像をリンクする場合はalt属性
もう一度、最初から「HTMLのaタグの基本的な使い方を解説します。」を読む↑
Twitterも見てみる？
