別窓でリンクを開く方法が知りたい
画像にリンクを貼る方法が知りたい
こんにちは！侍エンジニアブログ編集部のシホです！
みなさんは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.
別窓でリンクを開く
次に、リンクをクリックしたときに新しい画面が立ち上がり（別タブが開く）、特定の別ページにジャンプさせる方法を解説します。
先ほどのサンプルコードでできた、「侍エンジニアブログはこちら」の色がついた部分（リンクタグで囲んだ部分）をクリックすると、結果画面が切り替わってリンク先のURLにジャンプしたと思いますが、別タブで開かせることも可能です。
別のタブを開いて特定のページにジャンプさせるには、「target=”_blank”」を追加します。
<a href=”ジャンプ先のURL” target=”_blank”>アンカーテキスト</a>
（※targetの前に半角スペースが必要です）
See the Pen LmWNzr by Shiho Sakai (@shiho-sakai) on CodePen.
上のサンプルコードでできたリンクをクリックすると別タブで新しくページが開いたと思います。このように「target=”_blank”」を追加するだけで別タブでリンク先を表示することが可能です。
ただし一点注意が必要です。
たくさんのリンクタグを別タブで開くように設定してしまうと、リンクをクリックするたびに新しい画面が立ち上り、閲覧者にとっては非常に面倒くさい状況になってしまいます。
現在のページを残したままで他のページを参照する必要性がない場合は、あまり設定しないようにしましょう。
リンクに色をつける
先ほどから例に出している上のリンクですが、最初は青だったはすが、クリックしたあとは紫になっていませんか？（なっていない場合は更新ボタンを押してみましょう）
この色の変化はデフォルトですが、<body>タグの中でlink属性・alink属性・vlink属性に色を指定してあげると、変えることもできます。
・
<body link=”色”> ～ </body>→まだ訪問していないページへのリンクの色
・<body alink=”色”> ～ </body>
→選択中のリンクの色
・<body vlink=”色”> ～ </body>
→既に見たページへのリンクの色
このように、３つの条件下でリンクの色を設定できます。
<body>タグ内に、複数の属性を指定をしたいときは、半角スペースで区切って属性名と色を指定しましょう。
色の部分はカラーコードまたは英語表記で書くことができます。
赤にしたい場合の例
・カラーコード→<body link=”#ff0000″>
・英語表記→<body link=”red”>
See the Pen ZoeWNa by Shiho Sakai (@shiho-sakai) on CodePen.
上のサンプルコードで作ったリンクをクリックして更新してみると、リンクの色が変わるので確認してみてください。
画像にリンクを貼る
画像にリンクを貼ることもできます。
<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>
ブラウザ表示
上の画像をクリックすると、侍エンジニアブログトップにジャンプします。
まとめ
いかがでしたでしょうか。リンクの基本のタグと様々な要素や属性を一緒に使うと、リンク表示の幅が広がりますね。
この記事が参考になれば幸いです
