はじめまして。
良かったらどなたか教えて下さい。
今、一枚のページを作っているのですが、背景色を"#ffffff"(白)とし、そのリンクを以下の様に指定しました。
<style type="text/css">
<!--
A { text-decoration: none}
A:link {color:#000000;}
A:visited {color:#ffffff;}
A:hover {color:#ff6600;}
-->
</style>
「白地に黒文字リンク、オンマウス時はオレンジ」という指定です。
ところが、同じページ内でテーブルを組み、その背景を#000000と指定する事になりまして、その中にリンクを入れると、「黒字に黒文字リンク、オンマウス時はオレンジ」
でリンクの文字が見えなくなってしまいます。
hoverの効果(オンマウス時はオレンジ)の効果を残しつつ、リンク色を二色に分ける方法は無いでしょうか?
(クラス指定の使い方がよく判ってないので、自分で指定するとエラーしか出ないのです)。
お忙しい所申し訳ございませんが、宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
たとえば、「基本は黒文字、テーブル内のリンクの場合は訪問前も訪問後も白文字」とするなら、
A { text-decoration: none}
A:link {color:#000000;}
A:visited {color:#ffffff;}
A:hover {color:#ff6600;}
table A:link {color:#FFFFFF;}
table A:visited {color:#FFFFFF;}
で適用されると思います。
また、Aタグそのものにクラス指定(<a class="style1">など)をして
A.style1:link { color: #FFFFFF;}
と指定する方法や、背景を黒くするテーブルにクラスを指定(<table class="style2">)し
table { background-color: #000000;}
table a:link {color: #FFFFFF;}
table a:visited {color: #FFFFFF;}
と指定する方法があります。
なお、テーブルの背景色をbgcolor属性で指定し、リンク色をスタイルシートで指定してしまうと、スタイルシートを適用させないブラウザで真っ黒になってしまいますので、テーブルの背景色や文字の色もスタイルシートで指定することをおすすめします。
lowermazeさん、早速の回答ありがとうございます!
今試してみました。見事に変わりました!ありがとうございます!
ところが、うっかり忘れていたのですが、実はテーブルの中に更にテーブルを組んでおりまして、こちらのリンク色が最初に組んだテーブル内のリンクとは別の色指定をしないと不都合が出てしまう事が判りました。
計3色のリンクを使い分ける事になります。
今、テーブル別にクラス指定をどうするのか、悩んでいる所です。
もう一つ。
テーブルの背景色をbgcolor属性で指定し、リンク色をスタイルシートで指定してしまうと、スタイルシートを適用させないブラウザで真っ黒になってしまう、というのを今回初めて知りました。
ありがとうございます。
早速こちらを改めさせて頂きました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- Visual Basic(VBA) エクセルVBA ダブルクリックしたら色反転を指定したセルのみにしたい 2 2022/04/06 12:52
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS ダークテーマで文字色を白くしないようにしたい 3 2022/12/07 17:26
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
CSSで特定のテーブルだけに...
-
HTML tableのセルにtextareaを...
-
画面幅に合わせてテーブルのカ...
-
HTML5で、テーブル内tdタグの高...
-
<th>タグを使っても太字にしな...
-
テーブル内のセル間にスペース...
-
テーブルとテーブルの間隔について
-
テーブルの高さを100%にしたけ...
-
<fieldset>タグについて
-
latex使い方
-
HTMLのテーブルをExcelにCopy&P...
-
HP製作時、縦の点線作成
-
DBを使わないDataGrid
-
簡単に文字間とかに空白入れたい
-
table表を横に並べる際の間隔指定
-
cssで、1行2段のtableを記述す...
-
html table の中のボーダーが二...
-
tableを縦に続けるとtable間の...
-
tableが縮まらない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
(HTML)Tableを任意の位置に置...
-
テーブル内のセル間にスペース...
-
textareaの外側の文字が下付き...
-
同じ幅指定のつもりなのに、ブ...
-
html5のテーブル内でdivのタブ...
-
<fieldset>タグについて
-
tableの位置がIEとその他ブラウ...
-
tableを縦に続けるとtable間の...
-
画面幅に合わせてテーブルのカ...
-
HTMLのテーブルをExcelにCopy&P...
-
ラインを端から端まで画面いっ...
-
tableのcellpadding="0" cellsp...
-
ホームページのテキストを折り...
おすすめ情報