HTMLでURLをクリックできるようにするリンクの作り方

HTMLでURLをクリックできるようにするときのリンクの作り方を説明していきます。

URLリンクを作るHTMLタグはどんなタグを使えばいいのか、そのタグはどのように書くことでリンク先に飛べるように作れるのか。

そして作成するURLをクリックしたら別タブでリンク先が開くようにする作り方と画像にリンクをするHTMLの書き方も説明します。

HTMLでURLをクリックできるようにするには

HTMLでURLをクリックできるようにするには、リンクするURLのページに飛ぶ仕組みに必要なリンクタグの使い方、それとクリック先のURL指定をする作り方がわかるだけで実現できます。

HTMLの記述量も少ない簡単な書き方なので、使用するHTMLタグから説明していきます。

HTMLのリンクタグを使用する

URLをクリックできるようにするために使うHTMLタグは<a>タグです。

<a>タグは「Anchor(アンカー)」の略です。

リンクタグにするためにaタグを使用すると記述したHTMLページはリンクの出発点になり、リンクタグの属性値で指定したURLがリンクの到達点、つまりリンク先になるようにリンク作成ができます。

リンクタグでURLをクリックできる作り方

URLリンクをクリックできる作り方は、開始タグの<a>と閉じタグの</a>を記述してから開始タグ<a>にhref属性を書きます。

そしてhref属性の属性値にはリンクするURLを指定し、開始タグと閉じタグの間にアンカーテキストを書きます。

アンカーテキストとは、HTMLの中でリンクが設定された文字のことです。

href属性に指定する値は「絶対パス」や「相対パス」でリンク先のURLを書きます。

絶対パスは「http」や「https」から始まるURLのことを言います。なのでaタグのhref属性の属性値も含めたリンクの作り方は以下のHTMLコードのように書きます。

上記HTMLコードの作り方でこのブログのトップページに飛ぶようになっています。

そして相対パスでリンクをクリックできるようにする作り方は以下のようにHTMLを書きます。

相対パスを使うリンクはファイル内の指定をするときに使用することが多いのかと思います。

例えばサイトメニューを作成するときに、お問い合わせHTMLファイルやトップページのHTMLファイルを相対パスでリンクして繋ぐ場合に使います。

絶対パスと相対パスについての詳細は下記を参考にしてください。

URLリンクを別タブで開くようにするには

HTMLにはリンクしたURLをクリックすると「別タブ」で開くようにする作り方があります。

先ほど説明したURLリンクのHTMLの書き方は、URLリンクをクリックすると現在見ているタブ(ページ)に上書きするような感じでリンク先ページへと画面が切り替わります。

一方で「別タブ」の場合は現在見ているページのタブをそのまま表示しておき、リンク先になるURLリンクをクリックすると新たな「別タブ」で開くことができます。

例えば現在ページから参考用のデモページを開くURLリンクを作るときに、別タブでデモページを開けるようにして現在ページに戻りやすくする。ということができます。

基本的には外部リンクは別タブにすることが多いのではないでしょうか。

別タブでリンク先を開くaタグの属性とその値

URLリンクを別タブで開くHTMLの書き方はaタグを使いますが、URLリンクをクリックしたら別タブで開く場合はtarget属性とその値にする_blankを使います。

aタグのtarget属性の値の_blank。とか言いづらい言い回しよりも「ターゲットブランク」と言うことの方が多いみたいですね。

まぁリンク先を別タブで開くときはaタグにターゲットブランクをつけてあげましょうと言う理解でいきましょう。

別タブで開けるようにするURLリンクの作り方

別タブで開けるようにするURLリンクの作り方は以下のようにHTMLを書きます。

開始タグ<a>と閉じタグ</a>を記述したら、開始タグ<a>にリンク先のURLを値で書きます。上記HTMLコードはhttps://shu-sait.comこのブログのトップページを指定してます。

その後にtarget=”_blank”を記述してaタグの閉じタグ<a/>を記述。

そして実際にクリックできるリンクテキストを<a></a>の中に書くことで別タブで開くURLリンクが作れます。

HTMLで画像をクリックできるようにするには

次はHTMLで画像をクリックできるようにしたいときには、どのようなHTMLを書けばいのかについて説明です。

リンクテキストをクリックできるようにするURLリンクと、画像をクリックできるようにするリンク画像は、どちらもブログやウェブサイトでは使用することが多いので使用目的に分けて使えるように覚えておくのをおすすめします。

リンク画像の作り方

リンク画像の場合は、先述してきたHTMLのaタグでhref属性、そして値にリンク先のURLを指定するまでは同じ書き方をします。

そして画像を表示させるためにリンクテキストの部分は消します。代わりにimgタグを書いてsrc属性の属性値で使用する画像のパスを指定します。以下のようにHTMLを記述します。

URLリンクをクリックできるようにするリンクテキストのときは<a></a>に挟まれることでテキストがクリックできるようになっていました。

それなのでリンク画像はリンクテキスト部分をテキストとしてではなく、画像で表示してますよというHTMLをa要素の中にimgタグで指定をすることでリンク画像をクリックできるようになるというわけです。

リンクした画像を別タブで開く作り方

最後に今回の記事で説明してきた内容を全て使用して作るURLリンクです。

リンク画像をクリックすると指定したリンク先へ別タブで開けるように作ります。

HTMLは3行で済みます。HTMLタグはaタグとimgタグだけです。

どんなページのURLをどんな形でクリックできようにしてあげるか。ということをHTMLで実現できるのがHTMLでURLをクリックできるようにするリンクの作り方です。

まとめ

HTMLでリンク先を指定する作り方は覚えてしまえば簡単なHTMLの記述で済みます。

初めてチャレンジしてみようかなという場合は、基本のaタグの要素を作って表示で確認しながら別タブのHTML記述を追加、そして画像を加えてクリックできるように進化させて記述していくとURLリンクが理解しやすくなります。