ベストアンサー

Dreamweaver3でスタイルシートの編集 -2

2003/10/30 21:11

たびたびすみません。リンクテキストにカーソルが触れた時に色がかわる、というのはできたのはできたのですが、これは同ページ内でリンクテキストに指定する色が一色の場合で、数カ所あるリンクテキストの色を全て違う色にする場合にはどう指定したらいいのかわかりません。アドバイス、お願いします！！

tesayuma
お礼率84% (73/86)

HTML
回答数4
ありがとう数5

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#107580

2003/11/02 04:34 回答No.4

＞数カ所あるリンクテキストの色を全て違う色で表示させ、（下線なし）カーソルが乗った時に、同色の下線がつき、かつ文字が拡大されるという状態です。リンクの色とカーソルが乗ったときの色が同じという事なのですね。コピペしてご確認下さい。 <style type="text/css">  </style> </head> <body> <p>111<a href="#" class="blue">222</a>333<br> 444<a href="#" class="red">555</a>666<br> 777<a href="#" class="green">888</a>999</p> <p>AAA<a href="#" class="purple">BBB</a>CCC</p> <p>DDD<a href="#" class="yellow">EEE</a>FFF</p> </body> まず、【a】のスタイルと【a:hover】のスタイルに【a.blue】、【a.blue:hover】という感じで必要な数だけ名前を付けて作ります。【blue】という名前の部分は自由に付けてよいです。【a.blue】と【a.blue:hover】というように【blue】の部分に同じ名前を付けてあげると、そのスタイルを指定したいリンクに【class="blue"】としてあげるだけで両方が適応されます。 Dreamweaverで作る場合はまず、本来の方法で【a】と【a:hover】を作っておいて、ソースをまとめてコピペします。それを必要な分だけペーストして上から順番に名前の部分を書き足していきます。ドット【.】を忘れないように・・後はカラー指定の部分を書き換えればOKです。こんな感じでどうでしょうか？

質問者

お礼 2003/11/02 23:43

完璧です！！！ありがとうございます。すごく勉強になりました。今、あーでもないこーでもないといいながらやっているので今後も質問することになりそうです。余裕のある時にはまた、お願いします。本当にありがとうございました。

その他の回答 (3)

noname#107580

2003/11/01 05:22 回答No.3

＞今度はリンクテキストの最後の一つだけがアンダーラインの色が文字色と同じにならないんです。この現象はちょっと再現できません。ちなみに赤で表示されて、マウスオーバーで赤に赤のアンダーラインが付きます。（大きさは変わりません）文字が何色でアンダーラインが何色になるのでしょうか？え～っと！　それはおいといて・・何から説明しましょうか・・(;^_^A まず、＞ページプロパティでは文字色指定はしていません。ですが・・ <h5 align="center"><font face="Osaka"><a href="#"><font><font face="Osaka"><b><font><font color="#FF0000" face="Osaka">HOME</font></font></b></font></font></a></font></h5> しっかりと色指定されています。【color="#FF0000"】それから【face="Osaka"】の指定が３個もダブっていますね。この部分は <h5 align="center"><a href="#"><font color="#FF0000" face="Osaka"><b>HOME</b></font></a></h5> と整理できます。更にFont 指定をはずすと、 <h5 align="center"><a href="#">HOME</a></h5> になります。 Dreamweaver で何度も色やサイズ指定などを繰り返しますとこのように<font></font>が残ってしまいますので気をつけてください。ついでですが、<h5> はサイズを決めるものではなく、『５番目の見出し』という意味づけがありますので、フォントの大きさを決めるために使っているのでしたら間違いです。 <h5>があるという事はその前に<h1>～<h4>がなくてはなりません。ご存知でしたらすいません・・。結局この場合は、<h5>のスタイル指定を追加して、 <style type="text/css">  </style> <h5 align="center"><a href="#">HOME</a></h5> という事になるのですが、この場合HOMEすべてがリンクテキストですのでスタイルシートの指定のサイズとカラーは適応されず今度は青になってしまうはずです。（他の指定は適応されます）分かり易いように、 <h5 align="center"><a href="#">HOME</a></h5> <h5 align="center">AAA<a href="#">HOME</a>BBB</h5> としてみてください。下の段の『AAA』,『BBB』にはスタイルシートで<h5>に指定したことが全て適応されます。結局『HOME』は<h5>であるけれどもその後に<a>（リンクテキスト）になっていますので<a>のスタイルが適応されます。そして<a>のスタイルには色の指定がありませんので指定がない場合はリンクのテキストの色は青になる・・という事です。最初に赤になっていたのは<font>で赤を指定していたからです。それを削除していますので、上記の理由で青になります。それから、<h5>でスタイル指定した場合全ての<h5>に適応されてしまいますので、それがまずい場合は別の方法になります。（カスタムスタイルの作成を使います）結局どうしたいのかがまだわかっていませんので適切なアドバイスは出来ないのですが、本当は基本的に一つのページでリンクテキストの色を変えることはWebページとしてはあまり好ましいことではありません。見る側の人が『これはリンクだ！』と分かり易く作るのが基本になります。ですから、前回回答したようにすれば出来ないことはないのですが、これらのソフトでは簡単に設定できるようには作られていません。でも私は自己中のページも『あり』だと思っていますので、私に分かることであればアドバイスいたします。

質問者

お礼 2003/11/02 01:52

とにもかくにも、ありがとうございます！まず、アンダーラインと文字色が違った部分ですが、文字が赤で、ラインが青でした。次に、文字色の指定ですが、ページプロパティで指定しなければ邪魔にならないと思ったのですが、プロパティで指定していれば同じ事なのですね。設定場所がいろいろあって複雑だと思ったのですが、「HTMLで指定しないでスタイルシートで行なう」という事だと回答を見て気がつきました。。。フォント指定も、できるところは全てしておいた方がいいのかと考え違いをしていたようで全く恥ずかしいです。今日はHTMLの本を買ってきたので勉強します。で、結局したいことは、数カ所あるリンクテキストの色を全て違う色で表示させ、（下線なし）カーソルが乗った時に、同色の下線がつき、かつ文字が拡大されるという状態です。 <h5>については、知りませんでした。Dreamweaverで指定したのですが何故か<h1>～<h4>はなく、全部<h5>でした。アンダーラインの色がおかしくなるのもここに原因があったようで、<h1>～<h4>に指定し直したところ、ちゃんと表示されました。お騒がせしました。改行に問題があったようで、行間を調節しようとして、シフト＋リターンでの改行をするとhのナンバリングがおかしくなっていたようです。何故そうなるかはまだ謎ですが、今回の事でいろいろ勉強になりました！マンツーマンで指導してもらっちゃって、知り合いだったらゴチソウコースですよ。本当にありがとうございました。世の中捨てたものじゃないですね、ほんと。カンゲキ！

noname#107580

2003/10/31 03:05 回答No.2

え～と・・アンダーラインはちょっとソースを見てみないとわかりません。文字の拡大についてはやはりテキストにfontのサイズの指定がされていませんか？あるいはスタイルシートの『a』の方にサイズの指定がされていなければ指定してみてください。基本的にフォントの色とかサイズとかデザイン的なものはプロパティインスペクタ（HTML）で指定しないでスタイルシートで行なうようにします。色やサイズなどの指定がダブったときには後からの指定が優先されますので、スタイルシートで指定しても、フォントタグで違う指定をしていますとスタイルシートの指定は無視されます。とりあえず、フォントの指定を削除してご確認下さい。スタイルシートでは次のような感じになります。 <style type="text/css">  </style> a:hover のletter-spacing: 0.5em; は幅を変える指定です。『カテゴリ』の『ブロック』の『文字間隔』という所で指定します。 1em で一文字分幅が広がります。サイズはそのままで幅だけを広げてみても良いでしょう。もし、フォント指定を全部なくしても上手くいかないときはその部分のソースがどうなっているのかコピペして見せてください。テキストの上３行分ぐらいからテキストまでで良いです。

質問者

お礼 2003/10/31 15:05

すっかりお世話になってしまって。ありがとうございます！！！教わった事を参考に指定したところ、今度はリンクテキストの最後の一つだけがアンダーラインの色が文字色と同じにならないんです。この色は、いつも色指定後にリンク指定するとはじめの指定を無視してかわってしまう色と同じで、何度か色変更をすると希望色になってくれます。ページプロパティでは文字色指定はしていません。今回は複数色使うため「HTMLタグの再定義」も使えないし。お言葉に甘えてソースを載せてみます。 <style type="text/css">  </style> 以下が下線の色が変わってしまう部分のタグです。 <h5 align="center"><font face="Osaka"><a href="#"><font><font face="Osaka"><b><font><font color="#FF0000" face="Osaka">HOME</font></font></b></font></font></a></font></h5> 勉強不足なため、必要な部分を抜粋できてるかわからないのですが。。。よろしくお願いします！！

noname#107580

2003/10/30 21:56 回答No.1

こんにちは！一応・・ <head> <style type="text/css">  </style> </head> <body> <p><a href="aaa.htm" class="a">aaa</a></p> <p><a href="bbb.htm" class="b">bbb</a></p> </body> 『a.c』『a.d』・・・と続けます。後ろのabc・・・は自由に付けてください。 a.blue、a.red、a.green・・・その場合、クラス名が『class="blue"』・・になります。 a:hoverの方を変えるのであれば、 a.a:hover、a.b:hover、a.c:hover・・・です。これらの指定はDreamweaverからは指定できませんので打ち込みになります（と思う・・・(;^_^A

質問者

お礼 2003/10/31 00:03

ホントにありがとうございます！回答すごく嬉しいです！！！でもDreamweaverでは指定できないんですね。タグ打ち挑戦してみましたが基礎知識がなさ過ぎるようなので、この指定はもう少し勉強してから挑戦することにします。でも、もう一つだけ質問させて下さい！！スタイルシートで、カーソルが触れた時のリンクテキストを変化させるように編集したとき、「斜体」はうまくいくのですが、「アンダーライン」では数カ所あるリンクのうち、適用されるのは１つ目のテキストだけ。「文字の拡大」については、効果なしです。同じように設定しているのですが何故違う結果になるんでしょうか？もし原因に想像がつくようでしたら教えて下さい！何度もすいません！！

Dreamweaver3でスタイルシートの編集 -2