CSSでリンクの下線を消す方法｜色・形状・太さなど多彩な装飾変更の設定を徹底解説！

生徒

ペン博士！リンクの下線を消したいのですが、どうすれば良いのでしょうか…

ペン博士

リンクの下線を消す方法じゃな！下線を消す以外にも様々な装飾方法があるんじゃ！ よーく聞いておくんじゃぞ！

生徒

そうなんですね！ありがとうございます！

「リンクの下線がデザインを崩してしまう」「必要な箇所だけ下線を消したい」そんなお悩みはありませんか。
本記事では、CSSの「text-decoration」プロパティを使い、リンクの下線を自在に制御する方法を解説します。
読み終えるころには、サイトの雰囲気に合ったリンクデザインを作れるようになるでしょう。

「学習→就職」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。

詳しくはこちらの記事をご覧ください。

あわせて読みたい

【転職希望者必見】受託開発の会社に内定！フルスタックエンジニアとして更なる高みを目指し挑戦中！ ペン博士！今回はどんな方がインタビューに応じてくださったんですか？ うむ。今回は受託開発の会社に内定をもらった方じゃぞ！しかもフルスタックエンジニアとしての採...

吉池さんの主な制作実績はこちら

株式会社YOURDELT 様

株式会社YOURDELT 様

CSSでリンクの下線を消す方法

HTMLのaタグは標準で下線が付きますが、CSSの「text-decoration」プロパティを使うことで、装飾の変更や下線を消すことが可能です。
下線を消すには、次のように指定します。

<a class="u-line" href="#">この文章の下線は表示されません</a>

.u-line {
  text-decoration: none;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

この指定でブラウザが自動的に付ける下線を非表示にできます。サイト全体に適用することも、クラスで特定のリンクだけに適用することも可能です。

また、通常時は下線を表示し、マウスオーバー時だけ消すことも可能です。
その場合は擬似クラス「:hover」を利用します。

.u-line:hover{
  text-decoration: none;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

リンク下線の装飾を設定するプロパティ（text-decoration）

ペン博士

「text-decoration」は、複数の装飾設定をまとめて指定することができるんじゃ！
ここでは、各パラメータの詳細と使い方を紹介するぞ。

リンクの下線位置を変更する（text-decoration-line）

「text-decoration-line」はリンクの下線位置を変更するプロパティです。
下線、上線、中央線を使い分けられ、複数指定も可能です。

<a class="u-line" href="#">下線リンク</a>
<a class="o-line" href="#">上線リンク</a>
<a class="cut-line" href="#">中央線リンク</a>
<a class="multi-line" href="#">上下線リンク</a>

.u-line {
  text-decoration-line: underline;
}
.o-line {
  text-decoration-line: overline;
}
.cut-line {
  text-decoration-line: line-through;
}
.multi-line {
  text-decoration-line: underline overline;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

リンク下線の色を変更する（text-decoration-color）

「text-decoration-color」はリンク下線の色を変更するプロパティです。
文字色と異なる色にすることで、デザインのアクセントになります。

<a class="color" href="#">赤の下線</a>

.color {
  text-decoration-line: underline;
  text-decoration-color: rgb(255, 0, 0);
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

リンク下線の種類を変更する（text-decoration-style）

「text-decoration-style」はリンク下線の種類を変更するプロパティです。
単線や二重線、点線、破線、波線を指定可能です。形状を変えることで、リンクの印象を柔らかくしたり動きを加えることができます

<a class="single" href="#">単線リンク</a>
<a class="dbl" href="#">二重線リンク</a>
<a class="dots" href="#">点線リンク</a>
<a class="dash" href="#">破線リンク</a>
<a class="wave" href="#">波線リンク</a>

.single {
  text-decoration-style: solid;
}
.dbl {
  text-decoration-style: double;
}
.dots {
  text-decoration-style: dotted;
}
.dash {
  text-decoration-style: dashed;
}
.wave {
  text-decoration-style: wavy;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

リンク下線の太さを変更する（text-decoration-thickness）

「text-decoration-thickness」はリンク下線の太さを変更するプロパティです。太い線は目立たせたいリンクに、細い線は控えめに見せたいときに適しています。

※今回は4pxで設定しています。

<a class="bold-line" href="#">太い下線リンク</a>

.bold-line {
  text-decoration-line: underline;
  text-decoration-thickness: 4px;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

生徒

ペン博士、リンクの下線を消す方法がよく分かりました！「text-decoration」でデザインまで自由に変えられるんですね。

ペン博士

うむ、これらをしっかり理解して今後のWebサイト制作に活かすんじゃよ。

生徒

ありがとうございます！これでデザインの幅が広がりそうです！

まとめ

CSSでリンクの下線を消すための重要なポイントを以下にまとめます。

リンクの下線はCSSの「text-decoration」で自由に制御できる

複数のプロパティを組み合わせることで、デザイン性の高いリンク表現が可能になる

これらのポイントを押さえることで、見やすく洗練されたリンクデザインを作成できるようになるでしょう。

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！