HTMLリンクタグの使い方が一目でわかる!3つの便利な知識も紹介

web開発

2017/04/11

web開発

HTMLにおけるリンクの作り方について、HTML初心者向けに解説します。

※HTMLとは何かがあまり理解できていない人は、HTMLについて初心者向けに解説した記事をご覧ください。

本記事を読めば、HTMLでのリンクの貼り方(タグ)、リンクに色をつける方法、リンクを別タブ(別ウィンドウ)で開くようにする方法、画像をリンクにする方法が理解できるでしょう。

ぜひ最後まで読んで、HTMLでのリンクの作り方を学習してください!

 

HTML リンクタグでリンクを作ろう!

HTMLでリンクを作るには、<a>タグを使います。

<a>タグの使い方は以下のようになります。

アンカーテキストとは、「こちら」や「トップページに行く」「ここをクリック!」など様々な言葉が使われます。

アンカーテキストの例

では、実際にリンクタグを使ってみましょう。

「Googleへ」というリンクをクリックしたら、Googleのトップページ(https://www.google.co.jp/)へ遷移できるようなリンクを作ってみます。

以上のようなHTMLを書くと、以下のようになります。

HTML リンクの例

そして、実際にリンクをクリックすると、Googleのページへ遷移できます。

Googleのページへ遷移後

いかがでしたか?HTMLのリンクタグのイメージができましたか?

次の章からは、HTML リンクタグで使える便利な知識を紹介していきます!

 

HTML リンクに色を付けよう!

HTMLでリンクを作成するときには、一目でリンクだとわかるように色をつけることをお勧めします。

例えば、以下の2つのリンクを並べたとき、下のリンクのように色が付いている方がリンクであることが一目でわかると思います。

2つのリンクを並べた場合

今回は、リンクに色をつけるためにstyle属性を使ってみます。

※style属性とは何かを学習したい人は、style属性について解説した記事をご覧ください。

では、先程と同様にGoogleのトップページへのリンクを作成してみましょう。

すると、以下のようにリンクに色が付きました。

HTML リンクに色が付いた場合

 

HTML リンクを別タブ(ウィンドウ)で開けるようにしよう!

今までの学習してきたリンクの作成方法では、リンク先が別タブ(ウィンドウ)で開きませんでした。

リンク先を別タブ(ウィンドウ)で開くようにするには、target属性というものを使い、「_blank」という値を指定します。

では、Googleのトップページへのリンクを別タブ(ウィンドウ)で開けるようにしてみましょう。

すると、以下のように別タブ(ウィンドウ)で開けるようになります。

別タブ(ウィンドウ)で開けるようになった場合

するt、以下のようにリンク先が別タブで開きます。

別タブ(ウィンドウ)で開けるようになった場合

 

画像をリンクにしよう!

HTMLで画像をリンクにするには、<a>タグの中に<img>タグを配置します。

※<img>タグが理解できていない人は、<img>タグについて解説した記事をご覧ください。

では、下のようにGoogleへという画像(google.png)をクリックするとGoogleのトップページへ遷移するようにしてみましょう。

Googleへという画像

以下のようにHTMLを記述します。

すると、以下のように画像がリンクになります。

すると、以下のように画像がリンクになった場合

Googleトップページに遷移します。

Googleのページへ遷移後

 

いかがでしたか?

HTMLでのリンクの作成方法や色を付ける方法、リンク先を別タブ(ウィンドウ)で開く方法、画像をリンクにする方法が理解できましたか?

リンクを生成するのはHTMLの基本の1つなので、ぜひ覚えておきましょう!

udemyでは、HTMLを学習し始めた人や、HTML初心者にも丁寧でやさしい講座を開設しています。

ぜひ受講して、HTMLをマスターしてみてはいかがでしょうか?

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事