バナー画像

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で使用できる文字は以下の通りです。

※チルダ(~)は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についての解説をしてみました。

リンクはサイトを構築する際には必ず使用しますが、初心者の方に多いミスとしてパスの指定方法が間違っていることが多々あります。

絶対パスと相対パスの違いをしっかりと把握して、リンク切れ等が無いように心がけましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。