WEB制作

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

a-tag

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

文字は黒でいいし、下線もいらない。
とお困りの方へ、<a>タグの文字色を変えない方法を2つ紹介します。

 

一つ目は、cssで<a>タグの文字色を指定する方法。

二つ目はリセットCSSを読み込む方法。

 

どちらも簡単です。

それではもう少し詳しく解説していきます。

 

<a>タグに文字色を指定する

CSSファイル

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>タグの中に、この2つを入れるだけです。

  1. target="_blank"
  2. rel="noopener noreferrer"

2つ目の「rel="noopener noreferrer"」はセキュリティ対策です。ここでの紹介は割愛しますので詳しくはこちらをどうぞ。

 

完成形はこうなります。

 <a href="リンク先のURL" target="_blank" rel="noopener noreferrer">メニュー</a>

 

 

 

まとめ

最後にまとめとして、<a>タグで囲った文字の色を変えない方法と注意点をおさらいです。

  • CSSを設定して文字色を変える
  • リセットCSSを読み込む
  • リセットCSSを読み込む順番に気を付ける
  • リンク設定にも気遣いを意識する

それではまた次回お会いしましょう。

 

リンクと言えばhoverですよね。こちらも参考にどうぞ。

スポンサーリンク

-WEB制作
-, , , , ,

© 2024 人生フリーハンド Powered by AFFINGER5