- 締切済み
cssによる画像リンク枠の色変更
CSSでリンクが貼られた画像の４隅のボーダーに色を付け、 オンマウスで４隅のボーダー色が変わる方法ってどうやってやるのでしょうか？ 一番簡単なＣＳＳを教えて下さい。 ちなみに、下記でやってみましたが、よくわかりません。 <style type="text/css"> <!-- IMG a{ border-width : 7px 7px 7px 7px;border-style : solid solid solid solid;border-color : fuchsia fuchsia fuchsia fuchsia; } --> </style> </head> <body> <a href="#"><img src="jpg" width="54" height="72" border="0"></a>
- midorin_h
- お礼率10% (14/136)
- HTML
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IMG a{は逆です。 これは子孫セレクタという方法で、必ずHTML側の入れ子構造に従わなければなりません。すなわち、 親要素 子要素 の順番になります。（連結は半角スペース） 小さいことですが、HTMLのタグが半角小文字なら、スタイルシート側も半角小文字が良いです。 (注) XHTMLでは、要素名 属性名は半角小文字でなければなりませんので、今から統一しておいたほうが先で直さなくて済む。 a img{} です。 borderは、この場合一括して記述できます。 border: solid 1px fuchsia; /* 順不同 */ また、擬似セレクタも下記の順番で設定しておきましょう。 a img:link {} a img:visited {} a img:hover {} a img:active {} a[name] img:hover { color: inherit; background-color: inherit;} これらは、上書きしたいプロパティだけでよいです。カスケード(継承)されますから、Cascading Style Sheetsはカスケードが一番のポイント。 その結果 a img{ border:solid 1px red ridge;} a img:link { border-color: fuchsia;} a img:visited { border-color: maroon;} a img:hover {} /* この場合redが継承される */ a img:active { border-color: yellow;} a[name] img:hover { color: inherit; background-color: inherit;}
関連するQ&A
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。
- ベストアンサー
- HTML
- cssで画像を中央に寄せる方法について
よろしくお願いします。一部の画像を中央に寄せたいのですが方法が分かりません。現在の内容は以下のような感じです。 【html】 <p class="font"> スタイルシート <span class="color2">レッスンブック</span> パソコン <img src="img/hoge.gif" alt="テスト" width="250" height="130" /> インターネット プリンター </p> 【css】 .font2{ text-align: left; width: 750px; padding: 20px; border-top: 2px solid #191970; border-right: 2px solid #191970; border-bottom: 2px solid #191970; border-left: 2px solid #191970; margin-left: 0; margin-right: 10; background-color: #ffff00; font-weight: bolder; } imgのみ中央に寄せたいのですがご指導をお願い致します。 良く分からなかったのですが以下のような記述をしてみたのですが 中央に寄りませんでした。 <img src="img/hoge.gif" class="aaa" alt="テスト" width="250" height="130" /> cssに .aaa{ text-align: center; } また、同スタイルにborderとpadding、widthとpaddingを使用するのは 有効な方法では無いのでしょうか？ 前回のご質問で他の方にご指導頂いたのですが誤って締め切ってしまいました。 どうぞよろしくお願い致します。
- ベストアンサー
- HTML
- 【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
- 画像にリンクを張ると画像がずれるのを解消したいです
ホームページ作成初心者です。 ある個所の画像にリンクを張ると画像がずれて、表示がおかしくなります。 CSSで横幅を設定した中に同じサイズの画像を配置しています。 詳細をご覧いただきアドバイス頂けたら幸いです。よろしくお願いいたします。 html <div id="sidenavi2"> <ul> <li id="midashi2"><img src="image/os_side.jpg" width="200" height="56"></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> <li><a href#">あああ</a></li> </ul> <p><img src="image/message.jpg" width="200" height="65" border="0"></p> <p><img src="../open_service/siryo_seikyu.jpg" width="200" height="62"></p> </div> css #contents #sidenavi2 { padding: 0px; float: right; height: auto; width: 200px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } 情報が不足する点があるかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS dtの中に画像を入れた時に
CSS dtの中に画像を入れた時に dtの文字が下にずれてしまいます。 画像を消すと問題無いので、画像の指定に原因があると思うのですが・・・。 ■css ---------------------------------------- .sub{ clear:both; width:420px; } .sub dt{ float:left; padding:0 0 0 0; width:200px; height:38px; line-height:38px; background:url(../img/sub-bg2.jpg) no-repeat; font-size:1em; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } .sub dt img{ padding:0 0 0 0; width:4px; height:38px; } .sub-menu dd{ float:right; width:180px; height:38px; line-height:38px; font-size:1em; background-color:#ffffcc; text-align:right; border-top:1px solid #f4e9bf; border-bottom:1px solid #f4e9bf; } ■html --------------------------------------- <dl class="sub"> <dt><img src="../img/a.png" width="4" height="38" alt="aa" />テキスト</dt> <dd>あいうえお</dd> </dl> お分かりになる方、宜しくお願いします。
- ベストアンサー
- HTML
- CSSで画像の横に余計な余白が・・・
質問させて下さい。 以下のようなソースを書いた時のことです。 HTML部分------------------------------- <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> <DIV id="box-s"> <img src="********" width="290" height="140" border="0" > </DIV> CSS部分------------------------------- #box-s{ width:300px; float:right; text-align:left; border: 1px solid #000000; clear: none; margin: 2px; padding: 4px; } と書くと、IEだと問題ないのですが、firefoxでみると画像の 右側の余白がかなり不自然に開くんです。 少しぐらいの崩れは良いのですが、、、あまりに違いすぎる のでどなたかお助け願えないでしょうか。
- 締切済み
- HTML
- <div>この余白は・・・
<div>で作ったボックスの中に、さらに<div>のボックスを二つ（box、box2）並べたいのですが、float:leftでboxを左に寄せると、次に回り込んで表示されるbox2との間にかなりの余白があります。 CSSでbox、box2にmarginは指定していないのですが、この余白は何なんでしょうか？ また、このbox、box2をある程度間に余白を持たせた上でセンタリングしたいのですが、これもなぜかうまくいきません・・・。 ▼HTML <div class="out"> <div class="title"> <img src="img/title.jpg" width="700" height="75" border="0"> </div> <div class="main"> <img src="img/main.jpg" width="700" height="375" border="0"> </div> <div class="menu"> <img src="img/home_a.jpg" width="100" height="35" border="0"> <img src="img/first.jpg" width="100" height="35" border="0"> <img src="img/info.jpg" width="100" height="35" border="0"> <img src="img/order.jpg" width="100" height="35" border="0"> <img src="img/support.jpg" width="100" height="35" border="0"> <img src="img/link.jpg" width="100" height="35" border="0"> <img src="img/question.jpg" width="100" height="35" border="0"> </div> <div class="area"> <div class="box"> <h5>AAAAAAAAA</h5> <img src="img/kari.gif" width="250" height="100" border="0"> </div> <div class="box2"> <h5>BBBBBBBBB</h5> <img src="img/kari2.gif" width="250" height="100" border="0"> </div> </div> </div> ▼CSS div.out{ width:700px; background-color:#ffffff; } div.main{ border-style:solid none solid none; border-width:10px; border-color:#666666; } div.menu{ margin-bottom:50px; } div.area{ text-align:center; padding:0.7em; border:solid; border-color:red; } div.box{ float:left; width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } div.box2{ width:250px; border-style:none solid solid solid; border-width:1px; border-color:#99ccff; background-color:#99ccff; } h5{ margin-bottom:0px; padding:0.5em; } どなたか知恵をお貸しください。よろしくお願いいたします。
- ベストアンサー
- HTML
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- CSSで表示が、、、
写真を並べているページなのですが、 firefox と IE での縦のスペースの空き具合が異なってしまいます。 IEで見ると、firefoxよりも大きく立て幅が空いてしまい 揃ってくれません。 回避策をググって色々試してみたのですが 上手くいきませんorz ひょっとしたらコード的にどこかおかしいのかも しれないのですが、、、どなたか助言をお願いしますm(_ _)m -- html-- <div class="navi" > <div class="pic2"><a href="01.html"><img src="pic/1mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="02.html"><img src="pic/2mini.jpg" width="200" height="150" border="0" /></a></div> <div class="pic2"><a href="03.html"><img src="pic/3mini.jpg" width="200" height="147" border="0" /></a></div> <div class="pic2"><a href="04.html"><img src="pic/4mini.jpg" width="200" height="151" border="0" /></a></div> </div><!--navi--> -- 外部CSS -- .pic2 { float: left; margin-left:30px; margin-top:20px; } .navi { clear:both; margin-top:40px; }
- ベストアンサー
- CSS
