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

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

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

からくり

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

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

上のコードでわかるとおり、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タグに設定しましょう。

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

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

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

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

やり方は簡単です。

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

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

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

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

これで解決です。

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