HTMLでhref属性の使い方を現役エンジニアが解説【初心者向け】
初心者向けにHTMLでhref属性の使い方について解説しています。hrefを使った絶対パス、相対パス、ルートパスといったページ遷移の種類それぞれの指定方法を説明します。重要な属性となるのでしっかりと頭に入れておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLでhref属性の使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
href属性の使い方について詳しく説明していくね！
お願いします！
HTMLでhref属性の使い方について
サイト作成では必ず登場する、aタグとそれに紐づくhref属性の使い方について解説してみます。
aタグとは。リンク＝次のページ・コンテンツへつながるドアのようなもの。と理解しておくと良いでしょう。ドアの先には行き先が必ずあるものです。行き先がhref属性と覚えておきましょう。
これらはセットです。hrefの中が空白であると構文エラーになり、表示動作も不安定になります。注意しておきましょう。
<a href="https://techacademy.jp/">テックアカデミー</a>
これを和訳すると、「テックアカデミー」と書かれた箇所をクリックすると、実際のテックアカデミーのサイトに遷移する。となります。
hrefのよくある「行き先」5種
リンクの行き先は、内部と外部のどちらも設定することができます。主に以下の5つになるでしょう。
- サイト内の別のページへ遷移する
- 同じページ内の違う位置へ遷移する（ページ内リンク）
- 外部サイトへ遷移する
- サイト内のファイルに直接遷移する（例えばPDFなど）
- サイト内のファイルに直接遷移、そしてダウンロードする（例えばzipファイルなど）
以下がそれぞれのリンクの書き方です。 ※４、5番目は実際のリンクではありません。
<a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミー ※講座のページへ遷移する</a> <a href="https://techacademy.jp/#training-top">テックアカデミー ※トップページの「トレーニング」部分へ遷移する</a> <a href="https://www.kiramex.com/">テックアカデミー ※運営会社のキラメックス株式会社へ遷移する</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイルを表示させる。 ※サンプルなので表示しません</a> <a href="pdf/design.pdf">pdfファイルをダウンロードさせる。 ※サンプルなので動作しません</a>
hrefの指定方法
指定をするには、合わせてパスの構造を理解しておきましょう。
絶対パス
絶対パスは呼び出したいファイルが同じディレクトリ内になく、外部で公開されている場合などに使います。世界中の誰が見ても参照できる位置を示します。
東京都港区南青山1-2-3建物名・号室〜といったような住所と同じような、ものです。
<a href="https://techacademy.jp/">テックアカデミー</a>
相対パス
基本となるパスの書き方です。「パスを書くそのファイルから見た、呼び出すファイルの位置」になります。
<a href="index.html">テックアカデミー</a>
ルートパス
サイトのルートから（今回の例であれば「demo」フォルダがルート）見たパスになります。最初につける/がルートを意味します。サイトルートから見た位置関係になるのですべて/からはじめます。WordPressなどや、.htaccessで指定している場合のみ利用できます。
<a href="/webdesign/training/">テックアカデミー</a>
hrefの指定方法その２
同じページ内での位置指定をする事もできます。これは、html構文内で、#（id）を記述している場合に指定できます。
<a href="https://techacademy.jp/#training-top">テックアカデミー ※トップページの「トレーニング」部分へ遷移する</a>
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
hrefと、そのターゲット属性
リンクの行き先は、同じページタブで開くこともできますし、別のウィンドウにて遷移させる。という方法があります。
それが、「target属性」です。4種類ありますが、_blankが頻度が高く、それ以外は近年はあまり使用されていません。
- _self／通常パターン。現在のウィンドウで開く指定。
- _blank／別のウィンドウで開く指定。
- _top／フレームセットは解除、単一のページのみが表示される指定。
- _parent／リンク先のページは親フレームに表示される指定。
実際に書いてみよう
<a href="https://techacademy.jp/webdesign-wordpress-set">テックアカデミーのウェブデザイン・WordPress講座</a> <a href="https://techacademy.jp/#training-top">テックアカデミー「トレーニング」へ</a> <a href="https://www.kiramex.com/" target="_blank" rel="noopener">キラメックス株式会社（外部サイト）</a> <a href="https://techacademy.jp/download/design.pdf">pdfファイル(XXXkb)。 ※サンプルです</a> <a href="pdf/design.pdf">pdfファイルのダウンロードはこちら ※サンプルです</a>
今回は、リンク指定をするaタグを解説してみました。使い方を覚え、ページを作成してみましょう！！
監修してくれたメンター
| ゆかちん先生
フリーランスのクリエイティブディレクター。 制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
