基礎中の基礎。CSSでリンク(aタグ)にデフォルトでついてくる下線を消す方法を紹介します。
たった1行、コードをaタグのスタイリングに追記するだけで実現できますので、お試しあれ。
それではさっそく見てまいりましょう！
【CSS】リンクの下線を消すコード
結論。以下のコードをaタグに指定してあげれば完了です！
※aタグには初期状態で、text-decorationプロパティのunderlineが設定されているため下線が表示されます。
style.css
/* ---------------------------- */
/* --- リンクの下線を消す --- */
/* ---------------------------- */
a{
text-decoration: none;
}
リンクをホバーしたときに下線を消したい場合は？
擬似クラス:hoverを使用すると、リンクにホバーしたときにだけ下線を非表示にさせることが可能です。
はじめは下線を表示しておいて、ホバーしたときに非表示するコードは以下です。
style.css
/* ---------------------------- */
/* --- ホバーしたときに、リンクの下線を消す --- */
/* ---------------------------- */
a:hover{
text-decoration: none;
}
リンクをホバーしたときに下線を表示したい場合は？
上記同様、擬似クラス:hoverを使用すると、リンクにホバーしたときにだけ下線を表示させることが可能です。
はじめは下線を非表示にしておいて、ホバーしたときに表示するコードは以下です。
style.css
/* ---------------------------- */
/* --- ホバーしたときに、リンクの下線を消す --- */
/* ---------------------------- */
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
次はこの記事！
【初心者向け】CSSのborderの使い方やデモを紹介！ 
【CSS】hover時に左から右に下線を引くアニメーションの作り方 
【jQuery初心者向け】ホバーで画像切り替えを実装する方法
