【HTML入門】リンクタグの使い方を4つのステップで理解しよう

HTMLでリンクを挿入するにはどうすればいいの?
別窓でリンクを開く方法が知りたい
画像にリンクを貼る方法が知りたい

こんにちは!侍エンジニア塾ブログ編集部のシホです!

みなさんはHTMLのリンクタグの使い方をマスターできていますか?リンクタグの基本が理解できると、画像にリンクをつけたり、リンクの文字の色を簡単に変えることができるようになります。

今回はHTMLのリンクについて、基本的な部分を詳しく解説していくので、ぜひリンク表示の表現の幅を広げてみてください!

この記事はこんな人のために書きました

  • HTMLでリンクを挿入する基本が知りたい人
  • 別窓でリンクを開く方法や画像にリンクを貼る方法が知りたい人

HTMLリンクタグの使い方

みなさん、以下のようなリンクをよくWebページ上でみることがあると思います。

この色がついた部分をクリックすると、侍エンジニア塾ブログのトップページに飛ぶという仕組みですが、これを「リンク(特定の別のページに飛ぶ)する」といいます。

HTMLのリンクタグを使うことによって、このように文章の一部をクリックすると、別の特定のページに飛ばすことができます。

リンクタグの使い方4つのステップ

ここではリンクタグの使い方について、それぞれ解説していきます。

リンクの作成

まずはリンクタグの使い方を説明します。リンクタグは一般的に使われる次のタグを使います。

<a href="ジャンプ先のURL">アンカーテキスト</a>

a href(エー・エッチレフ)は「anchor(錨)」と「hyper referenc(ハイパーリファレンス)」の略です。また、アンカーテキストの部分には、「リンク先のURL」「ホームページ名」や「こちらをクリック」など、作成者によってさまざまな言葉が書くことができます。

See the Pen VxpeVy by Shiho Sakai (@shiho-sakai) on CodePen.0


リンクの作成

別窓でリンクを開く

次に、リンクをクリックしたときに新しい画面が立ち上がり(別タブが開く)、特定の別ページにジャンプさせる方法を解説します。

先ほどのサンプルコードでできた、「侍エンジニア塾ブログはこちら」の色がついた部分(リンクタグで囲んだ部分)をクリックすると、結果画面が切り替わってリンク先のURLにジャンプしたと思いますが、別タブで開かせることも可能です。

別のタブを開いて特定のページにジャンプさせるには、「target="_blank"」を追加します。

<a href="ジャンプ先のURL" target="_blank">アンカーテキスト</a>
(※targetの前に半角スペースが必要です)

See the Pen LmWNzr by Shiho Sakai (@shiho-sakai) on CodePen.0


別窓でリンクを開く方法

上のサンプルコードでできたリンクをクリックすると別タブで新しくページが開いたと思います。このように「target="_blank"」を追加するだけで別タブでリンク先を表示することが可能です。

ただし一点注意が必要です。

たくさんのリンクタグを別タブで開くように設定してしまうと、リンクをクリックするたびに新しい画面が立ち上り、閲覧者にとっては非常に面倒くさい状況になってしまいます。

現在のページを残したままで他のページを参照する必要性がない場合は、あまり設定しないようにしましょう。

リンクに色をつける

侍エンジニア塾ブログトップはこちら

先ほどから例に出している上のリンクですが、最初は青だったはすが、クリックしたあとは紫になっていませんか?(なっていない場合は更新ボタンを押してみましょう)

この色の変化はデフォルトですが、<body>タグの中でlink属性・alink属性・vlink属性に色を指定してあげると、変えることもできます。


<body link="色"> ~ </body>
→まだ訪問していないページへのリンクの色

<body alink="色"> ~ </body>
→選択中のリンクの色

<body vlink="色"> ~ </body>
→既に見たページへのリンクの色

このように、3つの条件下でリンクの色を設定できます。

<body>タグ内に、複数の属性を指定をしたいときは、半角スペースで区切って属性名と色を指定しましょう。

色の部分はカラーコードまたは英語表記で書くことができます。

赤にしたい場合の例
・カラーコード→<body link="#ff0000">
・英語表記→<body link="red">

See the Pen ZoeWNa by Shiho Sakai (@shiho-sakai) on CodePen.0


リンクに色をつける方法

上のサンプルコードで作ったリンクをクリックして更新してみると、リンクの色が変わるので確認してみてください。

画像にリンクを貼る

画像にリンクを貼ることもできます。

<a href="URL"><img src="画像のファイル名" alt="画像の説明文"></a>

imgは「Image(画像)」の略で、画像を表示するタグです。表示する画像ファイルはsrc属性で指定します。srcは「source」の略です。

画像ファイル名には、表示したい画像の保存場所を指定します。初心者の方はまずはHTMLファイルが保存されている同じ場所に画像を保存しておきましょう。

HTMLファイルと同じ場所にあれば、そのまま画像のファイル名を記述するだけで大丈夫です。

サンプルコード

リンクをつけたい画像を、HTMLファイルと同じ場所に「blogtop.png」という名前で保存しておく。

<a href="https://www.sejuku.net/blog/"><img src="blogtop.png" alt="侍エンジニア塾ブログトップ" /></a>

ブラウザ表示
スクリーンショット 2018-05-01 0.30.08

画像にリンクを貼る

上の画像をクリックすると、侍エンジニア塾ブログトップにジャンプします。

まとめ

いかがでしたでしょうか。リンクの基本のタグと様々な要素や属性を一緒に使うと、リンク表示の幅が広がりますね。

この記事が参考になれば幸いです

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

シホ

シホ

1990年生まれ。長崎県出身。趣味は歌・登山・暗闇ボクシング。
最近HTMLとCSSの勉強を再スタートしました!
「初心者の方にもわかりやすく」をモットーにライターとして日々精進中です★

おすすめコンテンツ

いまならレッスン期間が2週間延長!この秋、プログラミングを学ぼう

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー