【イラスト付き】hrefとは？用語の意味やURLの指定方法について解説！

ねえ、ブルーってhrefについて詳しい？

あんまりよくわからなくて、リンクを貼るときのために知っておきたいから教えてほしいな！

hrefとは、「エイチレフ」と読み、hypertext reference（ハイパーテキストリファレンス）の略なんだ

数種類あるaタグ属性の中でも最も重要で、リンク先を指定する役割があるんだ

hrefはaタグと一緒に、「＜a href="○○"＞●●＜/a＞」という形式で使用されるんだよ

○○ところはリンク先のURLを入力して、●●のところにはアンカーテキスト（リンクの内容を表すテキスト）を入力するよ

アンカーテキストだけではなく、画像のリンク設定もできるんだ

リンク先は主に次のようになるよ

aタグにはtarget属性やtitle属性、download属性といった属性があるんだよ

target属性は、リンクをクリックした時にどのウィンドウで開くのかを、次の4つの方法を設定できるよ

title属性は、何のリンクなのかを示すもので、ウェブサイトでtitle属性に表示された説明文が表記されるようになっているんだ

「＜a href="○○" title＝"△△"＞●●＜/a＞」のようにコードを書くよ

○○はリンク先のURL、△△に説明文、●●にアンカーテキストを入れてね

download属性は、リンク先のドキュメントをダウンロードできるようにするもので、「＜a href="○○" download＝"△△"＞●●＜/a＞」のような形で使うんだ

○○はリンク先のURL、△△はファイル名、●●にアンカーテキストを入力するよ

URLを間違えないように注意しよう

hrefで指定できるリンクは、大きく4種類に分けられるよ

順番に説明するね

1つ目は、プロトコル名からURLを入力する方法だよ

プロトコルとは、コンピュータでデータを送受信する手順や規約のことで、「http」や「https」がプロトコル名なんだ

「href＝"https://○○.com（ドメイン名）/●●（ファイル名）/"」と入力するのが、自社のサイト以外にリンクするときは一般的なんだよ

ちなみに、「http」以外にも「ftp」を使う場合もあるよ

前述したプロトコル名から入力する「href＝"https://○○.com（ドメイン名）/●●（ファイル名）/"」と違って、「href＝"//○○.com（ドメイン名）/●●（ファイル名）/"」とプロトコル名を省略して入力する方法があるよ

この場合、現在表示されているページが「https」であれば「https」でアクセスされ、「http」なら「http」でアクセスされるんだよ

難しいかもしれないけど、覚えておくと便利だね

絶対パスとは、ファイルを最初から最後まで漏れなく完全に入力する形式のことだよ

フルパスとも呼ばれているね

インターネット上での絶対パスっていうのは、「https://○○.com（ドメイン名）/●●（ファイル名）/」のように、「https://」と「ドメイン名」、「ファイル名」で構成されていて、それぞれの間を「/」で区切ったものだよ

絶対パスには、以下のようなメリットがあるよ

絶対パスはすべてを表示しているから、ファイルで指定した場所が変わらず、誰でもどの画面からでもそのリンク先にたどり着くことができるし、表示ミスも少なくなるんだよ

だから、全体像や位置関係が明確になるんだ

外部リンクへ飛ぶには絶対パスを使用していないといけないんだよ

一方で、以下のようなデメリットもあるんだ

それと、ローカル環境では作動しないから、サーバーへのアップロードが必要になるのも要注意だね

相対パスは、現在表示しているファイルから目的のファイルまでの経路を入力する形式のことだよ

目的のファイルが同じサイト内なら、絶対パスの「https://○○.com（ドメイン名）/●●（ファイル名）/」の形式とは違って、ファイル名が端的に省略して表示されるんだ

目的のファイルが同じ階層内なら「/●●（ファイル名）/」、1つ変わると「/フォルダ名/●●（ファイル名）/」というふうに、増えていくんだよ

相対パスには、以下のようなメリットがあるよ

SSL化はWebサイトとユーザーの通信を暗号化する仕組みのことだよ

SSL化しないと通信が暗号化されず、個人情報漏洩の恐れがあるから、セキュリティ効果を強くするため、ユーザーが安心して利用するために必要なんだ

いろいろなことが簡素化されるけど、一方でデメリットは以下のようなことが挙げられるよ

相対パスは、現在のファイルと目的のファイルまでの位置が変わるとリンク切れを起こしちゃうんだよ

だから、目的のファイルまでの位置関係を理解しておく必要があるんだ

それと、絶対パスと違って外部のサイトのリンクが指定できないということもデメリットになるね

ここまでをまとめるね

ここまでhrefについて解説してきたけど、どうだった？