CSSのhrefとはどういう意味ですか？

CSSでhref属性を使う場面に出くわし、その意味について疑問に思ったことはありませんか？本記事では、href属性の意味、使い方、そして具体的な使用例を通して、その役割を詳しく解説していきます。

href属性の基本

hrefは "hypertext reference" の略で、直訳すると「ハイパーテキストの参照」となります。 hrefはa（アンカー）タグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なもので、主にhrefでリンク先の場所を指定することが役割になっています。


<a href="https://www.example.com">Example.comへのリンク</a>

上記コード例では、"https://www.example.com"というURLがhref属性値として指定されています。これにより、"Example.comへのリンク" というテキストをクリックすると、Example.comへ遷移します。

href属性には、様々な種類の値を指定することができます。代表的なものを以下の表にまとめました。

値の種類	説明	例
絶対URL	Webサイトのルートからの完全なアドレスを指定	`https://www.example.com/index.html`
相対URL	現在のHTMLファイルからの相対的なアドレスを指定	`./images/logo.png`
フラグメント識別子	同じページ内の特定の要素へのリンクを作成	`#section-2`
メールアドレス	mailto:スキームを使ってメール送信画面を開く	`mailto:[email protected]`
電話番号	tel:スキームを使って電話をかける	`tel:+819012345678`

CSSでは、href属性を主に以下の目的で使用します。

* 外部スタイルシートの読み込み * ウェブフォントの読み込み

外部スタイルシートを読み込む場合、<link>タグのhref属性にCSSファイルのURLを指定します。


<link rel="stylesheet" href="style.css">

ウェブフォントを読み込む場合も同様に、<link>タグのhref属性にフォントファイルのURLを指定します。


<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

href属性は、ハイパーリンクの作成や外部リソースの読み込みなど、ウェブサイト構築において重要な役割を果たします。本記事で解説した内容を参考に、href属性を適切に使用して、より魅力的なウェブサイトを作成しましょう。

<a>: The Anchor element - HTML: HyperText Markup Language | MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

a要素を使用する場合、href属性は必須ではありませんが、リンク先を指定しない場合は、a要素の意味が薄れてしまいます。リンクとして機能させるためには、href属性を指定する必要があります。

基本的には、同じサイト内のリソースを参照する場合は相対パスを、外部サイトのリソースを参照する場合は絶対パスを使用します。相対パスは、ファイル構造が変更された場合にリンク切れが発生する可能性があるため、注意が必要です。

はい、href属性にJavaScriptを含めることができます。ただし、セキュリティ上のリスクがあるため、注意が必要です。JavaScriptを含める場合は、適切なセキュリティ対策を施してください。

その他の参考記事:jquery href 取得