テキストリンク内で、一部分の別効果
-
0 名前： 困ったマン ： 2005/12/12 22:32
- テキストリンクの一部分だけ違うフォント色にできるんでしょうか？
違うフォントとは、通常時は2色のフォント色でロールオーバー時には同色に変化するようにという意味ですが
＜例＞
<a href="http://…" class="…">今日は、いい天気ですね。</a>
※「今日は、」のところを青色に(classで指定しています)
※「いい天気ですね。」のところを赤に
※オールオーバー時は全文オレンジ色に
<font="#…"></font>で「いい天気ですね。」のところをはさんだり<span>ではさんだり色々ためしましたが、無理でした。
<a href="http://…" class="…">今日は、<font="#…">いい天気ですね。</font></a>
リンクを2つにするのは、だめなんです。
どうなたかおたすけください。
-
1 名前： Bill閣下 ： 2005/12/12 22:32
- CSSでやるなら、
a:link { color: #00F; }
em { color: #F00; }
a:hover { color: #FF8000; }
a:hover em { color: inherit; }
<a>今日は、<em>いい天気ですね。</em></a>
EMという要素型は強調(emphasis)です。
もしあなたが強調するためにFONTやSPANで括っているのであれば、
EMで括った方が良いでしょう。
-
2 名前： 困ったマン ： 2005/12/12 22:32
- Bill閣下さま
御意見ありがとうございます。
ただ、わたくしの<font><span>などは強調のために使っているのではなく、
色の指定をするための例として書き込みました。
結果的にはやはり無理があるのでしょうか？
>オールオーバー時は全文オレンジ色
実際そのようなサイトは見たことがありませんから…^^;
-
3 名前： Bill閣下 ： 2005/12/12 22:32
- 目的が無いのですか。
まぁ自分の意思以外の何かから命令されたから従ったという場合もありますからね。
FONTであってもSPANであっても、短絡的には同じ方法で良いです。
a#today_is_fine:link { color: #00F; }
a#today_is_fine span { color: #F00; }
a#today_is_fine:hover { color: #FF8000; }
a#today_is_fine:hover span { color: inherit; }
<a id="today_is_fine">今日は、<span>いい天気ですね。</span></a>
-
4 名前： 困ったマン ： 2005/12/12 22:32
- Bill閣下さん
ご意見ありがとうございます。
あまり目的のことをつっこまれると痛いところですが…^^;
上記のとおり記述いたしましたが、やはりオールオーバー時に全文オレンジ色にはならないようです。
記述内容を記載してきますので、間違っている点などがありましたらお教えください。
※カラーは適当に割り付けました。
a.today_is_fine:link {color: #0033b3;}
span {color: #FF0000;}
a.today_is_fine:visited {color: #0033b3;}
a.today_is_fine:hover {color: #000000;}
hover span { color: #000000;}
a.today_is_fine:active {color: #0033b3;}
-------------------------------------------------------------------------------
<a href="http://…" class="today_is_fine">今日は、<span>いい天気ですね。</span></a>
宜しくお願いいたします。
-
5 名前： Bill閣下 ： 2005/12/12 22:32
- WindowsのIEはinheritに対応していないです。
>>3が上手くいかないのは、おそらくそのせいです。
hover spanというセレクタはHTMLに対して使う場合には不適切です。
(HOVERという要素型は無いですから。)
子孫セレクタを使わないのは何故ですか？
spanにclassやidが指定されているのであればともかく、
普通のspan全体に同じ色を指定すると
後に不便な思いをするかもしれません。
-
6 名前： 困ったマン ： 2005/12/12 22:32
- やはりそうですか…^^;
あきらめるしかないようですね…。
>子孫セレクタを使わないのは何故ですか？
>spanにclassやidが指定されているのであればともかく、
>普通のspan全体に同じ色を指定すると
>後に不便な思いをするかもしれません。
すいません。手を抜いていました^^;
いつもは、classを指定していますが、
今回は例文でしたので記述しませんでした。
>hover spanというセレクタはHTMLに対して使う場合には不適切です。
>(HOVERという要素型は無いですから。)
たしかに…^^;
色々方法を考えているうちに初歩的なミスをしていましたorz
現段階では、無理だと言うことにします。
というか、無理だっ！！！
万一、方法があったとしても全OS・ブラウザで同様に表示されるとは考えにくいですしね。
(つっこまれる前にブラウザは最新のものが対象です)
Bill閣下さん
ご協力、ほんとにありがとうございました。
-
7 名前： Bill閣下 ： 2005/12/12 22:32
- ……
読者の皆さんへ。
一般的には十分に実現可能ですのでどうか諦めることのないように、
というのを締めの言葉とさせていただきます。
-
8 名前： S ： 2005/12/12 22:32
- 一応補足。
色の違いだけで情報を伝えるのは無理があるよ。
論理要素であるEMやSTRONGを使うほうがずっといいかと。
http://nekoshiki.poke1.jp/guidline/color.html
http://bakera.jp/html/opinion/font.html
