スライドショー

【HTML入門】href属性の使い方やオプションを理解しよう!

みなさんこんにちは!

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と比べて、プログラミング言語の習得は一気に難易度が上がるので、独学では挫折してしまう可能性が高いからです。

弊社「侍エンジニア塾」では、あなただけのオーダーメイドカリキュラムを作成し、現役エンジニアがマンツーマンでレッスンするので挫折する事なく学習を続けられます。更に、フリーランスとして仕事を獲得するサポートもさせて頂いています。

結果として、弊社を受講している間にクラウドソーシングからお仕事を受注して納品まで行い、フリーランスエンジニアとしてデビューした方も多々いらっしゃいます。

「知識だけでは仕事に繋がらなかった」38歳接客業からフリーランスデビューできた理由
更新日 : 2019年11月5日

興味をお持ちの方は、まずはお気軽に弊社の無料体験レッスンを利用してみてください。

入会する、しないに関わらず、業界随一のコンサルタントがあなたの目標をヒアリングし、ぴったりの学習プランを提供させて頂きます。下記ボタンから直接予約が可能となっています。オンラインの利用もできますので、是非お試しください!

無料体験レッスンの
予約はこちら

まとめ

いかがでしたでしょうか。

href属性の使い方や、絶対パス相対パス、併用して使える属性まで詳しく紹介してきました。

href属性はマークアップをする上で欠かせない属性なので是非これを機にマスターしてみてください!

それでは!!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

かい

かい

日向徹かこよすぎか

[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説