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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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週間限定）
