HTMLのaタグとは？タグの概要と基本的な使い方を解説

<h1>HREFの処理の確認</h1>
<h2>概要</h2>
<p>
 ここでは概要を紹介します<br>
 詳細は以下のリンクをクリックしてください<br>
 <a href="#detail">詳細はこちら</a><br>
 :
 外部サイトの情報は以下のリンクをクリックしてください<br>
 <a href="https://www.example.com">外部情報</a><br>
</p>
<h2 id="detail">詳細情報</h2>
<p>
 ここからは詳細を紹介します<br>
 <br>
 :
</p>

HTMLのbody部分をサンプルで表示しましたが、ページ内リンクは「 <a href="#detail">詳細はこちら</a>」で、外部URLは「<a href="https://www.example.com">外部情報</a>」で記述した部分です。

概要と詳細など情報が多岐に渡る場合などは、id属性を用いることでページ内にハイパーテキストのリンクを作成することができます。外部URLの参照は、よく使用する方法ですので、1度リンクを設定して問題がなければHTMLファイルを再利用するのが良いでしょう。

HTMLで改行する方法は？<br>タグや<p>タグの使い方を解説

HTMLのpタグの適切な使い方とは？brタグとの使い分けも解説

href属性で連絡先を登録する

ウェブページに連絡先を記載するのも、よくある使い方です。メールアドレス、電話番号などを設定できます。指定するには、URLのプロトコルをHTTPから指定のプロトコルに差し換えます。

具体的には、メールアドレスを扱うには ”mailto:” 、電話番号の場合は ”tel:” のように記述します。

<p>
 コンタクト先は以下の通りです<br>
 <a href="mailto:mail-address@example.com">担当メールアドレス</a><br>
 <a href="tel:09012345678">電話番号090-1234-5678</a><br>
</p>

上記の他に、プロトコルとしてデータを扱う ”data:” 、ファイルを読み込む ”file:” 、ファイル転送を行う ”ftp:” 、Secure shellを呼び出す ”ssh” などがURIスキームに定義されています。

JavaScriptコードを実行する ”javascript:” も定義されていますが、セキュリティ保護の観点からブラウザでの使用は注意を払う必要があります。

【参考】：MDN Docs: URI スキーム

HTMLメールの作り方とは？概要や作成の手順、注意すべき点を解説

HTMLでJavaScriptを動かすには？Javaについても解説

その他の属性

その他の属性についても、概要を整理しておきます。

・download属性 download属性が設定されると、リンク先をダウンロードして保存します。例えば、次のように使います。

<a href=”example.jpg” download>画像ダウンロード</a>

・target属性 target属性は、リンク先のURLの表示場所をタブやウィンドウ、<iframe>の名前を指定することができます。target=”_blank”とすると、別のタブやウィンドウにURLをロードします。

target=”_blank”で、追加すべき属性にrelがあります。rel=”noopener”は、windows.openerによる操作を抑制します。最新のブラウザにはこの機能が有効化されているものもあります。

また、古いブラウザでは、rel=”noopener”が判断できない場合があり、 ”noreferrer” を追加してrel=”noopener noreferrer”のように記述します。

ページの操作や実行を防止するためには、古いブラウザのセキュリティ保護のためにrel=”noopener noreferrer”を追加しておくと良いでしょう。具体的には、次のように記述します。

<a href=”example.com” target=”_blank” rel=”noopener noreferrer”>外部のページを表示</a>

rel属性の詳細は、以下のリンクを確認してください。

【参考】：MDN Docs: HTML 属性: rel

aタグをより効果的に表示するには

aタグをより効果的に表示するには、CSSで装飾するのが良いでしょう。例えば、URLのリンクやテキストに下線をつけたり、リンク先の訪問を認識して色を変えるなど、見栄え良く表示することができます。具体的な使い方は、以降でそれぞれの項目を解説していきます。

URLのリンクやテキストに下線をつける

URLのリンクやテキストに下線をつけるには、CSSで ”text-decoration” を指定します。 ”underline” で下線、 ”underline dotted” で点線、 ”wavy underline” で波線となります。色は、 ”text-decoration-color” で行うことができます。

【参考】：MDN Docs: text-decoration 【参考】：MDN Docs: text-decoration-color

リンク先の訪問を識別する

href属性のリンク先を開くと、訪問済みのサイトはリンクの表示色が切り替わっているはずです。このリンク先の訪問は、 ”:visited” で訪問済み、 ”:link” で未訪問時の指定を表します。色は ”color” 、背景色は ”background-color” で指定します。

【参考】：MDN Docs: :visited 【参考】：MDN Docs: :link

ポインターを認識する

HTMLの表示画面でリンク表示にポインターが重なっているか、認識することもできます。 ”:hover” を使うと、マウスのポインターやカーソルがhref属性のリンク上にかざした場合の表示色などを指定することができます。設定できる項目は、 ”:link” や ”:visited” と同様です。

【参考】：MDN Docs: :hover

上記の方法を組み合わせて、コードを作成する

これまでに学んだ装飾の手法を組み合わせて、実際のコードを作成していきます。リンクの訪問前、訪問後、そしてカーソルを合わせた場合の見栄えを調整していきます。

具体的には、ここではリンク先訪問前の背景色はyellow、文字色はblueにします。訪問後は、控えめな色の背景色のlightgray、文字色をindigoにします。カーソルを合わせると、背景色をgoldにし、リンクの下線を波線にしてハイライト表示します。

以下が、実際のサンプルコードです。そのままHTMLの～に入れるか、CSSファイルに格納します。

<style>
a:visited {
  background-color: lightgray;
  color: indigo;
}
a:link {
  background-color: yellow;
  color: blue;
}
a:hover {
  background-color: gold;
  text-decoration: wavy underline;
}
</style>

HTML・CSSとは何か？使い方やできること、独学方法を解説！

HTML・CSSは独学で習得できる？初心者におすすめな最短の勉強方法

【初心者必見】HTMLとCSSの違いは？基本知識と学習方法も解説！