- ベストアンサー
画像にリンクをはって枠をつけたいのですが
css初心者です。 よろしくお願いします。 imageに枠をつけてリンクをはり、その枠が訪問前だったら赤、訪問済みだったら白というふうにcssで設定したいのですが、やり方がよくわかりませんでした。 すみませんが、ご存知の方、教えて頂けたら幸いです。 よろしくお願いいたします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
試してませんが、以下でどうでしょうか。 HTMLで <div class="abc"> <a href="#"><img src="1.jpg" width="80" height="100" /></a> <H2>…（以下略） </div> 外部スタイルシートで .abc a:link img { border: 1px #f00 solid; } .abc a:visited img { border: 1px #fff solid; }
その他の回答 (3)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> この場合、なぜIE用のスタイルシートが必要なのでしょうか？IEのborderに関するバグがあるからなのでしょうか？ いや、アンカーにborderを指定しても内包するimgタグの大きさに合わせて高さの変化しないケースがあるのでそれを考慮しています。 borderにCSSの適用できる環境は無理にアンカーへborder指定するより素直にimgへのborder指定を使ったほうが無難かな、と言うことです。
お礼
ご回答有難うございました。 高さが変化するケースがあるのですね。 もっと経験を積んで勉強していきたいと思います。 奥が深いです。。 アドバイス、有難うございました。
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
こ～んな感じでどうでしょ？自分で実験用に使ったソースをほとんどそのまま引っ張ったため質問者様の色指定とかは無視してますが^^; ＃HTMLの中身 <link rel="stylesheet" type="text/css" href="border_defo.css"> <!--[if IE]> <link rel="stylesheet" type="text/css" href="border_ie.css"> <![endif]--> </style> </head> <body> <p> <a href="#" class="img_border"><img src="test.png" class="link_img" alt="てすと" title=""></a> </p> ＃border_defo.cssの中身 a:link { color:blue; } a:visited { color:blue; } a:hover { color:red; } a:active { color:red; } .link_img { border:2px solid; } ＃border_ie.cssの中身 a.img_border:link { border:2px solid blue; } a.img_border:visited { border:2px solid blue; } a.img_border:hover { border:2px solid red; } a.img_border:active { border:2px solid red; } .link_img { border:0px; } ちなみにWinのIEとFirefoxと見比べたときリンクのフォーカスを示す点線の表示位置が異なりますが、文句言わないでくださいね。 ほとんどごまかしとしか言いようのない手法なのでどうしようもないのです><
補足
ご回答ありがとうございました。 何度も何度も読み返させて頂きました。 imageにクラスを指定する方法とaにクラスを指定する方法があるのですね。とても高度だと思いました。 で、この .link_img { border:0px; } が大切だったみたいです。とても勉強になりました。 ありがとうございましたっ。 それでもし宜しければお聞きしたいのですが、この場合、なぜIE用のスタイルシートが必要なのでしょうか？IEのborderに関するバグがあるからなのでしょうか？ 宜しくお願いします。
<STYLE TYPE="text/css"> <!-- A:link { color: red } A:visited { color: white } --> </STYLE> スタイルシート辞典を用意しておくと、何かと便利ですよ。 ご参考まで。
補足
素早いご回答ありがとうございます。 説明が足らずすみません。 HTMLで <div class="abc"> <a href="#"><img src="1.jpg" width="80" height="100" border="1"></a> <H2>…（以下略） </div> 外部スタイルシートで .abc a:link { color: red; } .abc a:visited { color: white; } のように設定しました。 それでmacのIEやsafari等で見ると大丈夫なのですが、WIN IE等で見ると適用されませんでした。 もしアドバイス頂けましたら、よろしくお願いします。
お礼
ご回答ありがとうございました。 きちんと表示されましたっ。 それで、最初ご指摘の通りしたのですが、MACで見ると指定の色になるのですが、WINでは青のリンク枠で。 で、include_abさんの表記にプラスして img { border: 0px; } を最初の方に貼ったらちゃんと変わりました。 そういえば最初に * { margin: 0; padding: 0; } img { border: 0px; } をペチっと貼っとくことって、どなたかのサイトに書いてあったような。 教えて頂いてありがとうございました。また図々しいですが色々と教えてください。よろしくお願いします。