テック技報最新号へ →
デザイン

テキストリンクは色を変えるだけにせず、下線を残す

文字色だけ変えて下線を消すと、「押せる」と伝わりにくい。ボタンっぽい色にしていても、本文中のリンクには下線を残すのが安全。

@wokobo_net · 2026-10-18
#UI#リンク#アクセシビリティ#CSS#ユーザビリティ

どんな問題を解決するか / いつ使うか

デザインをすっきりさせたくて text-decoration: none にしたら、リンクに気づかれなくなったとき。色の見分けが難しい人にもリンクを伝えたいとき。AIに作らせたサイトで下線が消されていないかを点検するとき。

やり方

css
/* 本文中のリンクは下線を残し、太さや位置で上品にする */
.prose a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.prose a:hover {
  text-decoration-thickness: 2px;
}
  • 下線が野暮ったく見えるときは、消すのではなく text-underline-offset と text-decoration-thickness で細く・少し離して整える。
  • ナビゲーションやボタンのように、形や位置でリンクだと分かる場所は下線なしでもよい。

注意点

  • 色だけでリンクを区別すると、周りの文字とのコントラスト差が足りない場合にアクセシビリティの基準（WCAG）でも問題になりやすい。
  • AIに作らせるときは、ルールファイルに「本文中のリンクは下線を残す」と書いておく。

出典

X の元の投稿を開く