1165959425 WEBサイトのナビゲーションをドリームウィーバーを使って作成しております。

ナビゲーションを全てGIFなどの画像を切り貼りして作るのではなく、CSSにて背景を設定し、リンクはテキストで表示したいと思います。
この際に、ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが、リンク済の場合色が青く変わってしまい、テキストが読めなくなります。
テキスト部分を常に白色になるようにしたいのですが、どうすればよいでしょうか。

回答の条件
  • 1人5回まで
  • 登録:2006/12/13 06:37:06
  • 終了:2006/12/13 07:29:52

ベストアンサー

id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522006/12/13 07:12:31

ポイント50pt

「CSSにて背景を設定し~ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが~」ということは、

既に一部はCSSを使用されているということでよろしいのでしょうか?

もっとも簡単な方法について書きます。


1.ナビゲーション部分のHTMLから「<a href="~">」の部分を右クリックします

2.「CSSスタイル」から「新規作成」を選びます

3.「セレクタタイプ」から「クラス」を選びます

4.「名前」にクラス名を入れます(ここでは例として「.navi_link」にします)

5.「定義場所」は「現在のドキュメントのみ」にします

  (既に使用しているCSSファイルがあれば、それを指定)

5.「タイプ」内「カラー」で文字色(白・#FFFFFF)を選びます

6.すると、HTMLが「<a href="~" class="navi_link">」となるので、他のナビゲーション部分の「<a href="~">」内へもこの「 class="navi_link"」の部分をコピー&ペーストします


ここまでで、CSSとしては次のものが自動作成されているはずです。


.navi_link {

color: #FFFFFF;

}

これを次のように書き換えます。


.navi_link:link,

.navi_link:visited,

.navi_link:hover,

.navi_link:focus,

.navi_link:active {

color: #FFFFFF;

}

セレクタ(.navi_link:~の部分)はこの順番で書く必要があります。

以上でナビゲーション部分のリンクの文字色が白くなります。

HTMLがどのようになっているのかわからないので、的確な回答が不可能である点、ご了承下さい。

id:tokyo1981

出来ました!

上記の説明をそのまま行ったら やりたいようになりました!

DWにてCSSを自動生成するクセが着くとなかなかこうした部分が勉強不足になりがちです。

有難う御座いました!

2006/12/13 07:29:32

その他の回答(1件)

id:hokuraku No.1

hokuraku回答回数530ベストアンサー獲得回数972006/12/13 07:04:03

ポイント20pt

http://www.tohoho-web.com/css/reference.htm#visited

ページ全体であれば、cssで

A:link { color: white; }

A:visited { color: white; }

A:active { color: white; }

A:hover { color: white; }

にすればよいかと思います。


ナビゲーション部分だけであれば、ナビゲーション部分のリンクにclass(例えばnaviというclass)をつけて、

a.navi {color: white;}

でよいのではないでしょうか。

http://www.tohoho-web.com/css/basic.htm#Class

id:tokyo1981

すみません。

当方がCSS初心者のためイマイチ分かりませんでした。

しかしながら、便利なWEBサイトを教えて頂きありがとうございます!

2006/12/13 07:27:53
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522006/12/13 07:12:31ここでベストアンサー

ポイント50pt

「CSSにて背景を設定し~ナビゲーションの背景色を、WEBサイトのテーマカラーのブルーにしておりますが~」ということは、

既に一部はCSSを使用されているということでよろしいのでしょうか?

もっとも簡単な方法について書きます。


1.ナビゲーション部分のHTMLから「<a href="~">」の部分を右クリックします

2.「CSSスタイル」から「新規作成」を選びます

3.「セレクタタイプ」から「クラス」を選びます

4.「名前」にクラス名を入れます(ここでは例として「.navi_link」にします)

5.「定義場所」は「現在のドキュメントのみ」にします

  (既に使用しているCSSファイルがあれば、それを指定)

5.「タイプ」内「カラー」で文字色(白・#FFFFFF)を選びます

6.すると、HTMLが「<a href="~" class="navi_link">」となるので、他のナビゲーション部分の「<a href="~">」内へもこの「 class="navi_link"」の部分をコピー&ペーストします


ここまでで、CSSとしては次のものが自動作成されているはずです。


.navi_link {

color: #FFFFFF;

}

これを次のように書き換えます。


.navi_link:link,

.navi_link:visited,

.navi_link:hover,

.navi_link:focus,

.navi_link:active {

color: #FFFFFF;

}

セレクタ(.navi_link:~の部分)はこの順番で書く必要があります。

以上でナビゲーション部分のリンクの文字色が白くなります。

HTMLがどのようになっているのかわからないので、的確な回答が不可能である点、ご了承下さい。

id:tokyo1981

出来ました!

上記の説明をそのまま行ったら やりたいようになりました!

DWにてCSSを自動生成するクセが着くとなかなかこうした部分が勉強不足になりがちです。

有難う御座いました!

2006/12/13 07:29:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません