No.1ベストアンサー
- 回答日時:
質問内容が途中で切れてしまっているので、スレッドのタイトルと本文の内容から推測します。
お聞きになりたいことが違うのであれば、忘れて下さい。サイズは特に<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;
このように、同時に指定していけば良いと思うと
気が楽になりました。実践してみます。
本当にどうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ダークテーマで文字色を白くしないようにしたい 3 2022/12/07 17:26
- ヤフオク! ヤフオクに出品したいのですが、タグを実行出来ません。 2 2022/09/16 12:36
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Visual Basic(VBA) VBA初心者です 検索した数字の行に色をつける 5 2023/02/13 14:22
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- プリンタ・スキャナー プリンターの黑がうまく出ないんですが。 1 2022/12/19 10:51
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
個別にリンクの色を変える方法
-
CSSに同じclass名がいっぱい‥。...
-
clear bothで回り込みがうまく...
-
CSSを使うと<IMG>タグのHSPACE...
-
:hoverで他の要素の値を変更で...
-
外部スタイルシートで定義した...
-
ページの左右の余白(枠外)に...
-
透過背景を解除するにはどうす...
-
CSSでひとつだけdisplay:none;...
-
CSSでテキストリンクの色を複数...
-
divの入れ子を多用してページを...
-
liリストタグの背景色に色がつ...
-
正規表現の検索置換でdiv内のim...
-
CSSで、DIV#hogeという記述は何...
-
htmlのid属性って必要なの?
-
CSSのタグ「#warpper」の意...
-
最近、HTMLのヘッダーをIDで定...
-
【VBA/HTML】IE画面内のページT...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
リンク文字の 一部だけ色を変...
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSで下まで背景色を伸ばす方法
おすすめ情報