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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
divでくくった中の要素にa link
-
CSSとSSI 一緒に使えますか?
-
<span>で2重にかけているものを...
-
CSSに関するいくつかの質問
-
スタイルシートで特定IDかつ特...
-
DreamWeaver 正規表現での連番付与
-
livedoorブログでの背景画像サ...
-
同じページ内でリンクのフォン...
-
最近、HTMLのヘッダーをIDで定...
-
Wordpress--Breadcrumb NavXTの...
-
同ページ内でリンクの色を変え...
-
特定の見出しのみ前後の空白を...
-
HTML要素のid/class名の長さに...
-
ライブドアブログの背景色を変...
-
tableの大きさが編集領域とブラ...
-
フロートのクリアについて
-
display:table-cell内でこんな...
-
クリッカブルマップにツールチ...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
brにクラスをつけてcssでdispla...
-
HTML要素のid/class名の長さに...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
CSSのクラス名・ID名の指定でワ...
-
個別にリンクの色を変える方法
-
透過背景を解除するにはどうす...
-
liリストタグの背景色に色がつ...
-
子孫セレクタの読み方をおしえ...
-
CSSに同じclass名がいっぱい‥。...
-
最近、HTMLのヘッダーをIDで定...
-
外部css定義したclassをht...
-
CSS, リンクの色を一部変えるに...
-
リンク文字の 一部だけ色を変...
-
display:table-cell内でこんな...
-
htmlとcssで吹き出しの中に文字...
-
同ページ内でリンクの色を変え...
-
外部スタイルシートで定義した...
-
name属性とid属性
おすすめ情報