HTMLでWebサイトを構築する場合に必ず使われるものがURLです。
もっと簡単にまとめるとURL＝リンクという認識でも問題ありません。
リンクには外部リンクと内部リンクの二つがあります。
今回は、この書き方に微妙な違いのある二つの「リンク」について解説してみたいと思います。
初心者の方でもすぐ覚えられるほど”簡単”な記述ですので、身構えずしっかりと覚えていきましょう。
URLとは
まず、URLの基本的な知識を理解しましょう。
URLとは”Uniform Resource Locator(ユニフォーム リソース ロケーターと読みます)”の頭文字をとった略語です。
Wikiでは以下のように書かれています。
インターネット上でウェブ ページなどを一意に指定するための規約。また、その手法で名づけられた名前
これは間違いではありませんが、これと似た用語に”Uniform Resource Identifies(ユニフォーム リソース アイデンティファイズ)”というものがあります。
俗にURIと呼ばれていますが、これはHTML4.01から実装された拡張URLだと思ってください。
URLがリソースの物理的な場所を示すのに対し、URIはリソースの仮想的な名前を定義するものとなっています。
ただしこれら二つは区別が曖昧な部分もあります。
内部リンクと外部リンク
先ほど説明したURIとURLの違いですが、もう少し具体的な説明をしてみます。
URLとは、直感的に解釈するならインターネット上に転がっている数多のWebサイトまでの住所だと思ってください。
URIは、パソコン及びサーバー内部にフォルダ分けされているファイルの住所です。
どちらも住所であり、基本的な部分な特に変わりません。
もうお気づきの方もいらっしゃると思いますが、これが内部リンクと外部リンクの違いであり、URLは外部リンク、URIは内部リンクを指します。
URLに使用できる文字
URLとURIで使用できる文字は以下の通りです。
- 半角英数
- A-Z a-z 0-9 – _ . / , $ ! * ‘ ( ) ; : @ = & +
※チルダ(~)はURLでは使用不可ですが、URIでは使用が許可されています。
リンクの設定
HTMLでリンクを貼るには<a>タグを使用します。
記述方法は次の通りです。
<a href="sample.html">sampleFile.html</a>
開始タグと終了タグで括った中身に対し、リンクを指定することが出来ます。
またリンクには絶対パスと呼ばれる指定方法と相対パスと呼ばれる指定方法の二つがあります。
絶対パスとは、インターネットサイトを検索する際に打ち込む「http://www.」から始まるアドレスです。
PCのフォルダ検索では「C:\Program Files\Common Files」のようなアドレスを指します。
これに対し相対パスとは、アクセス中のページを基準としたアドレスを指します。
相対パスの記述について
相対パスを記述する場合には以下のルールを覚える必要があります。
簡単なので一度見ればすぐに覚えられるはずです。
- 階層は「スラッシュ(/)」を使って表します
- 上の階層へ戻る場合には「../(ピリオド ピリオド スラッシュ)」を使って表します。
例えば以下のような階層があったとします。
index.html │ ├─ image ├─ script │ │ │ ├─ script_A │ ├─ script_B │ └─ script_C └─ file │ ├─ entry.html ├─ confirm.html └─ user │ ├─ menber.html ├─ list.html └─ exit.html
index.htmlはルートページ、”image”, “script”, “file”, “user”はそれぞれディレクトリを表しています。
scriptディレクトリ内に存在する”script_A”というファイルからuserディレクトリ内に存在する”list.html”までの相対パスは「../file/user/list.html」となります。
逆に”list.html”から”script_A”までの相対パスは「../../script/script_A」となります。
<a>タグの使い方
ここまではURLについての基本的な知識とリンクに必要なパスの記述について解説してきました。
次はリンクを貼るときに使用する<a>タグについて解説をしていきます。
別ウィンドウでリンクを開く
<a>タグはデフォルトでは同一ウィンドウでリンクを開くため、クリックすると該当ページが切り替わってしまいます。
これを別ウィンドウで開かせるためには次のように記述します。
<a href="sample.html" target="_blank">sampleFile.html</a>
「target=”_blank”」属性を付加することで、別ウィンドウ(ブラウザによっては別タブ)が開かれるため、該当ページも残すことが出来ます。
用途としては主にユーザーページやログイン画面などで使用することになるのではないでしょうか。
ただし、タブが増えすぎてしまうと、ユーザーにとっては非常に使い勝手が悪くなりますので、多用はしないようにしましょう。
同一ページで任意の場所に飛ばす(アンカー)
アンカーと呼ばれる方法で、同一ページの別の場所までスクロールさせることが出来ます。
この方法を使うには次のように記述します。
<body> <div id="title"> <p>sample text</p> </div> <p><a href="#title">sample textまでジャンプ</a></p> </body>
まず移動させたい場所のタグにid属性で名前を付けておきます。
後はリンクに「#(シャープ) + 移動させたいタグのid名」を指定すればアンカーが完成します。
画像にリンクを貼る
リンクはテキストだけでなく画像にも適用できます。
<body> <div id="title"> <p>sample text</p> </div> <a href="#title"><img src="sample.jpg" alt="画像"></a> </body>
この場合、クリックできる範囲は画像全体になり、リンクの大きさも画像の大きさに依存します。
DLリンクを作る
リンクできるのはページだけではありません。
よく見かけるダウンロードなどもこの<a>タグを使用しています。
<body> <div> <p>sample_pdf</p> <img src="sample.jpg" alt="画像"> <p><a href="sample.pdf">ダウンロードはこちら</a></p> </div> </body>
<a>タグにhtmlファイルや画像ファイルを指定するとリンク先にジャンプしますが、それ以外のファイルを指定すると自動でダウンロードリンクにすることが可能です。
リンクボタンを作る
<a>タグはテキスト以外でも使用できることは先ほど説明しましたが、これを使ってリンクボタンを作ることでサイトの見栄えが良くなります。
<body> <div> <p>sample_pdf</p> <img src="sample.jpg" alt="画像"> <a href="sample.pdf"><button>sample_button</button></a> </div> </body>
まとめ
- URLはリソースの物理的な場所、URIはリソースの仮想的な名前を定義を指す
- リンクには内部リンクと外部リンクの二つがある
- リンクには使用できる文字に制限がある
- 絶対パスと相対パスでは指定方法が異なる
いかがでしたか？
今回はURLについての解説をしてみました。
リンクはサイトを構築する際には必ず使用しますが、初心者の方に多いミスとしてパスの指定方法が間違っていることが多々あります。
絶対パスと相対パスの違いをしっかりと把握して、リンク切れ等が無いように心がけましょう。
