WEB制作

【CSS】HTMLで作った<a>タグの文字色を変えない方法

スポンサーリンク

a-tag

<a>タグでリンクを作ったら文字の色が黒じゃない
しかも下線までついてる

文字は黒でいいし、下線もいらない。
とお困りの方へ解決方法をサクッとご紹介します。

 

からくり

なぜcssを設定してないのに文字の色が変わっていたり、下線がついているか。

aタグにはデフォルトでCSSが設定されているからなんです。

See the Pen
a-tag-default
by t.h (@tomtom15)
on CodePen.

上のコードでわかるとおり、CSSには何も書いてません。

 

 

解決方法1

CSSで打ち消す

aタグに
color: black;
text-decoration: none;

を設定してあげると、文字色の黒にできるし、アンダーラインが消えます。

文字色は好みですので何色でも問題ありません。

 

<li>タグも併用する人は

li { list-style:none; } を設定してあげると●が消えます。

 

See the Pen
a-tag-css
by t.h (@tomtom15)
on CodePen.

注意点

<li>に対して、フォントカラーの設定をしても効きません。

 

これはNGです。

li {
color: black;
}

間違いの無いように、ちゃんとaタグに設定しましょう。

 

 

解決方法2

二つ目の方法はリセットCSSです。

 

リセットCSSを読み込むことで、デフォルトのCSSを打ち消すことができます。

 

ブラウザ(Google ChromeやSafari)は固有のCSSを持っていますので、本記事でとりあげたaタグのような現象が起きるわけです。
他にも余白が設定されていたり、フォントサイズが設定されていたりします。

リセットCSSを読み込むと、要素ひとつひとつに打ち消しのCSSを書かなくて済みますのでとても便利です。

 

やり方は簡単です。

 

「リセットCSS」で検索するとネット上にころがってますので、それをコピペしてCSSファイルを作成し(例:reset.css)、普通のCSSファイルと同じようにHTMLファイルの<head>内に読み込むだけです。

ですので、リセットCSSを使用する場合は、装飾に使う普通のCSSとリセットCSS、二つ読み込みます。

 

気になる人はこちらを参考にしてください。

 

 

まとめ

aタグで囲った文字の色を変えない方法

  • CSSを設定して打ち消す
  • リセットCSSを読み込む

これで解決です。

 

リンクに関連する記事も紹介しておきます。

スポンサーリンク

-WEB制作
-, , , ,

© 2023 WEBセンス Powered by AFFINGER5