Bootstrap5でリンク色を自由に変える方法！.link-*とhover・focusを初心者向けに完全解説

リンク色のカスタマイズ：.link-* と hover/focus の最適化

先生と生徒の会話形式で理解しよう

生徒

「ホームページのリンクの色って、青じゃないとダメなんですか？」

先生

「そんなことはありません。Bootstrapを使えば、リンクの色も簡単に変えられます。」

生徒

「マウスを乗せたときの色も変えられますか？」

先生

「できますよ。hoverやfocusという仕組みを使います。」

1. Bootstrapのリンク色とは何か

Bootstrapでは、文字の色や背景色だけでなく、リンク専用の色を簡単に指定できます。リンクとは、クリックすると別のページに移動する文字のことです。通常は青色で表示されますが、Bootstrapを使うと見た目を自由に変更できます。

特にBootstrap5では、リンク用のユーティリティクラスが用意されており、難しい設定をしなくても色を変えられるのが特徴です。

2. .link-* クラスの基本的な使い方

.link-* は、リンク専用の色を指定するためのBootstrapクラスです。text-primaryなどと似ていますが、リンク用に最適化されています。


<a href="#" class="link-primary">青色のリンク</a><br>
<a href="#" class="link-success">緑色のリンク</a><br>
<a href="#" class="link-danger">赤色のリンク</a>

ブラウザ表示

このようにclassを指定するだけで、リンクの色が変わります。まるで色付きのペンを選ぶ感覚で使えます。

3. hoverとfocusの意味をやさしく理解する

hoverとは「マウスを乗せたとき」、focusとは「キーボードで選択された状態」を意味します。スマホやキーボード操作の人にも配慮するため、focusの設定はとても大切です。

リンクは、hoverやfocus時に色が変わることで「今ここを操作している」と分かりやすくなります。

4. hover時のリンク色をカスタマイズする方法

Bootstrapの.link-*は、hover時の色も自動で調整されますが、さらに自分好みに変えることもできます。


<style>
	a.custom-link:hover {
	    color: orange;
	}
</style>

<a href="#" class="link-primary custom-link">マウスを乗せるとオレンジ</a>

ブラウザ表示

hoverは「触ったときに反応するスイッチ」のようなものだと考えると分かりやすいです。

5. focus時の見た目を整える重要性

focusはキーボード操作でリンクを選んだときに表示されます。これを設定しないと、どこを操作しているのか分からなくなります。


<style>
	a:focus {
	    outline: 2px solid blue;
	    background-color: #eef;
	}
</style>

<a href="#">フォーカスされるリンク</a>

ブラウザ表示

focusは「今この場所を操作中ですよ」と教えてくれる目印です。

6. BootstrapとCSSを組み合わせる考え方

Bootstrapだけでも十分便利ですが、少しCSSを足すことで、より自分らしいデザインになります。基本はBootstrap、細かい調整はCSSという考え方がおすすめです。


<style>
	.nav a {
	    font-weight: bold;
	}
	.nav a:hover {
	    text-decoration: underline;
	}
</style>

<div class="nav">
    <a href="#" class="link-secondary me-3">ホーム</a>
    <a href="#" class="link-secondary">お問い合わせ</a>
</div>

ブラウザ表示

市販の家具にクッションを足すような感覚で、CSSを追加すると理解しやすいです。