みなさんこんにちは！
HTMLでほかサイトに飛ばしたり、別ページに移動させたいときってありますよね。
そんなときに使うhref属性ですが、正しく使えていますか？
今日は、
・href属性の使い方
・相対パスと絶対パス
・target属性
・download属性
について詳しくみていくので、href属性の使い方や様々なオプションを使いこなしたいという方は是非参考にしていただければ幸いです！
href属性とは
まずはじめに、href属性とは何かということについて軽く触れておきます。
href属性とは、a(アンカー)タグの属性の一つです。
aタグは他ページや他サイトのリンクを貼るときに利用しますが、リンク先を指定する属性がこのhref属性です。
使い方を見ていこう
実際の使い方を見ておきましょう。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<a href="https://www.sejuku.net">aタグデモ</a>
</body>
</html>
このように、aタグの属性として利用してやって、””の中にリンク先を指定します。
クリックすると、
きちんとリンクとして動作していますね。
相対パスと絶対パスを理解しよう
先程、””の中にリンク先を指定すると書きましたが、リンク先の指定の仕方には相対パスと絶対パスの2種類があります。
一つずつみていきましょう。
相対パスとは
相対パスとは、現在の位置から見て遷移先がどこにあるかを示します。
例えば、以下のようなファイル構成があったとしましょう。
. ├── a.html └── index.html
この場合、index.htmlの中身のaタグからa.htmlを表示させたいときは、
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="./a.html">a.htmlへ</a>
</body>
</html>
このように、””の中にa.htmlまでのパスを書いてやれば良いです。
因みに現在では、カレントを示す”./“が書かれていますがHTMLでは省略可能です
クリックすると、
きちんとできていますね。
また、違う階層にある場合も見ておきましょう。
.
├── index.html
└── src
└── a.html
例えばこのように、srcフォルダの中にあるa.htmlを指定してみましょう。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="src/a.html">a.htmlへ</a>
</body>
</html>
このように指定してやると、
クリックすると、
うまく動作していますね。
絶対パスとは
相対パスが現在の位置から見たものに対し、絶対パスは現在の位置に関係なく一番頭からリンクまでのパスを示します。
つまり、どの階層のファイルで書いても記述の内容は変わりません。
例えばa.htmlの絶対パスをみてみると、
/Users/kai/Desktop/test/a.html
このようになっているので、
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="/Users/kai/Desktop/test/a.html">a.htmlへ</a>
</body>
</html>
このようにしてやると、うまく遷移します。
今は、ファイルの相対パスや絶対パスを例に取ってみましたが、URL等の場合でも同じことが言えます。
とにかく、絶対パスは最上階から、相対パスは現在位置からということが重要なので覚えておくようにしましょう。
“#”の意味を理解しよう
それでは、実際の現場でよくhref属性の””の中に#が入っているのをみかけます。
これは、ページのロードを表します。
つまり、
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="#">ロード</a>
</body>
</html>
このように書いてやり、
ロードボタンを押すと、ページがリロードされます。
実際の意味はページのリロードですが、開発の現場ではaタグを使うことは決まっているけど、具体的なリンク先が決まってないときにとりあえず入れておくという使い方をすることもあるので、覚えておきましょう。
href属性と併用して使える属性を見ていこう！
さて、href属性についてみてきましたが、aタグにはhref属性の他にも様々な属性があり、href属性として併用することでオプション的な動作をすることができます。
target属性とは
まず代表的なものはtarget属性です。
これは、リンク先をどのようなウィンドウで表示するかということを指定できます。
代表的な_blankでは、新規ウィンドウに表示することができます。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="#" target="_blank">新規ウィンドウで表示</a>
</body>
</html>
このようにかいてやると、
新規ウィンドウにてリロードされました。
target属性には他にもフレームを使用している場合、親フレームに表示する_parentや、フレーム分割を解除してウィンドウ全体に表示する_topなどがあります。
あまり使う機会はありませんが、気になる方は試してみると良いでしょう。
download属性とは
他にもhrefと併用して使う属性には、download属性があります。
download属性は名前の通り、DLするための属性です。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>index.htmlです</p>
<a href="sample.png" download="sample_dl.png">画像ダウンロード</a>
</body>
</html>
このように書いてやると、hrefに指定されたのDLリンクとなります。
ウェブサイト制作スキルで好条件の仕事を獲得したい人は
この記事をご覧の方の中にはHTML及びCSSを習得して、フリーランスエンジニアとして自由に働いていきたいと考えている人もいるのではないでしょうか？
そんなあなたは、HTMLのようなマークアップ言語だけでなく、いわゆる「プログラミング言語」も一緒に学ぶ事をオススメします。なぜならその方がHTML単体よりも条件の良い案件を獲得しやすくなりますし、案件自体も多くなるからです。
JavaScriptやPHPなど、HTMLとセットで学ぶのにオススメの言語はたくさんありますので、興味がある人はまず「プログラミング言語無料診断」を使ってみてください。あなたにぴったりのプログラミング言語を1分ほどで無料診断することができます。
そしてプログラミング言語の習得も視野に入れている人は、プログラミングスクールを利用する事も検討するといいでしょう。というのも、HTMLやCSSと比べて、プログラミング言語の習得は一気に難易度が上がるので、独学では挫折してしまう可能性が高いからです。
弊社「侍エンジニア」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。
結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。
興味をお持ちの方は、まずはお気軽に弊社の無料カウンセリングを利用してみてください。
入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください！
まとめ
いかがでしたでしょうか。
href属性の使い方や、絶対パス相対パス、併用して使える属性まで詳しく紹介してきました。
href属性はマークアップをする上で欠かせない属性なので是非これを機にマスターしてみてください！
それでは！！
