• ベストアンサー

Dreamweaverで2種類のlink設定(色など)をする方法を教えて下さい

Dreamweaver MX 2004を使ってますが、 例えば、同じページで、a:link a:visited a:hoverなどをCSSで設定する場合、 その色・設定項目は、一種類しか設定できません。 この、a:link a:visited a:hoverなどを、もう一種類(例えば別の色とか) 違う設定をする方法が分かりません。 とても簡単な様で、なぜか昔から分かりません。(汗) CSSを使っても使わなくても良いのですが、 どなたか、a:link a:visited a:hoverを複数設定をする方法などあれば、 お教えくださいませ。よろしくお願い致します。

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

  • ベストアンサー
  • cobun5513
  • ベストアンサー率59% (25/42)
回答No.1

a:link等にクラスの属性をつければ解決できます。 a.hoge:link {color:red} a.foo:link {color:blue} のように、その他hoverやvisitedも設定してください。 HTMLの記述は <a href="xxx.html" class="hoge">xxx</a> <a href="yyy.html" class="foo">yyy</a> とします。 込み入った構造はクラスやID無しに作れないことが多いですから、クラス・IDは積極的に使いましょう。

keiesu
質問者

お礼

ありがとうございました。cobun5513さんのご説明で完璧に解決しました。早速、これからはこの問題に対応していけます。感謝いたします!。

その他の回答 (2)

  • buco
  • ベストアンサー率39% (41/103)
回答No.3

補足します。 簡単に言うとidは使用したページ内で一度しか使用しない場合に使います。 ページ内で何度もそのスタイルを適用させたいならclassを使います。 ただ一度以上使っても現状では適用されますが、厳密には一度のみがidで、複数の場合がclassです。 ブラウザが将来厳密にCSSに準拠してきた場合適用されない場合があるのでこの際きちんと使うことを習慣付けたほうがいいと思います。 <div id="navi"><a href="~">Home</a></div> div#navi a:link,a:visited { color:#FFF;} div#navi a:hover {color:#666;} なんて感じになるんではないでしょうか。 少しでも参考になれば幸いです。

keiesu
質問者

お礼

ありがとうございました。早速、解決いたしました。丁寧にご説明頂き感謝いたします。

  • s_hukami
  • ベストアンサー率66% (98/148)
回答No.2

例えばサイトタイトル、メニュー、本文などでリンク色を変更したい場合はCSSに ----------------------- #siteheader a:link, #siteheader a:visited, #siteheader a:hover{ color: #ffffff; } #menu a:link, #menu a:visited, #menu a:hover{ color: #3cb371; } #content a:link, #content a:visited, #content a:hover{ color: #0066cc; } ----------------------- などと記述して、HTMLの<body>~</body>に ----------------------- <div id="siteheader"><a href="index.html"><h1>サイトタイトル</h1></a></div> <div id="menu"><a href="menu01.html">menu01</a>│<a href="menu02.html">menu02</a>│<a href="menu03.html">menu03</a></div> <div id="content">ここが本文です。例えば<a href="here.html">ここにリンク</a>です。</div> ----------------------- などと記述します。 が、部分ではなく個々にリンク色を設定する場合はCSSに ----------------------- .red { color: #ff0000; } .blue { color: #0000ff; } .green { color: #008000; } ----------------------- などと記述して、 ----------------------- ここは<a href="red.html" class="red">赤のリンク</a>です。 ここは<a href="blue.html" class="blue">青のリンク</a>です。 ここは<a href="green.html" class="green">緑のリンク</a>です。 ----------------------- などと記述してください。 参考URLの説明が判りやすいのではないかと思います。

参考URL:
http://www.tagindex.com/stylesheet/basic/format2.html
keiesu
質問者

お礼

ありがとうございました。早速、解決いたしました。丁寧にご説明頂き感謝いたします。

関連するQ&A

専門家に質問してみよう