- ベストアンサー
リンクを張った文字列の色
次のようにするとlink、hover、active、viewedのそれぞれの場合に「リンク先のページのタイトル」の文字列の色がgreen、#ffdddd、#ffffdd、maroonになると思ったのですが、うまくいきません。maroonのままです。 <html> <head> <style type="text/css"> <!-- table {font-size:12px; } a.x:link {color:green; text-decoration:none; } a.x:hover {color:#ffdddd; } a.x:active {color:#ffffdd; } a.x:visited {color:maroon; } --> </style> </head> <body> <table border="0" width="100%" height="400" text="bold"> <tr><td><a href="http://www......html" class="x" target="_blank">リンク先のページのタイトル</a>/td></tr> </table> </body> </html> よろしくお願いします。
- yoohoo_7
- お礼率63% (162/256)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
a.x:link {color:green; text-decoration:none; } a.x:visited {color:maroon; } a.x:hover {color:#ffdddd; } a.x:active {color:#ffffdd; } この順番に変えてみてはどうでしょうか？ 参考URL： 実は重要！スタイルシートの記述順！ a:hover使ってもリンク無変化!?
その他の回答 (2)
- kaisendon
- ベストアンサー率44% (114/257)
頂いた補足について、返答を書こうと思ったら No.2 goldfoxさんが回答して下さってるので、簡単に済ませます＾＾ ＞早速修正したところ、hover、active、visitedはうまく表示されるのですが、linkがやはり全部maroonになります。 その「文字（リンクテキスト）」は既に自分自身でクリックされていると思うので、 ブラウザには、そのリンク先が表示された履歴が残っているはずです。 と言う事は a.x:visited {color:maroon; } で指定した 『訪問済みのリンクを maroon にする』の記述が適合されるので、 全部 maroon になるのは正しい動作かと思います。 InternetExplorer6ならば、 ツール→インターネットオプション→全般→履歴のクリアで ブラウザに記憶されている履歴がクリアできます。 履歴をクリアしたら、ブラウザに表示されているページを更新すれば、 ご質問の場合ならば、「リンク先のページのタイトル」の文字列の色が maroon から green に戻るはずです。 で、検証の為にもう一回この文字をクリックする時には クリックする前＝green マウスを合わせた状態＝#ffdddd クリックをしたその時＝#ffffdd クリックをした後＝maroon と、色が変化することでしょう。 maroon になっているのは、訪問者に対して、 「もう、ここのリンクはクリックしたよぉ」っていう合図と言うか、目印というか、 クリックしていない所の green と区別させる為ですよね？ ウェブサイトを作っている本人としては、 とにかく自分で設置したリンクは少なくとも一度はクリックして 動作の検証をする事かと思います。 そうすれば、当然、自分でクリックしたリンクテキストは visited で指定した色になるはずです。 なので、きっと、ご自身で作っているサイトの リンクテキストの色は maroon だらけになっているのではないでしょうか？ まぁ、これは、先にも書いた通りに正しい動作なので、 まっさらな状態で、再度検証したいのであれば 「履歴のクリア」をしてみましょう＾＾ と、こんな説明でご理解頂けますでしょうか？ 冒頭に、「簡単に済ませます＾＾」なんて書いておきながら、 なんだか、すっごく長くなってしまいました(^_^;) それでは、おやすみなさい {[(-ω-)]}zzzzZZZZ
お礼
履歴をクリアしたところうまく行きました。自分ではリックした記憶はないのですがいつの間にかクリックしていたのですね。不思議です。 でも、完璧に動くようになりました。有り難うございました！
- goldfox
- ベストアンサー率49% (123/249)
＞「リンク先のページの文字列」を1度でもクリックすると、それ以降は何度Internet Explorerでそのページを開いても、「リンク先のページの文字列」の文字列は常にviewedの色で表示されるのでしょうか。 viewedではなく、visitedですね。 「maroonになってしまう」リンク先へは1度でも行ったことのあるページではありませんか？ a:link …訪問前のリンク a:visited …訪問済みのリンク a:hover …リンクにカーソルが乗ったとき a:active …リンクをクリックしたとき 履歴やキャッシュが残っていれば、訪問済みと判断され、リンク済みの色になります。 履歴をクリアする、キャッシュが消えるなどすれば、訪問前の色に戻ります。
お礼
viewedではなくvisitedなんですね。よく覚えておきます。お手を煩わせました。 履歴をクリアしたところちゃんと表示されるようになりました。気づかないうちにクリックしていたのですね。 有り難うございました！
関連するQ&A
- リンクの文字色を別々に指定したい（オンマウスで変わるタグ）
メモ帳でＨＰをちまちま作ってたのですが、ちょっと困ったことが出てきたので質問させて下さい。 同じページのリンクの文字色を一括で変更するのは… <style type="text/css"> <!-- a:link { color: maroon } a:visited { color: maroon } a:hover { color: white } a:active { color: black } --> a { text-decoration: none; } </style> ですよね。 それと個別に変更するのが… <body link="maroon" vlink="black" hover="white" alink="maroon"> </body> なんですが、個別設定でカーソルをのせた時色が変わるタグがどうしても分かりません。 上の設定を踏まえた上で、オンマウスで色が変わるタグを教えて下さい。よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- 文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシート（CSS）の外部リンク方式を使用したテキストリンクの色変更
お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート（CSS）を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 （外部リンク式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> （外部リンク式スタイルシート） a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} （埋め込み式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。
- 締切済み
- HTML
- スタイルシートのリンクについて
スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>
- ベストアンサー
- CSS
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- liタグ中の二つのTABLEの間を埋めたい
お世話になります。 現在二つのテーブルタグを埋めたくて、思考錯誤中です。 普通にTABLEタグを利用すると、二つのテーブルは隙間なく埋まります。 これをliタグに持っていくと、隙間が発生しております。 これを埋める方法はありませんでしょうか？ 何卒よろしくお願いします。 （ちなみに私の環境はIE6です。） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body style="background-color:Black;"> <div> <table> <tr> <td> <table style="background-color: Red;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Red;"> <tr> <td> b </td> </tr> </table> </td> </tr> </table> </div> <ul> <li style="text-align: left; vertical-align: middle;"> <table style="background-color: Yellow;"> <tr> <td> a </td> </tr> </table> <table style="background-color: Yellow;"> <tr> <td> b </td> </tr> </table> </li> </ul> </body> </html>
- ベストアンサー
- HTML
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- テーブルの中の文字もスタイルシートで設定するには
<html> <head> <title>test</title> <STYLE TYPE="text/css"> <!-- h1 { font-size:50%;color:green; } '--> </STYLE> </head> <body> <h1> あああ <br> <table border=1> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr> </table> </h1> </body> </html> これだとブラウザで見た時にテーブルの外の文字しか適用されていませんが テーブルの中まで範囲は及ばないのでしょうか？ テーブルの中はテーブルの中専用のタグを作らないとダメでしょうか？ テーブルの外の文字と全く同じにしたいので一気に指定したいです。
- ベストアンサー
- HTML
- テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- operaだとテーブルがなくなります
operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; width:100%; height:10% } .midori{background-color:#999933; width:100%; height:3.3% } ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか
- ベストアンサー
- HTML
補足
そうなんですか。順番が重要なんて知りませんでした！！ 有り難うございました。 早速修正したところ、hover、active、viewedはうまく表示されるのですが、linkがやはり全部maroonになります。 viewedの意味がいまいち分かってないのですが、viewedを記述したページをInternet Explorerで表示してその画面で「リンク先のページの文字列」を1度でもクリックすると、それ以降は何度Internet Explorerでそのページを開いても、「リンク先のページの文字列」の文字列は常にviewedの色で表示されるのでしょうか。 そうだとするとlinkが全部maroonになるのが分かるような気もするのですが...。