【副業を始めたい人必見!】副業開始マニュアル

【aタグ】リンクの挿入方法を解説!

【aタグ】リンクの挿入方法を解説! HTML

どうも!ニシドラ(@nishidorablog)です。

ニシドラ
ニシドラ

この記事ではHTMLでのリンクの挿入方法について解説します。

リンクを挿入するために使うHTMLタグはaタグ」です。
このaタグは、WEBサイトにとってリンクを挿入することは必須要素です。

ニシドラブログのトップページはこちら!

↑の「ニシドラブログ」の部分がリンクになっています。
青文字にアンダーバーが表示されているかと思います。

このリンクの作成方法を解説します。
その他に、aタグの使い方や画像をリンクにする方法(画像がリンクになっていてクリックすると任意のページにジャンプする)、細かいテクニックを解説していきます。

【HTML初心者向け】まとめ記事一覧

前回の、箇条書きリストの作成方法については、【ul・olタグ】箇条書きリストの作成方法を解説!でまとめています。

スポンサーリンク

リンクの指定方法

リンクを挿入する際に使うタグはaタグ」です。
aタグの「a」は「anchor」の略で、HTMLでは始発点や終着点を意味しています。

aタグはリンク(ファイル名やURLなど)を指定する「href属」を共に使います。

href属性

href属性の「href」は英語で「hypertext reference」を略して表しています。
直訳すると「ハイパーテキストを参照」という意味です。


ハイパーテキスト

直訳で「テキストを超えた文章」という意味。
コンピューターを利用した文書作成・閲覧システムの1つで、複数の文書を相互に関連付け、結び付ける仕組み。文書のほか、画像、図表、音声、動画、3次元グラフィックなどもリンクできる。

上記の通り、href属性は「テキストと画像や動画、音声など」を関連付けさせることが出来るようになります。

a href …タグ

hrefの後に「=”ファイル名やURL”」を書くことでリンクを指定することができます。

実際にhref属性でリンクを指定したコードが以下のものです。

ここから<a href=”https://www.google.co.jp”>Google</a>のトップページに飛びます。

このコードではGoogleのトップページにジャンプするようにしたかったので「GoogleのURL(https://www.google.co.jp)」をhref属性で指定しました。

開始タグと終了タグの間に「Google」というテキストを書いています。

こうすることでブラウザ上でこのテキストを表示させると「Google」というテキストがリンクになり、クリックすることで指定したGoogleのトップページにジャンプすることができます。

googleに飛ぶ

画像にリンクを挿入する方法

画像にリンクを挿入することで、画像をクリックすると任意のページにジャンプするように設定することが出来ます。

画像を挿入する場合に使う「imgタグ」をaタグで囲うことで画像にリンクを挿入することができます。

画像の挿入方法については、【imgタグ】画像の挿入方法を解説!でまとめています。

実際にコードを書いてみると以下のようになります。

<a href=”https://www.google.co.jp”>
<img src=”sample.jpg” alt=”サンプル画像”>
</a>

これで画像をクリックするとにジャンプするようにできました。

メールアドレス宛てのリンクを作成する方法

メールアドレス宛てのリンクを作成するには、href属性に「mailto:」と「送り先のメールアドレス」を記述します。

書き方は以下のコードのようになります。

<a href=”mailto:メールアドレス”>お問い合わせ</a>

ユーザーが「お問い合わせ」をクリックすると使用しているメールクライアントが立ち上がり、送信先に今回コードに書いたメールアドレスが入力されます。

最近ではリンクにメールアドレスを入れるのではなく、「お問い合わせフォーム」を作成するのが主流です。
こういうやり方もある程度に覚えておきましょう。

ページ内リンクを指定する方法

aタグを使って「#○○」へのリンクを作成することで、ページ内のid属性で指定した「○○」へジャンプすることができます。

<a href=”#title”>ジャンプする</a>

 

 

<h2 id=”title”>ここにジャンプ</h2>

例として上のような2つのコードがあったとします。

aタグのhref属性に「#」を加えて「#title」という値を付けています。

このリンクをクリックすることで右の「id=”title”」を目印にして、ページ内の別の場所にジャンプすることができるようになります。

また、この指定方法で別記事の特定の場所へジャンプさせることもできます。

id属性については、【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法で解説しています。

リンク先を別のタブで表示させる方法

これまで解説してきた方法はリンクをクリックすると同じタブ上に表示されていましたが、別のタブに表示させる方法もあります(タブの場所は下の画像で確認)。

タブの場所

別のタブに表示させるにはhref属性を書いた後に、一つスペースを空けて「target」属性を書くことでできます。
target属性はリンク先の内容をどのフレーム(ウィンドウ)で開くか指定することができます。
別ウィンドウで表示させるには「_blank」という値を指定します。

Googleのトップページを別ウィンドウで開いてみたいと思います。

<a href=”https://www.google.co.jp”> target=”_blank”>Google</a>

上のコードをブラウザ上で表示させ、「Google」をクリックすると別ウィンドウで開くことができます。

target属性を」指定することで別ウィンドウで表示させることができるようになりますが、同じウィンドウで開くことができなくなります。
これには賛否があり、「ユーザーにウィンドウの開き方を委ねるべき!」という考えがあるため、採用する際は十分検討してから使いましょう。

まとめ

今回の内容をまとめると以下のようになります。

  • リンクの挿入には「aタグ」を使い「href属性」で指定する
  • 画像のリンクを作成するにはimgタグをaタグで囲う
  • メールアドレス宛てのリンクを作成するにはhref属性で「mailto:メールアドレス」を指定する
  • 「target属性」を使うことで別ウィンドウで表示させることができる(賛否あり)

aタグを使うことでリンクを作成できると解説してきました。

WEBサイト作成にはリンクを挿入することで使い勝手がよくなります。

また、同ページ内に別ページのリンクを張り巡らせることで集客効果があり、SEO対策にもなるのでしっかりマスターしましょう。

次回は、「表の作成方法」について解説しています。

コメント

タイトルとURLをコピーしました