<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を読み込む
これで解決です。
リンクに関連する記事も紹介しておきます。 続きを見る
【CSS】ページ内リンクの移動時に スムーズにスクロールさせる方法