CSS リンクのスタイル指定をせず、ブラウザのリンク色指定も無視

質問

たびたびすみません。ＣＳＳのことで質問させて頂きます。

様々な色と文字サイズをとりまぜたテキストがあり、
その色や文字サイズをそれぞれ崩さずに
複数箇所にリンクを入れたいと思っています。

a　に対してスタイル指定すると全部同じになってしまいます。
かといって、
a {
text-decoration: none;
}

回答No.1

abril · ベストアンサー

質問内容が途中で切れてしまっているので、スレッドのタイトルと本文の内容から推測します。お聞きになりたいことが違うのであれば、忘れて下さい。

サイズは特に<a>に対して更に定義し直していなければ、親要素のfont-sizeが継承されるだけですから、質問者様が問題にされているのは、「予め某かの前景色を定義したテキスト部分にリンクを貼った際、リンク色（ブラウザのディフォルト値／CSSによる汎用の定義値を問わず）を適用せず、地のテキスト・カラーをそのまま反映したい」という事かと思います。

残念ながら、<a>タグのcolorに関しては、ブラウザのディフォルト値かCSSによる定義値が必ず適用されます。リンク部分というのは、通常のテキスト部分と「視覚的に明らかに異なるスタイル（色の違い・アンダーライン等）」を与える事で、「”ここ”にハイパーリンクを設定してある」という区別をする事が必要だからです。じゃないとどこをクリックしていいのかわかりにくいですから。

---------------------------------------------------------------------
【HTML】
---------------------------------------------------------------------
<p>前の文<a href="">リンク部分</a>後の文。</p>
<p class="hoge1">前の文<a href="">リンク部分</a>後の文。</p>
<p class="hoge2">前の文<a href="">リンク部分</a>後の文。</p>
---------------------------------------------------------------------
---------------------------------------------------------------------
【CSS】
---------------------------------------------------------------------
.hoge1 {
color: #cc0000;
}
.hoge1 a {
color: #cc0000;
}
.hoge2 {
color: #009900;
}
.hoge2 a {
color: #009900;
}
---------------------------------------------------------------------
仮にこの様に設定しておくと、表示結果は上から順に：

・リンク部分はディフォルト値（汎用のスタイルが予めCSSで定義されていたらそちらの値）のリンク色が適用
・リンク部分はhoge1のテキスト色と同じ赤色が適用
・リンク部分はhoge2のテキスト色と同じ緑色が適用

となります。<a>ごとに違うclassを設定してHTML側の記述に追加するのではなく、親子関係を利用したセレクタにより振り分けています。HTML側のマークアップがサンプルの様に<p>ではなく<span>の様なインライン要素による場合であっても結果は同じです。
ただし、<a>に関してはlink・visited・hover・activeという4種類の状態がセットで考えられる為、それぞれの状態においても汎用のスタイルが先だってCSSで定義されていたらそちらの値が有効になるケース（諸環境／条件により異なるので）があるかもしれませんので、もしそちらにも影響を受けたくないのであれば、
.hoge1 a:link, .hoge1 a:visited, .hoge1 a:hover, .hoge1 a:active {
color: #cc0000;
}
と、より優先させたいセレクタの方にも疑似クラスを含めて定義して下さい。

ただし、こういうことをやってしまうと、先に述べた様に「地のテキスト」と「リンク箇所」の区別が付かなくなってしまい、ユーザビリティの面でかなりよろしくありません。ですので、色を変えないまでもせめて下線を表示させるなどして「視覚的に」そこが”リンク”である事を区別させるか、あるいはテキスト中に「（←○○○についてはここをクリック）」等の注記を添えて「内容的に」わからせるか、という様な配慮が必須です。

お礼

いつもありがとうございます。
途切れてしまって済みませんでした。

よくわかりました。
全てのaに対してclassで指定すると思い込んで、
うんざりしておりましたが、

.hoge1 {
color: #cc0000;
}
.hoge1 a {
color: #cc0000;

このように、同時に指定していけば良いと思うと
気が楽になりました。実践してみます。

本当にどうもありがとうございました。