リンク（aタグ）のCSSは、色を変えて下線を消すだけで終わらせると、訪問者が「どこを押せるのか」分からないページになります。この記事では、リンクの4つの状態の指定から、下線の調整、ホバー時のアニメーション、ボタン化、スマートフォンでの注意点までを、コピペで使えるコードとあわせて解説します。凝った装飾より先に、押せると分かることを優先してください。

リンクのCSSを書く前に押さえること

結論から言うと、リンクのデザインで守るべき原則は「リンクだと分かること」の一点です。装飾はそのうえで足します。

リンクには4つの状態がある

aタグは、未訪問・訪問済み・マウスが乗っている・押している最中、の4つの状態を持ちます。CSSではそれぞれ :link :visited :hover :active という疑似クラスで指定します。ここにキーボード操作用の :focus が加わります。

ブラウザの既定を上書きしている自覚を持つ

何もしなければ、リンクは青い文字に下線、訪問済みは紫、という表示になります。これは訪問者が長年慣れ親しんだ「押せる印」です。CSSで変えるということは、この共通認識を上書きするということなので、代わりの目印を必ず用意します。

本文リンクとボタンリンクは分けて考える

文章の中にあるリンクと、「お問い合わせはこちら」のようなボタン型のリンクは、同じaタグでも役割が違います。本文リンクは目立ちすぎない、ボタンは目立たせる。指定を分けるために、ボタンにはクラスを付けるのが基本です。

リンクの4つの状態を指定する

基本形｜色だけ変える

a:link    { color: #2589d0; }
a:visited { color: #6c5ea8; }
a:hover   { color: #1a6bb0; }
a:active  { color: #c0392b; }

書く順番は「LVHA」で固定する

link → visited → hover → active の順で書いてください。CSSは後に書いたものが優先されるため、順番を入れ替えると :hover が :visited に負けて色が変わらない、といった現象が起きます。「LoVe HAte」と覚える定番の順序です。

訪問済みの色は「変えない」も選択肢

ニュースサイトや一覧ページでは、訪問済みの色を変えることで「もう読んだ記事」が分かり、親切です。一方、コーポレートサイトのナビゲーションで訪問済みの色が変わると、統一感が崩れます。用途によって、訪問済みを未訪問と同じ色にする判断もあります。

ふわっと色を変える

a {
  color: #2589d0;
  transition: color 0.25s ease;
}
a:hover {
  color: #1a6bb0;
}

transition を通常状態側に書いておくと、ホバーで色が変わるときも、外れて戻るときも滑らかになります。a:hover 側に書くと戻りが一瞬になるので注意してください。

キーボード操作のfocusを消さない

a:focus-visible {
  outline: 2px solid #2589d0;
  outline-offset: 2px;
}

Tabキーで移動する利用者には、いまどのリンクにいるかを示す枠が必要です。outline: none で消してしまうと操作できなくなります。見た目を整えたい場合は、消すのではなく :focus-visible で色と太さを指定してください。

本文リンクの基本デザイン

下線を消す

a {
  text-decoration: none;
}

消すこと自体は1行ですが、消したら代わりの目印が要ります。本文と明確に違う色にする、ホバーで下線を出す、のいずれかは必ず入れてください。本文リンクに関しては、下線は残すほうが安全です。

下線の太さと位置を調整する

a {
  color: #2589d0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: rgba(37, 137, 208, 0.5);
}
a:hover {
  text-decoration-color: #2589d0;
}

下線を残したまま、文字から少し離して細く薄くすると、既定の下線より読みやすくなります。ホバーで下線の色だけ濃くする、という控えめな反応もこの書き方でできます。

外部リンクにアイコンを付ける

a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.3em;
  vertical-align: middle;
  background: url("icon-external.svg") no-repeat center / contain;
}

属性セレクタで「別タブで開くリンク」だけを対象にできます。アイコンは自前のSVGを用意してください。画像を使わず、content: "↗" のように文字で代用する方法もあります。

PDFやファイルへのリンクを区別する

a[href$=".pdf"]::after {
  content: "（PDF）";
  font-size: 0.85em;
  color: #888;
}

href の末尾で判定できます。クリックしたらファイルが開く、ということを事前に伝えておくのは親切な設計です。

ホバーアニメーション

本文リンクに動きを付けるなら、控えめなものに絞ります。ナビゲーションやフッターのリンクで使うことが多い4種類です。

中央から下線が広がる

a.line-center {
  position: relative;
  text-decoration: none;
  color: #2589d0;
}
a.line-center::after {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  content: "";
  background: #2589d0;
  transition: width 0.3s ease, left 0.3s ease;
}
a.line-center:hover::after {
  left: 0;
  width: 100%;
}

左から下線が伸びる

a.line-left {
  position: relative;
  text-decoration: none;
  color: #2589d0;
}
a.line-left::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: #2589d0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
a.line-left:hover::after {
  transform: scaleX(1);
}

幅を変える方法より、transform: scaleX で伸縮させるほうが描画が軽く、動きも滑らかです。

左から背景色が流れ込む

a.bg-slide {
  padding: 0.1em 0.3em;
  text-decoration: none;
  color: #2589d0;
  background: linear-gradient(to right, #d9ecfa 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: background-position 0.35s ease;
}
a.bg-slide:hover {
  background-position: 0 0;
}

背景を2倍幅のグラデーションにし、表示位置をずらすことで色が流れ込むように見せます。マーカーを引くような表現です。

矢印が右に動く

a.arrow {
  text-decoration: none;
  color: #2589d0;
}
a.arrow::after {
  display: inline-block;
  margin-left: 0.4em;
  content: "→";
  transition: transform 0.25s ease;
}
a.arrow:hover::after {
  transform: translateX(4px);
}

「詳しく見る」のようなリンクに向いています。動く距離は4px程度で十分で、大きく動かすと落ち着きがなくなります。

リンクをボタンにする

基本のボタン

a.btn {
  display: inline-block;
  padding: 0.8em 2em;
  color: #fff;
  text-decoration: none;
  background: #2589d0;
  border-radius: 6px;
  transition: background 0.2s ease;
}
a.btn:hover {
  background: #1a6bb0;
}

display: inline-block を指定しないと、上下の余白が効かず、押しにくいボタンになります。ホバー時は少し濃い色にするだけで十分です。

角丸と影で立体感を出す

a.btn-round {
  display: inline-block;
  padding: 0.8em 2.4em;
  color: #fff;
  text-decoration: none;
  background: #2589d0;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(37, 137, 208, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.btn-round:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 137, 208, 0.4);
}

枠線だけのボタン

a.btn-outline {
  display: inline-block;
  padding: 0.7em 2em;
  color: #2589d0;
  text-decoration: none;
  border: 2px solid #2589d0;
  border-radius: 6px;
  transition: background 0.2s ease, color 0.2s ease;
}
a.btn-outline:hover {
  color: #fff;
  background: #2589d0;
}

主役のボタンの隣に置く、二番手のボタンとして使います。「お問い合わせ」はベタ塗り、「資料を見る」は枠線、のように役割で使い分けます。

矢印付きのボタン

a.btn-arrow {
  position: relative;
  display: inline-block;
  padding: 0.8em 3em 0.8em 2em;
  color: #fff;
  text-decoration: none;
  background: #2589d0;
  border-radius: 6px;
}
a.btn-arrow::after {
  position: absolute;
  top: 50%;
  right: 1.2em;
  width: 8px;
  height: 8px;
  content: "";
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

矢印は、正方形の2辺だけに線を引いて45度回すと作れます。画像を使わないので色の変更も簡単です。

スマートフォンでの注意点

ホバーはマウスがある環境の概念です。タッチ操作では挙動が変わります。

タップするとホバー状態が残る

スマートフォンでリンクをタップすると、ホバーの見た目に切り替わったまま固定されることがあります。派手なホバー演出を付けていると、タップ後に色が変わったまま戻らず、不自然に見えます。

ホバーはマウス環境だけに限定する

@media (hover: hover) {
  a:hover {
    color: #1a6bb0;
  }
}

メディアクエリの hover: hover で、マウスなどホバーできる装置がある環境だけに限定できます。これでタッチ端末ではホバー指定が無視され、状態が残る問題を避けられます。

タップ領域は最低44px四方

指で押すには、リンクの領域が小さすぎると誤操作が増えます。ボタン型のリンクは高さ44px以上を目安にし、本文リンクも行間を詰めすぎないようにしてください。

タップ時の反応はactiveで付ける

a.btn:active {
  transform: scale(0.97);
}

押した瞬間にわずかに縮む、という反応を付けると「押せた」ことが伝わります。ホバーの代わりに、タッチ端末での手応えとして機能します。

実務でやりがちな失敗

リンクだと分からない

下線を消し、色も本文とほぼ同じにした結果、どこが押せるのか分からないページになっているケースです。デザイン上はきれいでも、問い合わせが減る原因になります。本文リンクは色を明確に変えるか、下線を残してください。

ホバーでしか目印が出ない

「ホバーすると下線が出る」だけでリンクを示すのは、マウスを乗せるまで分からないということです。スマートフォンではホバー自体がありません。通常状態でリンクだと分かる目印を必ず付けてください。

コントラストが足りない

薄いグレーの背景に薄い青のリンク、のような組み合わせは読めません。文字と背景のコントラスト比は4.5:1以上を確保してください。この基準はWebアクセシビリティの記事で解説しています。

focusを消している

「枠が出るのが格好悪い」という理由で outline: none を全体に当てているサイトがあります。キーボードで操作する人は、現在位置が分からなくなります。消すのではなく、:focus-visible でデザインを整えてください。

すべてのリンクに動きを付けてしまう

本文中の全リンクにアニメーションを付けると、読んでいる途中で視線が奪われます。動きはナビゲーションや主要なボタンに限定し、本文リンクは静かにしておくのが基本です。ページ全体のアニメーションについてはCSSアニメーションまとめで扱っています。

制作会社の視点｜リンクは「迷わせない」が最優先

サイト制作の相談で、デザインの評価とは別に必ず確認しているのが「初めて見た人が、どこを押せばいいか迷わないか」です。リンクの装飾はその手段であって、目的ではありません。

役割ごとに3種類だけ用意する

実務では、本文リンク・ナビゲーションのリンク・ボタン型リンクの3種類を決めて、サイト全体で使い回します。ページごとに違うリンクデザインが混ざると、訪問者は毎回「これは押せるのか」を判断し直すことになります。

色は変数にしておく

:root {
  --link-color: #2589d0;
  --link-hover: #1a6bb0;
}
a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover);
}

見出しやボタンと同じ変数を使えば、ブランドカラーの変更が1か所で済みます。見出し側の設計はCSSの見出しデザイン集で解説しています。

納品後に増えるリンクを想定する

クライアントが記事を書き足すと、リンクは増え続けます。クラスを付けないと成立しないデザインは運用で崩れるため、本文リンクは素の a に対して安全なデザインを当てておき、ボタンだけクラスで指定する、という構成にしておきます。

よくある質問（FAQ）

ホバーの色が変わりません。

疑似クラスの順番が原因のことが多いです。link → visited → hover → active の順に並べ直してください。それでも変わらない場合は、テーマ側のCSSに上書きされていないかを検証機能で確認します。

下線を消してもいいですか？

ナビゲーションやボタンなら問題ありません。本文中のリンクは、色を明確に変えるなど代わりの目印があれば消せますが、迷ったら残すほうが安全です。

スマートフォンでタップした色が戻りません。

タッチ端末ではホバー状態が残る仕様です。@media (hover: hover) でホバー指定をマウス環境に限定してください。

ボタンにはaタグとbuttonタグのどちらを使うべきですか？

別のページへ移動するならaタグ、フォーム送信やページ内の動作ならbuttonタグです。見た目が同じでも役割が違うため、リンク先があるかどうかで判断してください。

訪問済みリンクの色は変えるべきですか？

記事一覧やリンク集では、読んだものが分かるので変える価値があります。ナビゲーションやボタンでは統一感を優先して、変えないのが一般的です。

外部リンクのアイコンは必要ですか？

別タブで開く、別サイトへ移動する、といった挙動を事前に伝える意味で有効です。特に企業サイトでは、外部サイトへの遷移を明示しておくと訪問者の不安が減ります。

まとめ

リンクのCSSは、4つの状態をLVHAの順で指定するのが土台です。そのうえで、本文リンクは「押せると分かる目印を残す」、ボタンは「クラスを付けて役割を分ける」、スマートフォンは「ホバーをマウス環境に限定する」。この3点を守れば、装飾を足しても迷わないサイトになります。動きを付けるのは、ナビゲーションと主要ボタンだけに絞ってください。

スリーディープラスでは、サイトの導線設計やデザイン調整、WordPressのカスタマイズのご相談を承っています。「リンクやボタンが押されていない気がする」「デザインを整えたい」という場合は、お気軽にお問い合わせください。