CSS で リンク の アンダーライン を消す

CSS

リンクにデフォルトでついている下線を消したい場合
text-decoration: none;
を使用することができます。

// 全てのページにあるリンクのアンダーラインを消す
// (特定のリンクのみ消したい場合はHTMLで指定したclassをしてください)
a {
text-decoration: none;
}

また、text-decorationではアンダーラインを消す他に以下の変更をすることができます。

// デコレーションなし
a {
text-decoration: none;
}
// 下線をつける
a {
text-decoration: underline;
}
// 上線をつける
a {
text-decoration: overline;
}
// 取り消し線をつける
a {
text-decoration: line-through;
}
// 文字を点滅させる
a {
text-decoration: blink;
}

// 線の種類を指定
// 実践
a {
text-decoration: solid;
}
// 二重線
a {
text-decoration: double;
}
// 波線
a {
text-decoration: wavy;
}
// 破線
a {
text-decoration: dashed;
}
// 点線
a {
text-decoration: dotted;
}

さらにHTML、CSSに関する知識を深められたい方へ

さらにHTML、CSSに関する知識を深められたい場合、筆者も利用しているUdemyで学習することをお勧めします。
参考までに、初心者にもおすすめのプログラムは
WEBデザイン講座 Level0《対象:ゼロから始める超初心者の方》HTML と CSS に必要な基礎知識を学習します。
です。このプログラムは少し値段がするため、購読には勇気がいると思いますが、実際にサイトを作りながら要点がわかりやすく解説されているため、初心者にとてもおすすめです。
ぜひチャレンジしてみてください。
以下リンクで表示されるページの検索窓で上記プログラムを検索することで購読できます。
Udemyのプログラム言語一覧ページはここから。

ぜひご活用ください!

CSS一覧に戻る

コメント

タイトルとURLをコピーしました