最終更新日:2019年10月24日ホームページ内に別ページや外部サイトなどの「リンク」を作成する場合は、アンカー【<a>】タグを使います。<a>は英語の"anchor"の略で、「錨(いかり)」、「(船を)錨で固定する」という意味になります。HTML文書の中でも、よく使われるタグの一つを学習していきましょう。href="文書のファイルパス">】HTMLやテキストなどの文書がWebサーバー内で同じフォルダ内、つまり二つの文書が同じ階層にある場合の「リンクタグ」の記述方法を確認していきましょう。サンプルファイルのフォルダー内の構成は以下の通りです。リンクを作成する文書の「index.html」とリンク先の文書「tulip.html」が同じ「www」フォルダー内に配置されています。「index.html」にサブページ「tulip.html」へのリンクを張る場合、「index.html」の"body"要素にアンカー「<a>」タグを記述します。アンカータグの基本書式は以下の通りです。●アンカータグの基本書式リンク先の文書の指定をするには"href"属性を使います。Reference"の略で参照先のHTML文書やテキスト文書のURL(ファイル名)を値として設定します。今回は、同一フォルダー内のHTML文書なので、「HTMLファイル名」のみを指定します。アンカー「<a>」タグの開始タグと終了タグの間には、ブラウザーに表示される「アンカーテキスト」を記述して下さい。href="tulip.html">チューリップ</a></p></body></html>「index.html」ファイルをテキストエディターなどで開き、アンカータグ(11行目)を追加します。href="tulip.html">チューリップ</a>「href属性」にはリンク先ファイル名の「tulip.html」を指定し、アンカーテキストには「チューリップ」を指定しました。●ブラウザーの表示(index.html)アンカータグ「<a></a>」で囲まれたテキストには、何も指定しない場合、青字に下線がついてブラウザーに表示されます。内部リンクのテキスト「チューリップ」をクリックするとリンク先として指定した「tulip.html」の文書が開きます。画像にリンクを作成すると、リンクを張った画像のみを大きく表示したり、ロゴなどの画像から他のページに移動するリンクを張る事ができます。画像を指定する「<img>」タグを「アンカータグ」で囲んであげます。"href"属性には、画像の保存されている「ファイルパス」を指定します。href="tulip.html">チューリップ</a></p></body>画像ファイルの保存場所は、「index.html」ファイルと同一フォルダー(階層)ではなく、「imgフォルダー」内に「tulip.jpg」という名前で保存されています。href="img/tulip.jpg">となります。「アンカータグ」をつけても、画像に変化はありませんがマウスを合わせると「拡大できます」のツールチップが表示されてクリックできるようになりました。●リンク先のページ(tulip.html)画像を左クリックするとリンク先に指定した「img」フォルダー内の「tulip.jpg」の画像がブラウザーに表示されます。"href"属性で指定されたページは、通常クリックするとリンク元のページと同じ画面上に表示されますが、「target属性」を使うと、リンク元のページとは別の新しいウィンドウを開いて、リンク先のページを表示することができます。target="_blank">チューリップ</a></p></body>4行目の「アンカータグ」では、別ページの「tulip.html」を"href"属性に指定しています。"target属性"の値に「_blank」を指定します。target="_blank">チューリップ</a>「index.html」の「チューリップ」のリンクをクリックすると、新規のウィンドウ(もしくは別タブ)でリンク先のページである「tulip.html」が表示されます。リンク先文書の特定の部分に飛ぶようにリンクを作成するリンク先の文書を開く時に、ページの特定の位置を指定して開くことも可能です。●メインページ「index.html」メインページ「index.html」の「花の名前」のリンクをクリックすると「flower.html」のそれぞれの花の説明に飛ぶようにHTMLを記述してみましょう。●リンク先のページ「flower.html」まずは、リンク先ページ「flower.html」のHTMLコードに目印である「id属性」をつけます。リンクを張りたいタグに「id属性」とその値として、識別しやすい名前を半角英数で記述します。alt="チューリップの写真"><p>ユリ科</p><p>別名を「鬱金草(ウッコンソウ)」、学名は「Tulipa」です。<br>秋植えの球根植物で、育てやすく種類もたくさんあります。3月~5月に開花します。alt="ヒマワリの写真"><p>キク科</p><p>別名をサンフラワーと言います。原産地は北アメリカで、7月~9月に大きな黄色の花を咲かせます。macrophylla」です。<br>原産地は熱帯アジアで、5月~7月に開花します。日本には約10数種があります。</p></body>サンプルコードでは、花の名前である見出しの「h2」タグ(4,10,17行目)にそれぞれ「id="tulip"」、「id="sunflower"」、「id="hydrangea"」を追加しました。次に「index.html」を編集します。リンク先の「id名」"を指定します。「index.html」の"ひまわり"のリンクをクリックすると「flower.html」の"ヒマワリ"の説明へ飛びます。href="URL">】1章では、同一サーバー内の文書にリンクを張りました。次に、外部のサイトへのリンク作成をしてみましょう。外部のサーバー上にある文書へのリンクを張るには、そのサイトのURLを指定します。先程の内部リンクを作成した「index.html」に外部リンクを追加してみましょう。href="http://www.showakinen-koen.jp/">国営昭和記念公園</a></li></ul></body>13、14行目で外部リンクへのアンカータグを作成しています。href属性に、「http://~」から始まるURLを指定します。リンクをクリックすると外部サイトが開きます。付属自然教育園)※外部のサイトへリンクを張る場合は、著作権やリンクについて記述してある「サイトポリシー」などを確認しましょう。「リンクフリー」と記述のあるものは、製作者への連絡なしにリンクを張ることができますが、リンク先のURLなどが指定されている事があります。渋谷区Tweetおすすめ記事HTML入門:チェックボックスを表示させてみようHTML入門:チェックボックスを表示させてみよう「アンケート」や「お問い合わせ」フォームよく見られるチェックボックスを作成してみましょう。「positionプロパティ」はボックス領域の配置を指定することができるプロパティです。「topプロパティ」...CSSでフォントの種類とサイズを指定する方法CSSでフォントの種類とサイズを指定する方法CSSで文字フォントの種類を設定する方法について説明します。月額単価:50万円〜3月より新規で金融系のWebサイトを受注するに伴いコーダーを募集します。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。