<a>タグでリンクを作ったら文字の色が黒じゃない。
しかも下線まで付いている。
文字は黒でいいし、下線もいらない。
とお困りの方へ、<a>タグの文字色を変えない方法を２つ紹介します。
一つ目は、cssで<a>タグの文字色を指定する方法。
二つ目はリセットCSSを読み込む方法。
どちらも簡単です。
それではもう少し詳しく解説していきます。
<a>タグに文字色を指定する
CSSのコード
まず一つ目、CSSで文字色を指定して打ち消しましょう、
<a>タグに
color: black;
text-decoration: none;
を設定してあげると、文字色の黒にできるし、アンダーラインも消えます。
文字色は好みですので何色でも問題ありません。
See the Pen
a-tag-css by t.h (@tomtom15)
on CodePen.
<li>タグも使うとき
上のコードのように、グローバルナビゲーションを作る場合です。
<li>タグも併用する人は
li { list-style:none; } を設定してあげると、●（リストマーカー：文字の手前のマーク）が消えます。
注意ポイント
「<li><a>メニュー</a></li>」のようなコードのとき、<li>タグに対して文字の色の設定をしても効きません。
しっかり<a>タグに設定しましょう。
【✕ NG】
li {
color: black;
}
【〇 正解】
a{
color: black;
}
リセットCSSを使う
二つ目の方法は、リセットCSSを読み込むことで、デフォルトのCSSを打ち消すことができます。
リセットCSSとは
ブラウザ（Google ChromeやSafariのこと）はそれぞれ独自で持っているデフォルトのCSSがあります。
リセットCSSとは、そのブラウザが持っているCSSを打ち消して、ブラウザ間の表示を揃えるためのCSSファイルのことです。
ブラウザが持っているデフォルトのCSSの影響で、自分でCSSを設定していなくても、<a>タグは勝手に文字が青くなり、liタグにはリストマーカーがついてしまうというわけです。
See the Pen
a-tag-default by t.h (@tomtom15)
on CodePen.
上のコードでわかるとおり、CSSには何も書いていません。
他のタグについても同様で、余白が設定されていたり、フォントサイズが設定されていたりします。
リセットCSSを読み込むと、要素ひとつひとつに打ち消しのCSSを書かなくて済みますのでとても便利です。
リセットCSSの使い方
step
1インターネットで「リセットCSS」と検索
リセットCSSを検索すると、いろいろなサイトでおすすめのリセットCSSが紹介されていますので、お好みのものを選びましょう。
step
2リセットCSSの内容をコピーする
リセットCSS用のCSSファイルを作成し（例：reset.css）、リセットCSSの内容をコピー＆ペーストします。
step
3リセットCSSを読み込む
普通のCSSファイルと同じようにHTMLファイルの<head>内に読み込みます。
こんな感じです。
<head>
<linkrel="stylesheet" href="reset.css">
<linkrel="stylesheet" href="style.css">
</head>
注意
リセットCSSを読み込むときに注意するのが読み込む順番です。
上記のコードのように、リセットCSSを先に読み込みます。
独自（スタイリング）のCSSは後です。
なぜなら、コンピューターは上から順番にプログラムを読み込んでいくからです。
ですので、リセットCSSを後にすると、先に読み込んだ自分で作ったCSSファイルが全て打ち消されてしまいます。
リセットCSSの詳細はこちらを参考にしてください。
<a>タグのちょっとした気遣い
文章中のリンク（<a>タグ）はわかりやすく
<a>タグの文字色を変えない方法を紹介しましたが、文章中の<a>タグはデフォルトのまま、つまり青文字＆アンダーラインの方がいいときもあります。
おそらくみなさんは普段WEBサイトを閲覧していて、文字が青で、なおかつアンダーラインがついているテキストを見ると、直感的に「リンクだ！」とわかるはずです。
なので、読者から見て「リンクが張られている」ことをわかりやすくするためには「青文字＆アンダーライン」の方がベターなときもあります。
リセットCSSを使用すると打ち消されてしまうので、自作のCSSで改めて青文字＆アンダーラインを設定してあげてくださいね。
新規タブで開く設定にする
リンクをクリックすると、リンク先のページが開かれます。
そのとき、今見ているサイトがリンク先のページに切り替わってしまうケースがよくあります。
個人的な意見ですが、私はリンクを貼るときに、新しいタブで開かれるように設定しています。
なぜかというと、今開いているWEBサイトを見ながらリンク先のページも見たい、というときに便利だからです。
もちろん、「戻るボタン」と「進むボタン」で切り替わりはできますが、いちいちページを読み込まなくてはなりませんのでタイムロスです。
ですので、よっぽどのことが無い限り新タブで開かれるように設定します。
やり方は簡単です。
<a>タグの中に、この２つを入れるだけです。
target="_blank"rel="noopener noreferrer"
２つ目の「rel="noopener noreferrer"」はセキュリティ対策です。ここでの紹介は割愛しますので詳しくはこちらをどうぞ。
完成形はこうなります。
<a href="リンク先のURL" target="_blank" rel="noopener noreferrer">メニュー</a>
まとめ
最後にまとめとして、<a>タグで囲った文字の色を変えない方法と注意点をおさらいです。
- CSSを設定して文字色を変える
- リセットCSSを読み込む
- リセットCSSを読み込む順番に気を付ける
- リンク設定にも気遣いを意識する
それではまた次回お会いしましょう。
リンクと言えばhoverですよね。こちらも参考にどうぞ。 続きを見る
【CSS】よく使うhoverテクニック3選 知っておくと便利です