6日でできる 新HTML入門｜CSSでリンクの見た目を変える方法
リンクの色と動きを整えるだけで、ページはもっと見やすくなる。CSSでリンクの見た目を調整して、分かりやすく心地よいWebページを作ろう。
Webページの中でリンクは、とても大切な役割を持っています。別のページへ移動したり、詳しい情報を開いたり、資料をダウンロードしたりと、ユーザーの操作を支える入口になるからです。見出しや本文がどれだけ整っていても、リンクが見つけにくかったり、押せることが分かりにくかったりすると、ページ全体の使いやすさは下がってしまいます。
HTMLのaタグで作ったリンクは、初期状態では青い文字に下線が付いた見た目になることが多くあります。このままでもリンクとしての役割は果たせますが、ページのデザインに合わせて色や下線、背景色、文字サイズなどを調整すると、より統一感のある見た目にできます。
さらに、リンクは常に同じ見た目で表示されるわけではありません。まだ開いていないリンク、すでに訪問したリンク、マウスを重ねたとき、クリックしている最中など、状態ごとに見た目を変えることができます。こうした変化を付けることで、ユーザーは今どのリンクに触れているのかを直感的に理解しやすくなります。
ここでは、まずaタグに対する基本的なCSS指定から始めて、画像リンクの見た目調整、擬似クラスによる状態別のデザイン、そして特定のリンクだけにスタイルを適用する方法まで、順番に詳しく見ていきます。
素材のダウンロード
以下のリンクから画像素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| sunset-scene.png |
|---|
 |
リンクの基本的な見た目をCSSで整える
リンクの見た目を変更するときは、まずa要素に対してCSSを指定します。リンク文字の色を変えたいときはcolor、文字の大きさを変えたいときはfont-size、下線を消したいときはtext-decorationを使います。
たとえば、次のように書くと、リンクの文字色を変えて下線を消せます。
a {
color: #D43C5C;
font-size: 18px;
text-decoration: none;
}このような指定をすると、リンクの見た目が初期状態から変わり、ページ全体のデザインに合わせやすくなります。
リンクの基本指定でよく使うCSS
| CSS | 役割 |
|---|---|
| color | リンク文字の色を指定する |
| font-size | リンク文字の大きさを指定する |
| text-decoration | 下線などの装飾を指定する |
| background-color | 背景色を付ける |
| font-weight | 文字の太さを指定する |
リンクにCSSを指定するときは、見た目を変えるだけでなく、リンクであることが分かるかどうかも意識することが大切です。下線を消す場合は、色や背景色、ホバー時の変化などで、リンクだと分かる工夫を入れると使いやすくなります。
図1：a要素にCSSを指定してリンクの見た目を変える
この図から分かること
a要素にCSSを指定すると、リンクの文字色や下線、文字サイズを調整できます。ブラウザ初期状態のままでもリンクは作れますが、ページ全体の雰囲気に合わせて見た目を整えることで、デザイン性と見やすさの両方を高められます。
文字リンクの色と下線を変更する
最初の例では、テキストリンクの色や文字サイズ、下線の有無を変更してみます。
ファイル名： Lesson19-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リンクデザインの基本</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
a {
font-size: 18px;
color: #D43C5C;
text-decoration: none;
}
</style>
</head>
<body>
<h1>おすすめの情報サイト</h1>
<p>
<a href="https://www.mozilla.org/ja/">Mozilla</a><br>
<a href="https://developer.mozilla.org/ja/">MDN Web Docs</a>
</p>
</body>
</html>ブラウザの表示例
このHTMLでは、2つのリンクをaタグで作っています。CSSでは、a要素全体に対してスタイルを指定しています。
font-size: 18px;は、リンク文字を少し大きくして見やすくする指定です。color: #D43C5C;は、リンク文字を赤系の色に変えています。text-decoration: none;は、下線を消す指定です。
このようにaに直接CSSを書くと、ページ内のリンクすべてに共通の見た目を適用できます。サイト全体でリンクの見た目を統一したいときに便利です。
ただし、下線を消した場合は、通常の文章と見分けが付きにくくならないように注意が必要です。文字色を変える、太字にする、ホバー時に変化を付けるなど、リンクであることが分かる見せ方を組み合わせると安心です。
画像リンクの見た目を整える
リンクは文字だけでなく、画像にも設定できます。aタグの中にimgタグを入れると、画像をクリックできるリンクになります。
<a href="https://example.com/">
<img src="photo.png" alt="風景写真">
</a>画像リンクを使うと、バナー、商品画像、ギャラリー画像などをそのままクリックできるようになります。
以前のブラウザでは、画像リンクに枠線が表示されることがありました。そのため、画像リンクの枠線を消すCSSとしてimgにborder: none;を指定する学習例がよく使われます。現在の環境では目立たないこともありますが、画像の見た目を明示的に整える考え方として知っておくと役立ちます。
ファイル名： Lesson19-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像リンクの設定</title>
<style>
img {
border: none;
width: 260px;
height: auto;
}
</style>
</head>
<body>
<h1>旅の写真ギャラリー</h1>
<a href="https://www.japan.travel/ja/">
<img src="sunset-scene.png" alt="夕焼けの風景">
</a>
</body>
</html>ブラウザの表示例
このHTMLでは、画像全体をリンクにしています。aタグの中にimgタグを入れているため、画像をクリックすると指定したURLへ移動します。
CSSのimg { border: none; }は、画像のまわりに余計な枠線が付かないようにする指定です。さらに、width: 260px;で横幅を指定し、height: auto;で縦横比を保っています。
画像リンクでは、画像そのものがクリック対象になります。そのため、ユーザーが押せる場所を直感的に理解しやすいという利点があります。一方で、画像だけではリンク先が分かりにくい場合もあるため、alt属性を適切に書くことや、近くに説明文を添えることも大切です。
擬似クラスでリンクの状態ごとに見た目を変える
リンクは、未訪問の状態、訪問済みの状態、マウスを重ねた状態、クリック中の状態などに応じて、見た目を変えられます。こうした状態別のスタイル指定には、擬似クラスを使います。
リンクでよく使う擬似クラス
| 擬似クラス | 状態 |
|---|---|
| :link | まだ訪問していないリンク |
| :visited | すでに訪問したリンク |
| :hover | マウスカーソルが重なっている状態 |
| :active | クリックしている最中の状態 |
これらを使うと、リンクの状態に合わせて色や背景色、下線などを変えられます。
a:link {
color: #0066CC;
}
a:visited {
color: #7A3E9D;
}この指定では、未訪問のリンクは青、訪問済みのリンクは紫系で表示されます。ブラウザの初期設定でも似た動きがありますが、自分で色を調整することでサイトの雰囲気に合わせやすくなります。
未訪問リンクと訪問済みリンクを区別する
次の例では、リンクの状態に応じて文字色を変えています。
ファイル名： Lesson19-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>状態別リンクの色</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
a:link {
color: #0066CC;
}
a:visited {
color: #8844AA;
}
</style>
</head>
<body>
<h1>学習に役立つページ</h1>
<p>
<a href="https://www.w3.org/">W3C</a><br>
<a href="https://html.spec.whatwg.org/">HTML Standard</a>
</p>
</body>
</html>ブラウザの表示例
このHTMLでは、2つのリンクを表示しています。CSSでは、a:linkとa:visitedを分けて指定しています。
a:linkは、まだ一度も開いていないリンクに適用されます。a:visitedは、すでに訪問したことがあるリンクに適用されます。これによって、ユーザーはどのリンクを確認済みなのかを判断しやすくなります。
リンクの状態が見た目で分かることは、使いやすさの面でも大切です。特に、複数の参考ページや一覧ページがある場合、訪問済みの色が変わることで、同じページを何度も開いてしまうのを防ぎやすくなります。
図2：擬似クラスでリンクの状態ごとに見た目を変える
この図から分かること
リンクは常に同じ見た目ではなく、未訪問、訪問済み、ホバー中、クリック中といった状態ごとにスタイルを変えられます。擬似クラスを使うことで、ユーザーに今の状態を分かりやすく伝えられるようになります。
hoverとactiveで操作中の変化を付ける
リンクにマウスを重ねたときや、クリックしたときに見た目を変えると、ユーザーはそのリンクが操作できることを直感的に理解しやすくなります。
hoverはマウスカーソルが重なったとき、activeはクリックしている最中に適用されます。
a:hover {
color: white;
background-color: #FF6600;
}
a:active {
color: black;
background-color: #FFD54F;
}このような指定をすると、リンクに触れたときの反応が分かりやすくなります。特に、ボタン風リンクを作るときによく使われます。
ファイル名： Lesson19-4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホバーとクリック時のリンク</title>
<style>
body {
font-family: sans-serif;
line-height: 1.8;
}
a:link,
a:visited {
color: #2255AA;
text-decoration: none;
font-size: 18px;
padding: 6px 10px;
display: inline-block;
border-radius: 6px;
}
a:hover {
color: #FFFFFF;
background-color: #FF6600;
}
a:active {
color: #000000;
background-color: #FFD54F;
}
</style>
</head>
<body>
<h1>ショッピングサイトへのリンク</h1>
<p>
<a href="https://www.amazon.co.jp/">オンラインショップを見る</a>
</p>
</body>
</html>ブラウザの表示例
この例では、a:linkとa:visitedに共通の基本スタイルをまとめて指定しています。text-decoration: none;で下線を消し、paddingで内側に余白を付け、display: inline-block;で少しボタンのような見た目にしています。
a:hoverでは、文字を白、背景をオレンジ色にしています。マウスを重ねると色が変わるため、リンクに触れていることが分かりやすくなります。
a:activeでは、クリック中だけ背景色を黄色系に変えています。これによって、押している最中の反応が感じられます。
リンクの状態変化は、見た目の楽しさだけでなく、操作感にもつながります。ユーザーが迷わず操作できるように、変化は分かりやすく、かつ派手すぎない範囲で設定すると使いやすくなります。
擬似クラスを書く順番も意識する
リンクの擬似クラスは、書く順番によって意図した通りに動かないことがあります。そのため、一般的には次の順番を意識すると分かりやすいです。
| 順番 | 擬似クラス |
|---|---|
| 1 | :link |
| 2 | :visited |
| 3 | :hover |
| 4 | :active |
この順番で書くと、リンクの各状態が自然に上書きされやすくなります。学習段階では、まずこの並び順を基本として覚えておくと安心です。
class属性と擬似クラスを組み合わせる
すべてのリンクを同じ見た目にするのではなく、特定のリンクだけを目立たせたい場合もあります。そのようなときは、class属性と擬似クラスを組み合わせます。
たとえば、特別なお知らせ用のリンクだけデザインを変えたい場合は、次のように書けます。
a.special-link:link,
a.special-link:visited {
color: #008000;
font-weight: bold;
text-decoration: none;
}
a.special-link:hover {
text-decoration: underline;
}この指定では、special-linkというclassが付いたaタグだけにスタイルが適用されます。ページ全体の通常リンクとは別に、一部のリンクだけ見た目を変えたいときに便利です。
classと擬似クラスを組み合わせるメリット
| メリット | 内容 |
|---|---|
| 特定のリンクだけに適用できる | 全リンクを変えずに一部だけ装飾できる |
| デザインを使い分けられる | 通常リンク、重要リンク、ボタン風リンクなどを作れる |
| CSSを整理しやすい | 役割ごとにclass名を分けて管理できる |
たとえば、通常の本文リンクはシンプルな青色リンクにし、問い合わせや申込ページへのリンクだけ目立つ色や下線で強調する、といった使い分けができます。
テキストリンクを読みやすくする工夫
リンクをデザインするときは、見た目だけでなく読みやすさや分かりやすさも大切です。次のような点を意識すると、使いやすいリンクにしやすくなります。
リンクデザインで意識したいポイント
| ポイント | 内容 |
|---|---|
| 通常の文章と区別できるか | 色や下線、背景色などでリンクと分かるようにする |
| ホバー時に変化があるか | マウス操作時に反応が分かると使いやすい |
| 訪問済みリンクが分かるか | 複数リンクがあるときに便利 |
| 色のコントラストが十分か | 背景に対して文字が読みやすい色にする |
| 装飾が強すぎないか | 派手すぎると本文より目立ちすぎることがある |
リンクは目立つ必要がありますが、どのリンクも強すぎる装飾にすると、ページ全体が落ち着かない印象になることがあります。本文とのバランスを見ながら、必要なリンクはしっかり目立たせ、通常リンクは自然に見せる、という調整が大切です。
図3：class属性と擬似クラスを組み合わせて特定のリンクだけを強調する
この図から分かること
class属性と擬似クラスを組み合わせると、すべてのリンクではなく、特定のリンクだけに別の見た目を適用できます。通常リンクと特別リンクを使い分けることで、ページの中で重要なリンクを分かりやすく目立たせられます。
リンクをボタン風に見せる考え方
リンクは文字のまま使うだけでなく、ボタンのような見た目にすることもあります。その場合は、padding、background-color、border-radius、display: inline-block;などを組み合わせます。
a.button-link {
display: inline-block;
padding: 8px 14px;
background-color: #2E7DCC;
color: white;
text-decoration: none;
border-radius: 6px;
}このようにすると、リンクをボタンのように表示できます。問い合わせページへの移動、資料請求、購入ページへの案内など、目立たせたいリンクによく使われます。
ただし、見た目がボタン風であっても、aタグはリンクであり、別ページや別URLへ移動する役割を持ちます。フォーム送信やページ内の処理を行う場面ではbuttonタグが適していることもあるため、役割に応じて使い分けることが大切です。
使用タグ一覧と解説
この学習で登場した主なHTMLタグを整理しておきます。
| タグ | 用途 | 主な属性 |
|---|---|---|
| a | リンクを作成する | href、class |
| img | 画像を表示する | src、alt |
| p | 段落を表す | class |
| h1 | 大きな見出しを表す | なし |
| style | HTML内にCSSを書く | なし |
| head | 文書の情報を書く | なし |
| body | 画面に表示される本文を書く | なし |
aタグは、リンクを作るための基本タグです。href属性に移動先のURLを指定します。class属性を付けると、特定のリンクだけにCSSを適用できます。
imgタグは画像を表示するタグです。aタグの中に入れると、画像をクリックできる画像リンクになります。srcには画像ファイル名、altには画像の説明を指定します。
pタグは段落を表します。リンクを文章の中に入れたり、複数のリンクを改行付きで並べたりするときによく使います。
styleタグは、HTMLファイル内にCSSを書くためのタグです。学習用のサンプルでは、HTMLとCSSの関係を1つのファイル内で確認できるため便利です。
リンクの見た目を整えるとページ全体が使いやすくなる
リンクは、ページ内でユーザーを次の行動へ案内する大切な要素です。だからこそ、ただ表示するだけでなく、見つけやすく、押しやすく、状態が分かりやすいように整えることが大切です。
基本の見た目を変えるには、a要素にcolorやtext-decorationを指定します。画像リンクの見た目を整えるときは、imgに対してborderなどを調整します。未訪問、訪問済み、ホバー中、クリック中の変化は、:link、:visited、:hover、:activeで制御できます。さらに、class属性と組み合わせれば、一部のリンクだけを特別な見た目にできます。
リンクのCSSは、派手な装飾をするためだけのものではありません。リンクであることを分かりやすく伝え、操作しやすくし、ページ全体の統一感を作るための大切な設定です。まずは基本の文字色や下線から調整し、次に状態別の変化や特定リンクの使い分けへ進んでいくと、理解しやすくなります。