TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでアンカータグを使う方法【初心者向け】
HTML

HTMLでアンカータグを使う方法【初心者向け】

HTML初心者向けに、【アンカータグ】を使う方法を解説した記事です。リンクを張る際に使用します。href属性を使ったURLの指定、id属性の指定も説明。サンプルコードがあるので、実践的に使うことができます。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLのアンカータグについて解説します。

アンカータグが使えるようになると、Webページにリンクが張れるようになるのでぜひ参考にしてください。

 

目次

 

【動画の解説はこちら！】

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

アンカータグを使う方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

アンカータグと属性

今回はリンクの張り方について学んでみましょう。

Web上ではリンクをクリックすれば、簡単に見たいWebページにアクセスすることができます。

このリンクをWebページに張るには、アンカー<a>タグを使います。

アンカータグとは、Webページにリンクを張り、そのページとリンク先のページを繋ぐタグです。

 

また、HTML要素として識別するためにアンカータグは属性を付与できます。

一般的に利用されるアンカータグの属性は以下の2つです。

  • href属性 Hypertext Reference
  • id属性

それぞれの属性の内容と記述方法を解説します。

 

href属性  Hypertext Reference

href属性は、リンクの飛び先がどこであるのかを伝えます。

以下のようにhref属性を利用して、任意のURLを記載できます。

<a href="https://techacademy.jp/"></a>

 

id属性

要素にID名をつけて、特定部分を識別します。

id属性は、同一ページ内にリンク先を作成できます。

以下のようにid属性を利用して、文書内の別場所に移動できます。

<p id=”index”></p>

<p>タグなどに対してid属性（index）を付与し、特定できます。

 

大石ゆかり

aタグで色んなサイトにリンクを張ることが出来るんですね♪

田島悠介

そうだね。自分のサイト内の別のページへもリンクを張れるよ。

大石ゆかり

id属性って特定部分を指定するって何ですか？

田島悠介

ページが長い時に、クリックで特定の箇所に素早く移動させることが出来るんだよ。今から説明するね。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

アンカータグの使い方

基礎がわかったら、実際に使ってみましょう。

タグに属性をつけ加えるときには半角スペースを使います。

<a (半角スペース)href="好きなサイトのURL">サイトのページ名</a>

 

実際のURLで書いてみます。

<a href="https://techacademy.jp/">テックアカデミー</a>

 

ブラウザ表示結果は以下のとおりです。

 

ここで、ページのリンクをクリックしてみましょう。

href属性で指定したURLにアクセスできましたね。

 

また、id属性を使うと、同一ページ内の指定した部分にリンクすることができます。

今回の例では、<p>タグとid属性で、「index」というID名をつけたリンクの飛び先をつくります。

先ほどのhref属性を「#index」に変えます。

このとき、indexの先頭に#をつけることで「index」というIDのついた箇所を指定することができます。

 

「#indexの場所へ移動」をクリックすると、id属性で指定したリンク先（index）へ飛びました。

 

まとめ

今回はHTMLでアンカータグを使う方法をご紹介しました。

href属性やid属性で指定した位置情報をハイパーリンクと呼びますが、そのハイパーリンク同士で繋がれた文書をハイパーテキストといいます。

HTMLとは HyperText Markup Language の略ですが、その意味は、情報をつなぎ合わせる機能を持った文書（ハイパーテキスト）をつくる言語です。

Web上で文書や画像を表示させるだけでなく、ハイパーリンクによって様々な情報をつなぎ合わせる機能を持つ点がHTMLの大きな特徴です。

次から次へと移動しながら得たい情報を自由に得られるハイパーリンク機能により、インターネットはまたたく間に世界中に広がっていきました。

あなたもWeb上で思いがけない情報や、人、ものとの出会いがあったのではないでしょうか。

<a>タグは世界中の情報をハイパーリンクでつなぎあわせる重要なタグです。

ぜひ覚えておきましょう。

さらにHTMLを学びたい場合は、HTMLで定義リストを使う方法も合わせてご覧ください。

執筆してくれたメンター

メンターSSさん

文系・未経験でIT企業に就職して、9年目。

環境構築から開発・設計・テストまで何でも屋さんをやっていました。

テックアカデミーではJavaコースを担当しています。

 

大石ゆかり

techacademy.jpにリンクを張ることが出来ました！でも、今見ていたタブ？ページが上書きされちゃった。

田島悠介

新しいタブ、新しいウィンドウで表示する場合はtarget属性に_blankを指定してあげるんだ。

大石ゆかり

今度は、新しいタブに表示されました♪

田島悠介

自分のサイトではない場合は、target属性で_blankを指定してあげたほうがいいね。

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLのhead要素内にmetaタグを記述する理由を現役エンジニアが解説【初心者向け】

HTMLのhead要素内にmetaタグを記述する理由について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

HTMLでvalue属性を使って入力初期値を指定する方法を現役エンジニアが解説【初心者向け】

value属性を使ってHTML内の入力初期値を指定する方法について解説します。   そもそも、HTMLの記述方法がわからない場合は、 HT...
HTML

HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法を現役デザイナーが解説【初心者向け】

HTMLとCSSでチェックボックスの色と形をカスタムデザインする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...
HTML

HTMLでid属性が重複した時の動きについて現役デザイナーが解説【初心者向け】

HTMLでid属性が重複した時の動きについて解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深...
HTML

HTMLで丸数字を書く方法を現役エンジニアが解説【初心者向け】

HTMLで丸数字を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
CSS

あわせてよく読まれている記事

JavaScriptでアンカータグのhrefを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでアンカータグのhrefを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 アンカータグのhrefを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   document.getElementByIdの使い方 JavaScriptの標準で装備されているメソッドのgetElementByIdは、引数にHTMLソースでつけたIDの名前を渡すことで使用できます。下記のような記述です。 document.getElementById(【IDの名前】) MDNのリファレンスはこちら   hrefを取得する HTMLのソースにIDがついていれば、そのIDを指定してHTMLごと取得できます。リンクなどに使用するaタグにIDを指定して、getElementByIdでaタグを取得したら.hrefとすればhrefが取得できます。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中実際に書いてみよう まずはHTMLソースです。リンクのaタグにIDとしてtargetという名前をつけています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <a href="https://junior.techacademy.jp/" id="target">テックアカデミージュニア</a> </body> </html> 次にJavaScriptソースです。 取得したhrefをコンソールに表示しています。 const a = document.getElementById('target'); console.log(a.href); //https://junior.techacademy.jp/   監修してくれたメンター 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

HTMLで複数のアンカーリンクが使えない理由を現役エンジニアが解説【初心者向け】

HTMLで複数のアンカーリンクが使えない理由について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数のアンカーリンクが使えない理由について詳しく説明していくね！ 大石ゆかり お願いします！   目次 アンカーとは アンカーリンクの設定方法と注意点 アンカーリンクを使ってみよう   アンカーとは アンカーとは、ページ内のリンクのことをいいます。 ページが縦に長い場合にその「ページ内リンク」を押すことで、同じページ内の表示位置を変えること可能です。 ブログなどのテキスト量の多い場合には、目次を用意することで、すぐに見たいところに飛ぶことができます。 また、ランディングページではヘッダー内にページ内リンクを作成したり、お問い合わせボタンをページ内に複数配置しておくことでユーザーが見たい情報を見やすくなり、使いやすいページとすることが可能です。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中アンカーリンクの設定方法と注意点 アンカーリンクはidタグを使用して、アンカーとしたい目印の位置にid名を付けていきます。 このときにidタグを複数作成する場合には、名前が重複しないように別のid名を付けなければなりません。 hタグなどの見出しにid名を付ける場合にはcssで装飾するための記述の方法と同様です。 h2 id=”test1″のように記述していきましょう。   次に、リンクを作成します。 aタグを使用することになるものの、リンク自体は「文字」や「画像」でも構いません。 外部のページを表示するリンクと同様にa href=”（移動先のid名）”として、閉じタグとの間にはリンクとして選択される文字などを記述することになります。 注意点としては、HTML５の前のHTML４まではname属性でアンカーを記述しいているコードもあり、a name=”test1″となっている古いコードで記述してあるwebサイトの修正の場合はidに書き直さなければなりません。 また、その他の注意点としてはid名を単純な名前にしている場合はid値が重複し、正しく表示されない可能性があります。 通常、一つのページ内では同じid名を使うことはありません。   しかし、複数のページで同じid名を使っている場合は注意が必要です。 カテゴリページなどで複数のページを表示できるようしている場合や別のページの引用文の中にid名が入っている場合はid名が重複します。 このような事態を想定される場合は、aタグをページ内相対値とするのではなく、絶対値としてwebページのアドレスから記述することで回避することが可能です。 a href=”（表示するwebページのアドレス/移動先のid名）”とすることで重複しなくなります。   アンカーリンクを使ってみよう 通常では、webサイトは上から下へ読まれていきます。 そのため、サイトの上部にリンク先のボタンや文字など用意することになります。 このリンクは画像などでも構いません。 そして、任意の位置にidを付けることでアンカーリンクを作成することが可能です。 (htmlファイル) <a href="#test1">ページ内リンクへ移動</a> <a href="#test2">ページ内リンクへ移動</a> <div> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p id="test1">ページ内リンク</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <h2 id="test2">見出し</h2> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> </div>   執筆してくれたメンター 木村勇土 TechAcademyの現役メンター。 現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。 WordPressを中心とした自社のWebサイトの修正などを行なっている。   大石ゆかり HTMLで複数のアンカーリンクが使えない理由がよく分かったので良かったです！ 田島悠介 ゆかりちゃん、これからも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

CSSでページ内リンクのアンカーをスタイルする方法を現役エンジニアが解説【初心者向け】

CSSでページ内リンクのアンカーをスタイルする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ページ内リンクのアンカーをスタイルする方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 CSSのページ内リンクとアンカーについて CSSでアンカーをスタイルできること アンカーをスタイルする時の注意点 アンカーをスタイルしてみよう まとめ   CSSのページ内リンクとアンカーについて <a>要素のことをアンカータグと呼びます。 <a>要素でページ内リンクを作成するには、リンク先の要素にidを指定し、<a>要素のhref属性でそのidを指定しましょう。 なおアンカーとは「錨」や「しっかり固定する」という意味です。 <a href="#sec1">リンク</a> <h1 id="sec1">見出し</h1>   ページトップに移動したい時は以下のように「#」または「#top」をhref属性に指定しましょう。 <a href="#">リンク</a>     [PR] HTML/CSSで挫折しない学習方法を動画で公開中CSSでアンカーをスタイルできること アンカーは通常青字で下線を引いたスタイルで表示されます。 また、遷移したことのあるアンカーは紫色で表示されます。 これらはCSSで色や下線の表示を変更することが可能です。   アンカーをスタイルする時の注意点 アンカーをスタイルする際は、文字の見た目やカーソルなどがアンカー要素であることが分かるように注意しましょう。 意図しない動作はユーザーに分かりづらく、再度ページを訪れてくれる可能性も少なくなります。   アンカーをスタイルしてみよう 今回のサンプルプログラムでは、ページ内リンクのアンカー要素のスタイルを変更する方法について確認しましょう。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> h1 { display: inline-block; } a { text-decoration: none; color:
CSS

HTMLの要素ハイパーリンクを現役デザイナーが解説【初心者向け】

HTMLの要素ハイパーリンクについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ハイパーリンクについて詳しく説明していくね！ 大石ゆかり お願いします！   ハイパーリンクとは HTML文書から他のHTML文書にページ遷移（移動）ができます。さらに、互いにリンクを設定してから、相互に移動できることから、「ハイパーリンク」と呼ばれていました。厳密にはブラウザによるHTML文書の「参照」ですが、Webの黎明期に、この機能が注目されて、話題になりました。 なお、リンクを設定しても、ページのURLが存在していなければ、それを表現している「404エラーページ」が表示されることになります。現在は、「ハイパーリンク」と呼ぶよりは、「リンク」がその意味を含んでいる場合が多いです。   ハイパーリンクする方法（aタグについて） aタグは、Anker（アンカー）の略語です。   html <a href="https://techacademy.jp/">テックアカデミー</a> テックアカデミー aタグのhref属性にURLを記述することにて、リンクを設定できます。実際に、画面に表示されている上記の文字をクリックしますと、テックアカデミーのトップページにページ遷移（移動）します。これは、ブラウザが、HTML文書内部のaタグに記述されているURLを自動的にWebページのアドレスとして識別してから、接続を実施する仕組みになっています。 また、HTML文書への移動だけができることではありません。他のソフトウェアを起動させることも可能になっています。例えば、専用のプロトコルとメールアドレスを記述してから、ユーザーが標準的に使用しているメールソフトを起動することもできます。以下に、そのサンプルコードを提示します。 html <a href="mailto:sample@sample.com">試験メール</a> 試験メール ※この手法ついて、メールアドレスを不正利用されて、迷惑メールが届く可能性を否めませんので、推奨はしません。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中ハイパーリンクしてみよう 下記にサンプルコードを用意しました。まずは、href属性のダブルクォーテーションにて包まれた内側にURLを定義してから、次に、「文字」の部分をサイトのタイトルなどに変更してみてください。 html <a href="">文字</a>   <a href="https://techacademy.jp/first-programming-bootcamp">はじめてのプログラミングコース</a> はじめてのプログラミングコース   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbuttonタグとaタグとinputタグで迷っている方 この記事を読むと、迷わずボタンを作れるようになりますよ。 HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   目次 buttonタグとは 類似するタグ buttonタグを使ってリンクを貼ってみよう   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 buttonタグを使ってリンクを貼る方法について詳しく説明していくね！ 大石ゆかり お願いします！   buttonタグとは buttonタグとはHTML要素の1つでクリックできるボタンをつくるものです。 タグは以下のように記述します。 <button>ボタン</button> buttonタグの属性などについては、詳しくは以下のページも参考にしてください。 <button>:ボタン要素(MDN)   buttonタグを使ってボタンの見た目ができたら、リンクの動きを設定していきます。 <button type=“button” onclick="location.href='https://techacademy.jp/magazine/'">ページリンク</button> onclick属性という、クリックしたときの動きをJavaScriptで指定する属性を使いましょう。   上記例では、onclick属性にこのような値を設定しています。 location.href='https://techacademy.jp/magazine/' JavaScriptでは、location.href=’ URL ‘ とすることで、URLへページ遷移する動きになります。   これで、buttonタグでページリンクができました。   [PR] HTML/CSSで挫折しない学習方法を動画で公開中類似するタグ buttonタグに類似するタグとしては、aタグやinputタグなどがあります。 どれもボタンとしての見た目や機能を作ることができますが、違いがあります。 簡単にまとめてみました。 カスタマイズしやすさ フォームボタン機能 リンク buttonタグ 〇 カスタマイズ可能 〇 フォームボタンとして 利用可 〇 JavaScript aタグ ◎ 簡単にカスタマイズ可能 × フォームボタンとして 利用不可 ◎ href属性 inputタグ × カスタマイズ不可能 〇 フォームボタンとして 利用可 〇 JavaScript   buttonタグとaタグは、CSSでデザインをカスタマイズすることができますが、inputタグはできません。 buttonタグとinputタグは、フォームのボタンとして使うことができますが、aタグは使えません。   詳しく解説していきます。   aタグ(アンカー要素) クリックすると指定先に遷移します。 <a href="https://techacademy.jp/magazine/">Techacademyマガジン</a> <a>:アンカー要素(MDN)   CSSを適用して、下線を消したり色をつけたり影をつけたりすると、ボタンのような見た目になります。   aタグをボタンとして使えない、と誤解されている方もいらっしゃいますが、そんなことはありませんよ。 HTMLの規定を定めるW3Cの仕様には、aタグの中にインタラクティブコンテンツを入れてはいけないと定められています。 buttonタグもインタラクティブコンテンツに含まれるので、aタグでボタンは作ってはいけないと誤訳してしまったんですね。   aタグの子要素にbuttonタグを入れてボタンを作ってはいけません、というのが正確です。 aタグに対して、CSSでボタンのような見た目を作り、ボタンとして使うことは問題ないですよ。   本記事のテーマである「リンクを貼る」動きは問題ありませんが、フォームボタンの機能は持ち合わせていないので、注意してください。   inputタグ ユーザーからデータを受け取るためのタグです。 typeに「button」を指定することでボタンを表現できます。 <input type="button" value="ボタン"> <input>:入力欄(フォーム入力)要素(MDN)   比べてみるとわかる通り、buttonタグやaタグには子要素を作ることができます。 ボタン上に表示される内容を子要素として作っていくので、ボタンに画像を入れたり、複数行にしたり、カスタマイズ可能です。 しかし、inputタグは子要素を作ることができず、表示内容はvalue属性で設定するので、文字列1行だけです。 子要素を作れないことにより、input要素はCSSで複雑な装飾をするときに便利な機能、疑似要素を使うことができません。   inputタグでできることは、すべてbuttonタグでも同じ以上のことができます。   buttonタグを使ってリンクを貼ってみよう buttonタグを使ってリンクを貼る場合、onclick属性に以下の内容を記述しましょう。 onclick="location.href='https://techacademy.jp/magazine/'" 「’https://techacademy.jp/magazine/’」の部分がリンク先です。   buttonタグ全体では以下のようになります。 <button onclick="location.href='https://techacademy.jp/magazine/'">Techacademyマガジン(button版)</button>   buttonタグ、aタグ、inputタグそれぞれでリンク先に遷移する要素を作成してみましょう。 aタグは、CSSを設定することでボタンのような見た目を表現しました。 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> .a_button { display: inline-block; border-style: solid; background-color: lightgray; border-width:1px;
HTML

HTMLをリンクして新しいウィンドウで開く方法を現役エンジニアが解説【初心者向け】

HTMLをリンクして新しいウィンドウで開く方法について解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 HTMLをリンクして新しいウィンドウで開く方法について詳しく説明していくね！ 大石ゆかり お願いします！   リンクタグとは リンクタグは、ブラウザの画面を閲覧中のHTML文書(Webサイト)から他のHTML文書に移動させるものです。ブラウザで閲覧中の画面の内容が変更されることから、「ページ(画面)遷移」とも呼ばれています。 そして、「ページ遷移」を実現するための代表的な手法として、「リンクタグ」(aタグ)があります。そして、aタグとタグに付随する属性(href)を記述し実装します。以下がリンクタグを用いるコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー</a> テックアカデミー 属性の使い方と新しいウィンドウで開く方法 aタグに付随する属性は、約10種類以上もあるものの、おもに使用するのは2種類のみです。「リンクタグ」の説明でもふれたhref属性、その「ページ遷移」を実現するための対象を定めるtarget属性です。この他の属性は、ブラウザの種類によっては、挙動として不安定な動作があるため、細かく知らなくても問題ありません。 以下のコードは新しいウィンドウを開くためのコードの例となります。 HTML <a href="https://techacademy.jp">テックアカデミー｜同一の画面</a> <a href="https://techacademy.jp" target="_blank">テックアカデミー｜新しいウィンドウ(タブ)</a> テックアカデミー｜同一の画面 テックアカデミー｜新しいウィンドウ(タブ) 同一の画面の方は新規のタブを開くことなく、そのままリンク先に移動します。 対して、新しいウィンドウ(タブ)の方はtarget属性の値として_blankを設定しているため、href属性の値として指定されたURL(リンク先)がブラウザの新しいタブで表示されます。 また、余談として、新しいタブが作られる場合に、タブの機能がなかった古いブラウザでは、リンク先が文字どおり「新しいウィンドウ」と表示されていました。 [PR] HTML/CSSで挫折しない学習方法を動画で公開中新しいウィンドウで開く場面 同じドメインのWebサイトから、他のドメインのWebサイトを表示させる場合では、「新しいウィンドウ（タブ）」が活用されています。また、閲覧中のWebサイトからユーザーを離脱させたくないなどの理由がある場合は、「新しいウィンドウ（タブ）」で表示させる方法がよく選ばれています。   監修してくれたメンター 井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。   大石ゆかり HTMLをリンクして新しいウィンドウで開く方法がよくわかりました！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！ TechAcademyでは初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
HTML

TechAcademyから
現役エンジニアの方へ
お知らせ

藤門千明
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでアンカータグを使う方法【初心者向け】