- 締切済み
リンクで包括している画像とテキストの周りに枠線を表示させたい
例えば画像だけにリンクしているなら枠線は画像の周りに表示されるのですが、 画像の下にテキストを置いて、その2つをリンクで囲むと、 テキストだけに枠線がかかるようになり、ちゃんと画像とテキストの周りに枠線が表示されません・・・ 理想としては次のようなかんじにしたいのですが、どう記述すればよいのでしょうか? ┌──┐ │画像│ │文字│ └──┘ <a href="画像へのURL" style="border: 1px solid rgb(51, 204, 255);"> <img src="image.jpg"><br>文字 </a> ↑ これだと枠線が画像とテキストを囲んでくれない
- みんなの回答 (4)
- 専門家の回答
関連するQ&A
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、(4ヶ所とも)今度は何も表示されなくなってしまいました。 <問題のタグのひな形> <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします!
- ベストアンサー
- JavaScript
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料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
- リンクのスタイルをテキストと画像を別々にするには?
リンクのスタイルの設定で詰まってしまい困っています。 テキストと下線部分にpaddingを入れたいため、text-decorationではなくborderで下線を設定しています。 このような場合、 画像のみborderを消し、テキストのみにborderを適応させることは可能でしょうか? <a href="#"><img src="hoge.gif"></a><a href="javaScript..." >テキスト</a>のように書けば簡単なのですが、挙動が望んでいたものと違ってしまうため、<a href="javaScript..."><img src="hoge.gif">テキスト</a>のままでお願いします。 (自分でjsが書ければ解決しそうな気もしますが…残念ながらjsは借りてきたものです) サンプルでもう少し詳しく説明しています。 http://imaichie.web.fc2.com/sample.html
- ベストアンサー
- HTML
- 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
- リンク画像のマウスオーバー時の下線を消したい。(a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
- リンクする画像とテキストをくっつけるには?
ブログでHTMLタグを使いたいのですがまだよく分かりません。 テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像(写真)をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A> 私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか?ご教授願えませんか?
- ベストアンサー
- ブログ
- 画像リンクでの余白を消したい.(モバスペ)
モバスペでHPを作成しているのですが、 HPを携帯から見たとき、 画像リンクと画像リンクの間に余白が出来てしまいます。 繋げて表示させたいのですが、 どうしたら良いですか? <BR CLEAR="all>のタグを使ってみたところ、 パソコンから見たら繋がっていましたが、 携帯(au)からは余白が出来ていました…。 無理なのでしょうか?? ちなみに、下のようなタグを使っています。 <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> 教えてください。
- 締切済み
- その他(インターネット・Webサービス)
- サムネイル画像をリンクにしたとき align="top"が効かない
サムネイル画像をリンクにしたときに横に"*"を画像topと揃えて表示したいのですが、 <A HREF="リンク先"><img border="0" src="image.gif" align="top"></a>*<br> 上記ソースで"*"が下になってしまうのはなぜでしょうか。 解決策がありましたら、ご教示お願いします。
- ベストアンサー
- HTML
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
- プロ野球選手の高額年俸は適切か疑問視されています。大谷翔平や村上宗隆、山本由伸などの一流選手の年俸は莫大なものですが、それに見合った成果があるのか疑問が呈されています。
- 一方で、アメリカのスラム街の存在や福祉の問題などが持ち出され、プロ野球選手への高額年俸の妥当性に疑問が生じています。資金を社会的な課題に回すことの重要性が指摘されています。
- また、プロ野球の役割や社会的な価値にも言及されており、個人の年俸だけでなくチームの運営や球団スタッフの給料の重要性も考えるべきだとの意見もあります。冷静な判断と賢明な経営が求められています。
お礼
ご回答ありがとうございます。 その後、KompoZerというソフトで作成しているからなのかと疑い、 メモ帳からhtmlファイルを作りそれを入力して試したところ同じようにできました。 たぶん文字コードなのかそこらへんの影響だとは思うのですが、 見た目では分かりずらいので発見が遅れました・・・ いずれにしても回答が参考になりました。ありがとうございます。