ホーム(記事一覧)へ

htmlリンクの貼り方

htmlにおいてリンク設定は基本中の基本です。

htmlリンクの貼り方・別タブでの開き方・文字色、下線の変更方法・画像へのリンクの貼り方・リンクボタンの作り方などを具体的なhtml・CSSソースと表示結果とあわせて説明します。

リンクの貼り方の基本(aタグ)

リンクを貼るときはhtml内のリンクを貼りたい箇所に以下のように記述します。

htmlソース

<a href="URL">リンクテキスト</a>

上記の「URL」部分にはリンクさせたいページのURLを記述します。

サイト内リンクの場合は相対パスを使います。

リンク先を別タブで開く

リンク先を別タブで開きたいときは「target="_blank"」を追記します。

これはリンク先に関わらず共通なので丸暗記またはコピペしましょう。

htmlソース

<a href="URL" target="_blank">リンクテキスト</a>

リンク文字色変更

文字色を変更するには以下のようにCSS「color」を指定します。

htmlソース

<style>
a{
color:#459ad8;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

リンクテキスト

リンク文字色指定方法

a{color:#カラーコード;}

上記の「カラーコード」の部分には6ケタの英数字が入ります。

Googleで「カラーコード」と検索するとカラーピッカーが表示されるのでそこで任意の色のカラーコードを確認しましょう。

リンクは以下の場合それぞれで文字色を変えることができます。

  • カーソルを乗せたとき
  • クリックしたとき
  • 見たことがあるリンク
  • 見たことがないリンク

カーソルを乗せたとき

リンクにカーソルを乗せたとき変化を見せることでリンクであることがわかりやすくなります。ただしスマホではカーソルを乗せることができないのでカーソルを乗せなくてもリンクとわかることのほうが重要です。

カーソルを乗せたときには「:hover」を指定します。

htmlソース

<style>
a:hover{
color:#459ad8;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

↓カーソルを乗せてみてください。文字色が変わります。

リンクテキスト

クリックしたとき

リンクをクリックしたときに文字色を変えることができます。
ただし、ほぼ一瞬なので基本的には設定不要でしょう。

クリックしたときには「:active」を指定します。

htmlソース

<style>
a:active{
color:#dd0033;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

↓長押ししてみてください。文字色が変わります。

リンクテキスト

見たことがあるリンク

一度見たことがある(訪問したことがある)リンクの色を変えることができます。

これによりユーザーは自分にとって新しい記事なのか判断することができます

「NEW」をつけるより効果的です。

見たことがあるリンクには「:visited」を指定します。

htmlソース

<style>
a:visited{
color:#bb00dd;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

↓一度クリックしてみてください。文字色がかわります。

リンクテキスト

見たことがないリンク

まだ見たことがない(訪問したことがない)リンクの色を変えることができます。

ただし、aタグに指定した色が表示されるため基本的には設定不要です。

見たことがあるリンクには「:link」を指定します。

htmlソース

<style>
a:link{
color:#459ad8;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

リンクテキスト

リンク下線の設定

リンクの下線を変更するには以下のようにCSS「text-decoration」を指定します。

リンクの下線を外したり、つけたりすることができます。

htmlソース

<style>
a{
text-decoration: underline;
}
a:hover{
text-decoration: none;
}
</style>
<a href="URL">リンクテキスト</a>

表示結果

↓通常は下線を表示し、カーソルを乗せると下線をなくしています。

リンクテキスト

リンク下線指定方法

a{text-decoration: underline;}

リンク下線をなくす指定方法

a{text-decoration: none;}

下線についてもカーソルを乗せたときや見たことがあるリンクなど場合に分けて設定できます。

画像にリンクを貼る

ここまでテキストにリンクを貼る例で紹介しましたが画像にもリンクを貼ることができます。

そしてその手順は基本的にテキストリンクの時と同じです。

テキスト部分が画像(img)タグに置き換わります。

htmlソース

<a href="URL"><img src="画像パス"></a>

表示結果

↓画像にリンクを設定しています。

リンクをボタンにする

テキストよりもっと目立たせるためにリンクをボタンにすることがあります。

ただし、CSSを駆使するため一気に難易度が上がります。

とりあえず下記のCSSをコピペして使ってみてください。

htmlソース

<style>
.button{
display:inline-block;
background:#d13415;
padding:10px;
text-align:center;
color:#FFF;
margin:5px;
border:1px solid;
cursor:pointer;
}
</style>
<a href="URL" class="button">リンクテキスト</a>

表示結果

リンクテキスト

まとめ

リンクの貼り方の基本(aタグ)

<a href="URL">リンクテキスト</a>

リンク先を別タブで開く

「target="_blank"」を追加

<a href="URL" target="_blank">リンクテキスト</a>

リンク文字色変更

CSSの「color」を指定する

a{color:#カラーコード;}

リンク下線の設定

CSSの「text-decoration」を指定する

a{text-decoration: underline;}
a{text-decoration: none;}

文字色・下線は以下の場合で変更できる

  • カーソルを乗せたとき:hover
  • クリックしたとき:active
  • 見たことがあるリンク:visited
  • 見たことがないリンク:link

画像にリンクを貼る

テキスト部分を画像に変更する

<a href="URL"><img src="画像パス"></a>

リンクをボタンにする

CSSを駆使する

 

以上、htmlリンクの設定方法でした。

関連記事