閉じる

【HTMLリンク】 aタグの使い方+カスタマイズ方法(初心者向け)

【HTMLリンク】aタグの使い方、カスタマイズ方法を、初心者の方向けに紹介。 各方法サンプルコード付きで詳しく解説。サンプルコード付きなので実際に手を動かして学ぶ事ができ、ご自身のweb制作に活かす事ができます。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「リンクを作成できる様になりたい・・!」「aタグって何・・?」「様々な種類のリンクを作成したい・・!」

そのように悩んでいる初心者WEB製作者の方も多いのではないでしょうか?
WEBサイト制作を行う上で、リンクの作成方法は必須です。
でも安心して下さい思っている以上にリンクの作成は簡単です。
この機会にリンクの作成方法を覚えて初心者から一歩抜けましょう。

今回は、「リンク(aタグ)」の作成方法」「aタグに関する各属性の意味」「<a>タグのデザインを変更する方法」を中心に詳しく解説していきます。

リンク<a>タグとは?

リンクとはこのようなクリックできるテキストリンクの事を言います。

リンクを作成するには、aタグという要素にhref属性を使用しリンク先を指定します。

aタグの基本的な書き方

基本的な書き方をを解説します。

<a>タグを記述します。 href属性にリンクさせたいパスを書き込みます。 リンクさせたい文字を<a href=”リンク先のパス”>〜</a>で囲みます。

○ヤフーへのリンクの作成

サンプルコード表記結果↓

Yahoo

HTMLサンプルコード

※解説
リンク先のパス記入欄に「YahooのトップページURL」を記述し、リンクさせたい文字を<a href=”https://www.yahoo.co.jp/”>〇〇</a>の〇〇内に記載します、今回は「Yahoo」を記入しました。
これで「Yahoo」の文字を押すと「Yahooのトップページ」にリンクする事ができます。

target属性

target属性は、a要素、area要素、link要素におけるリンクアンカーの表示先を指定します。

少しわかりずらいので、ざっくりいうと、aタグにtarget属性「target=”_blank”」を追加すると、リンクした際に、別ダブでWEBページを開く設定にできるという事です、下記に例を出します。どちらもクリックしてみて下さい。

HTMLサンプルコード(target属性なし)

サンプルコード表記結果

targetが指定されていない場合↓

Yahoo

HTMLサンプルコード(target属性あり)

サンプルコード表記結果

targetが指定されている↓

Yahoo

※解説
「target属性(target=”_blank”)、が指定されてない場合」は同じWEBページ内で「Yahoo」のトップページが開きます。
「target属性(target=”_blank”)が指定されている場合」は別タブ(ウィンドウ)で「Yahoo」のトップページが表示される。
この違いを作れるのがtarget属性(target=”_blank”)です。

上記は別タブにリンクできる(target=”_blank”)の指定でしたが
target属性で指定できる値は他にもあります。

「_self」リンク先は現在の表示先に展開されます。
「_patent」リンク先は現在の表示先の1つ上の表示先に展開されます。
「_top」リンク先は現在の表示先の最上位の表示先を対象に表示されます。

上記3点は少し難しいので、「別タブで開きたい場合はtarget=”_blank”」を指定する、の理解で大丈夫です、詳しく知りたい方は下記を参照にして下さい。

https://www.osaka-kyoiku.ac.jp/~joho/html5_ref/target_attr.php

画像でのリンク作成

画像のリンクボタンを作成します。

サンプルコード表記結果↓

HTMLサンプルコード

※解説
画像のリンクボタンを作成するには、<a>タグで画像(imgタグにパスかURL)をはさむことで表示する事ができます。
今回の例では「href=”日本サッカー協会HPのURL”」「img画像にサッカーボールの写真」を表示しました。

タグのデザインを変える方法

リンクを作成した際デフォルトだと、下記の様になっています。

デフォルトだと
●下線が入っている
●文字色が青い

aタグの初期設定では、上記の2点の表示になってしまいます。
2点の初期値を変更する方法を解説します。

下線を消す

CSSで「text-decoration: none;」を指定し下線を消します。

サンプルコード表記結果↓
Yahoo

HTMLサンプルコード

CSSサンプルコード

※解説
aタグに「text-decoration:none;」を指定し下線を消すことができます。
また下記の様に、HTMLにクラスを指定し「text-decoration:none;」を指定する事もできます。

HTMLサンプルコード

CSSサンプルコード

文字色を変更する

CSSで「color」を指定します。

サンプルコード表記結果

これを作る↓

Yahoo

HTMLサンプルコード

CSSサンプルコード

こちらもクラスを指定し「colorプロパティ」を指定する事もできます。

カーソルをのせた時に変化を加える(hover)

カーソルをのせた時に、よりリンクをクリックしてもらえるように変化を加える事ができます。

○文字色を変化させ、文字を大きくする

サンプルコード表記結果

これを作る(カーソルをのせると変化する)↓
Yahoo

HTMLサンプルコード

CSSサンプルコード

※解説
CSSでhover要素を指定します。
hover要素とはカーソルが乗っている要素にスタイルを適用させる要素です。
つまりカーソルが乗っている間だけ指定された「CSSのスタイルに変わるという事です」
今回の例では「yahoo」にカーソルがのると、「文字色が赤」「文字の大きさが20px」に変更されます。

○文字色と背景色を変化させる

サンプルコード表記結果

これを作る↓
Yahoo

HTMLサンプルコード

CSSサンプルコード

※解説
「color」「backgound-color」を指定する事で文字色、背景色を変化させることができています。

○透明度を加える

透明度を加えて、目立たたせます。

サンプルコード表記結果

これを作る↓
Yahoo

HTMLサンプルコード

CSSサンプルコード

※解説
CSSの「opacity」要素を指定して透明度を指定しています。
カーソルがのると透明度が増し、リンクを目立たせる事ができます。

○画像要素にもhover要素を加える

サンプルコード表記結果

これを作る↓

HTMLサンプルコード

CSSサンプルコード

※解説
文字同様に画像要素にもhover要素を加える事ができます。
カーソルがのると透明度が増し、画像リンクを目立たせる事ができます。
hover要素もクラスを指定して作成する事ができます、まだまだ様々な種類のカスタマイズもできます、もっと詳しく知りたい方は下記参照にしてきて下さい。

https://www.nxworld.net/15-text-link-hover-effect-and-design.html

訪問済みのリンクの色を変えわかりやすくする

「このリンクって訪問したっけ?」をユーザーにとってわかりやすくする為、訪問したリンクについて、文字色を変える指定をします。

サンプルコード表記結果

これを作る↓
Yahoo

HTMLサンプルコード

CSSサンプルコード

※解説
a:visited要素を指定します、指定することで1度でも訪問した事のあるリンク文字が指定の色に変わります。

ページ内リンク

ページ内リンクとは、同じページ内で特定の箇所にリンクする事言います。
ページが縦に長い時「目次から見たい項目にすぐに移りたい」場合などに使用されます。
ページ内リンクも<a>タグを使用します。

※下記ページ内リンク参考動画

ページ内リンクの基本的な記述方法


1.スタート地点を指定

2.とびたいゴール地点にidタグを指定

※解説
スタート地点に「href」を指定
とびたいゴール地点に「idタグ」を指定
今回のケースでは「href=”#jump”」「id=”jump”」の2点を一致させてページ内jumpを表現しています。
「href=”#〇〇”」「id=”〇〇”」〇〇の中を一致させて下さい、またhrefの中には「#」を忘れずに記入して下さい。

まとめ

今回は、「リンク(aタグ)」の作成方法」「aタグに付随する各属性の意味」「<a>タグのデザインを変更する方法」を中心に解説していきました。

最後にポイントをまとめます

1.<a>タグを指定
aタグにhref属性を使用しリンク先を指定します。
<a href=”リンク先のパス”>リンクさせたい文字</a>

2.target属性
(target=”_blank”)を指定する事で、別タブ(ウィンドウ)で「WEBページ」を表示する事ができます。
<a href=”リンク先のパス” target=”_blank”>リンクさせたい文字</a>

3.<a>タグの下線を消す
aタグにはデフォルトで下線が記載されています。
下線を消すには、CSSで「text-decoration: none;」を指定し消します。

4.<a>タグの文字色を変える
aタグはデフォルトで文字色が青く表示されています。
aタグの文字色を変えるにはCSSで「color」を指定し文字色を変更します。

5.ページ内リンクをするには
・スタート地点を指定
 <a href=”#〇〇”>ここから飛ぶ</a>
・とびたいゴール地点にidタグを指定
 <a id=”〇〇”>ここに飛ぶ</a>

「id=”〇〇”」「href=”#〇〇”」〇〇の中を一致させてページ内リンクを表示させます。

いかがだったでしょうか?
今回はリンクについて紹介しました、リンクはWEBページ制作の基本となります、本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleサーチコンソール使い倒し活用術  <AOHON>

ダウンロード資料画像

Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。