<a href> HTMLリンクの作成

    • このページをはてなブックマークに追加

    公開日:2016年08月15日 最終更新日:2019年09月12日

    ホームページ内に別ページや外部サイトなどの「リンク」を作成する場合は、アンカー【<a>】タグを使います。 <a>は英語の"anchor"の略で、「錨(いかり)」、「(船を)錨で固定する」という意味になります。HTML文書の中でも、よく使われるタグの一つを学習していきましょう。

    目次

    1. Webサーバー内の別のリソースにリンクを作成する

    1.1. 同一フォルダー内の文書にリンクを作成する【<a href="文書のファイルパス">】

    HTMLやテキストなどの文書がWebサーバー内で同じフォルダ内、つまり二つの文書が同じ階層にある場合の「リンクタグ」の記述方法を確認していきましょう。

    サンプルファイルのフォルダー内の構成は以下の通りです。 リンクを作成する文書の「index.html」とリンク先の文書「tulip.html」が同じ「www」フォルダー内に配置されています。

    「index.html」にサブページ「tulip.html」へのリンクを張る場合、「index.html」の"body"要素にアンカー「<a>」タグを記述します。アンカータグの基本書式は以下の通りです。

    ●アンカータグの基本書式

    リンク先の文書の指定をするには"href"属性を使います。"href"とは"Hyper Text Reference"の略で参照先のHTML文書やテキスト文書のURL(ファイル名)を値として設定します。 今回は、同一フォルダー内のHTML文書なので、「HTMLファイル名」のみを指定します。
    また、アンカー「<a>」タグの開始タグと終了タグの間には、ブラウザーに表示される「アンカーテキスト」を記述して下さい。

    ●「index.html」

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset=”utf-8″>
    <title>HTML入門-リンクの作成</title>
    </head>

    <body>
    <h1>花の図鑑</h1>
    <p><img src="img/tulip.jpg" width="200" height="100" alt="チューリップの写真"><br>
    <a href="tulip.html">チューリップ</a>
    </p>
    </body>
    </html>

    「index.html」ファイルをテキストエディターなどで開き、アンカータグ(11行目)を追加します。

    <a href="tulip.html">チューリップ</a>

    「href属性」にはリンク先ファイル名の「tulip.html」を指定し、アンカーテキストには「チューリップ」を指定しました。

    ●ブラウザーの表示(index.html)

    アンカータグ「<a></a>」で囲まれたテキストには、何も指定しない場合、青字に下線がついてブラウザーに表示されます。
    内部リンクのテキスト「チューリップ」をクリックするとリンク先として指定した「tulip.html」の文書が開きます。

    ●リンク先のページ(tulip.html)

    href2

    ▲ページトップへ戻る

    1.2. 画像にリンクを作成する【<a href="画像ファイルパス">】

    画像にリンクを作成すると、リンクを張った画像のみを大きく表示したり、ロゴなどの画像から他のページに移動するリンクを張る事ができます。
    画像を指定する「<img>」タグを「アンカータグ」で囲んであげます。"href"属性には、画像の保存されている「ファイルパス」を指定します。

    ●「index.html」

    <body>
    <h1>花の図鑑</h1>
    <p>
    <a href="img/tulip.jpg">
    <img src="img/tulip.jpg" width="200" height="100" alt="tulip" title="拡大できます">
    </a>

    <br>
    <a href="tulip.html">チューリップ</a>
    </p>
    </body>

    画像ファイルの保存場所は、「index.html」ファイルと同一フォルダー(階層)ではなく、「imgフォルダー」内に「tulip.jpg」という名前で保存されています。

    ●「www/img/tulip.jpg」

    このフォルダー階層の場合、「href属性」に指定するファイルパスは

    <a href="img/tulip.jpg">

    となります。

    「アンカータグ」をつけても、画像に変化はありませんがマウスを合わせると「拡大できます」のツールチップが表示されてクリックできるようになりました。

    ●リンク先のページ(tulip.html)

    画像を左クリックするとリンク先に指定した「img」フォルダー内の「tulip.jpg」の画像がブラウザーに表示されます。

    ●リンク先のページ(tulip.jpg)

    href4

    ▲ページトップへ戻る

    1.3. 新しいウィンドウ(別タブ)でリンク先を開く【target属性】

    「アンカータグ」の "href"属性で指定されたページは、通常クリックするとリンク元のページと同じ画面上に表示されますが、「target属性」を使うと、リンク元のページとは別の新しいウィンドウを開いて、リンク先のページを表示することができます。

    ●「index.html」のHTML

    <body>
    <h1>花の図鑑</h1>
    <p><img src="img/tulip.jpg" width="200" height="100" alt="チューリップの写真"><br>
    <a href="tulip.html" target="_blank">チューリップ</a>
    </p>
    </body>

    4行目の「アンカータグ」では、別ページの「tulip.html」を"href"属性に指定しています。加えて、
    "target属性"の値に「_blank」を指定します。

    <a href="tulip.html" target="_blank">チューリップ</a>

    「index.html」の「チューリップ」のリンクをクリックすると、新規のウィンドウ(もしくは別タブ)でリンク先のページである「tulip.html」が表示されます。

    ●新規ウィンドウで表示(tulip.html)

    ▲ページトップへ戻る

    1.4. リンク先文書の特定の部分に飛ぶようにリンクを作成する

    リンク先の文書を開く時に、ページの特定の位置を指定して開くことも可能です。

    ●メインページ「index.html」

    href6

    メインページ「index.html」の「花の名前」のリンクをクリックすると「flower.html」のそれぞれの花の説明に飛ぶようにHTMLを記述してみましょう。

    ●リンク先のページ「flower.html」

    まずは、リンク先ページ「flower.html」のHTMLコードに目印である「id属性」をつけます。 リンクを張りたいタグに「id属性」とその値として、識別しやすい名前を半角英数で記述します。

    ●flower.html

    <body>
    <h1>花の図鑑</h1>

    <h2 id="tulip">チューリップ</h2>
    <img src="img/tulip.jpg" width="350" height="200" alt="チューリップの写真">
    <p>ユリ科</p>
    <p>別名を「鬱金草(ウッコンソウ)」、学名は「Tulipa」です。<br>
    秋植えの球根植物で、育てやすく種類もたくさんあります。3月~5月に開花します。</p>

    <h2 id="sunflower">ヒマワリ</h2>
    <img src="img/sunflower.jpg" width="350" height="200" alt="ヒマワリの写真">
    <p>キク科</p>
    <p>別名をサンフラワーと言います。<br>
    漢字表記は「向日葵」、学名は「Helianthus annuus」です。
    原産地は北アメリカで、7月~9月に大きな黄色の花を咲かせます。</p>

    <h2 id="hydrangea">アジサイ</h2>
    <img src="img/hydrangea.jpg" width="350" height="200" alt="アジサイの写真">
    <p>ユキノシタ(アジサイ)科</p>
    <p>漢字表記は「紫陽花」、学名は「Hydrangea macrophylla」です。<br>
    原産地は熱帯アジアで、5月~7月に開花します。日本には約10数種があります。</p>
    </body>

    サンプルコードでは、花の名前である見出しの「h2」タグ(4,10,17行目)にそれぞれ「id="tulip"」、「id="sunflower"」、「id="hydrangea"」を追加しました。

    次に「index.html」を編集します。

    ●index.html

    <body>
    <h1>花の図鑑</h1>

    <h2>花の名前別</h2>
    <ul>
    <li><a href="flowers.html#tulip">チューリップ</a></li>
    <li><a href="flowers.html#sunflower">ひまわり</a></li>
    <li><a href="flowers.html#hydrangea">アジサイ</a></li>
    </ul>
    </body>

    「href属性」の属性値に、

    a href = "リンク先のファイルパス井桁マーク「#」リンク先の「id名」"

    を指定します。(6~7行目)

    ●「index.html」

    「index.html」の"ひまわり"のリンクをクリックすると「flower.html」の"ヒマワリ"の説明へ飛びます。

    ●「flower.html」

    href8

    ▲ページトップへ戻る

    2. 外部サイトへのリンクを作成する【<a href="URL">】

    1章では、同一サーバー内の文書にリンクを張りました。次に、外部のサイトへのリンク作成をしてみましょう。外部のサーバー上にある文書へのリンクを張るには、そのサイトのURLを指定します。
    先程の内部リンクを作成した「index.html」に外部リンクを追加してみましょう。

    ●index.html

    <body>
    <h1>花の図鑑</h1>

    <h2>花の名前別</h2>
    <ul>
    <li><a href="flowers.html#tulip">チューリップ</a></li>
    <li><a href="flowers.html#sunflower">ひまわり</a></li>
    <li><a href="flowers.html#hydrangea">アジサイ</a></li>
    </ul>

    <h2>植物園へのリンク</h2>
    <ul>
    <li><a href="http://www.ins.kahaku.go.jp/">国立科学博物館 付属自然教育園</a></li>
    <li><a href="http://www.showakinen-koen.jp/">国営昭和記念公園</a></li>

    </ul>
    </body>

    13、14行目で外部リンクへのアンカータグを作成しています。
    href属性に、「http://~」から始まるURLを指定します。

    リンクをクリックすると外部サイトが開きます。

    ●外部サイト(国立科学博物館 付属自然教育園)

    ※外部のサイトへリンクを張る場合は、著作権やリンクについて記述してある「サイトポリシー」などを確認しましょう。「リンクフリー」と記述のあるものは、製作者への連絡なしにリンクを張ることができますが、リンク先のURLなどが指定されている事があります。

    ▲ページトップへ戻る

    関連記事:初心者のためのHTML入門
    関連記事:HTML入門:link要素の使い方
    関連記事:HTML入門:外部CSSファイルの読み込み方
    関連記事:HTMLでソースコードや特殊文字を表示する方法
    関連記事:HTML&CSS 学習者におすすめの本 10選

    • このページをはてなブックマークに追加

    おすすめ記事

  • 簡単!30秒登録無料キャリア相談 ちょっと聞いてみる

    無料プログラミング研修

    CTO養成講座&転職支援サービス OCTOPASS 詳細はこちら

    ピックアップ

    正社員

    【プロジェクトマネージャー】1億4千万ユーザーのアプリ開発/O2Oソリューション

    スマートフォンアプリ向けの自社プロダクトFANSHIPを用いた大規模案件の プロジェクトマネジメント業務...

    株式会社アイリッジ

    正社員

    【JavaScript】アプリケーションエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【Scala/Ruby】サーバーサイドエンジニア|訪日旅行者向けプラットフォームサービスの開発

    ・訪日旅行者向けプラットフォームサービス「WAmazing」の 設計・開発・運用を行っていただきます。 ...

    WAmazing株式会社

    正社員

    【リーダーポジション】国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)のサービスサイトおよび基幹システムの開発業務 - テックリード - 開発案件...

    夢の街創造委員会株式会社

    正社員

    【JavaScript/CSS/React】フロントエンドエンジニア|国内最大級 宅配ポータルサイトの開発

    ・自社サービス(出前館)サービスサイトおよび基幹システムのフロントエンド開発業務 UI/U設計、ツ...

    夢の街創造委員会株式会社