a リンクのアンダーラインを消す コピペで使えるHTML+CSS

スポンサーリンク

リンクアンカーのa要素について、text-decorationを修正してアンダーラインを消し、文字色を変更します。あまり変更しすぎてユーザーがリンクかどうか分からなくならないように注意してください。

スポンサーリンク

リンクのアンダーラインを消し、文字色を赤に変える

text-decoration: none;でアンダーライン(underline)を非表示にします。以下サンプルは文字を赤く設定しています。

style属性で記述
<a href="https://www.yahoo.co.jp" style="text-decoration: none; color:#ff0000">Yahoo! Japan</a>
スタイルシートで記述
<a href="https://www.yahoo.co.jp" class="a-under-none">Yahoo! Japan</a>
.a-under-none{
    text-decoration: none;
    color:#ff0000
}

関連デザイン

a リンクを角丸ボタンにする コピペで使えるHTML+CSS
リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。

対象要素の概要

a要素

a リンクアンカー コピペで使えるHTML+CSS
リンクアンカーのa要素。#を使ったページ内リンクや、targetやrelといった属性と使用する値についても解説します。noopenerとブログランキングの注意点についても解説。

使用するCSSの概要

text-decoration

text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。

 

 

アンダーラインって、アンダースコアとも言うし、アンダーバーとも言うし、アンダラインだったり、ローラインンだったり、呼び方が色々あるんですよ。