No.2
- 回答日時:
残念ながら、ANo.1のご回答者様の方法では、質問者様のご希望の「画像リンクの場合は下線を出さないように」とはなりません。
リンク付きの画像を囲む(ディフォルトの)ボーダー表示が消せるだけです。<img>に対するborderプロパティと<a>に対するtext-decorationプロパティは別ものです。質問者様のご希望は、おそらく原則(汎用)としてa:hoverの時はアンダーラインを表示するが、画像にリンクが張られている時のみ例外としてアンダーラインを表示させない様にしたい、ということだと思います。
であれば、CSSに更に適当なclassを追加:
--------------------------------------------------------------------------------
a.hogehoge:hover { text-decoration: none; }
--------------------------------------------------------------------------------
HTML側では画像リンクの場合のみそのクラスを適用:
--------------------------------------------------------------------------------
<p><a href="#">テキストテキスト</a></p>
<p><a class="hogehoge" href="#"><img src="images/hogehoge1.jpg" alt="hogehoge1" width="100" height="25"></a></p>
--------------------------------------------------------------------------------
上記の表示結果は、上はマウスオーバー時にアンダーライン表示、下はアンダーラインなし、となります。
No.3
- 回答日時:
No.2さんのほうが間違っていませんか。
「下線」は画像にはつきません。
「下枠線」なら余計についてしまいますが。
質問者さんは「下枠線」(border-bottom)をつけているのではないですか?
そこがはっきりすれば(なぜborderを使うのかなど)、対策は立てられるかもしれません。
No.4ベストアンサー
- 回答日時:
goldfox様
> 「下線」は画像にはつきません。
ご指摘どおり、「下線」「下枠線」という言葉の使い分けが明確でなかったのは訂正します。
ただ、ANo.1の回答者様がサンプルとして書かれたHTMLコードが
<a href="#">test<img src="~">test</a>
という、<a>タグの中にテキストと画像が混在しているものでしたので、その様なケースを差しているのかとてっきり思ってしまいました。この場合であれば、<img>タグの下にも「線」は表示されてしまいますので…。
確かに<img>タグがborder:0;に初期化されていて<a>タグの中に<img>タグしか含まれていないのであれば、いかなる線も画像の下にはつきません。ですので私が書いた方のサンプル:
<p><a class="hogehoge" href="#"><img src="images/hogehoge1.jpg" alt="hogehoge1" width="100" height="25"></a></p>
の状態であれば<a~>だろうと<a class="hogehoge"~>だろうと差はないです。その点は紛らわしかった事をお詫び致します。
ただ、質問者様の:
>スタイルシートでリンク下線を消して、カーソルが乗った時に下線を出すように指定していますが、画像にリンクを貼った場合も、カーソルが乗った時に下線がでてしまいます。
という文章から察すると、「スタイルシートでリンク下線を消して」というのは"a { text-decoration: none; }"とされていると思われますし、であれば"a:hover"に対しても"{ text-decoration: underline; }"で「カーソルが乗った時に下線が」出る状態を設定されているとするのが自然であり、わざわざborder-bottomで設定しているとは考えにくいと思うのですが…?
まあこればかりは想像であれこれ解釈の違いを論じてもしょうがないので、質問者様からの情報提供を待つしかありません。
回答をありがとうございます。
abril様仰せの通り、
{text-decoration:none;}で
「a:link」「a:visited」「a:visited」「a:active」を指定しています。
a:hover {text-decoration:underline;}
で、カーソルが乗った時にリンク下線が出る設定にしております。
質問内容に詳細情報を筆記しないで申し訳ございませんでした。
abril様の回答では、画像リンクの際にはclass指定のスタイルシートで指定をすれば良いという事になりますよね?
画像リンクの際に個々に指定をしないといけないのは、多少面倒な気もしますが(ズボラですみません 汗)
ブラウザに左右されずに、画像リンクに下線がでないので、
この方法で指定をする事に致します!
本当にありがとうございました m(_"_)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの上にロゴマー...
-
拡張子無しで画像を表示したいです
-
「DecareステートメントにPtrSa...
-
IMGタグでTIFF画像を表示
-
タイトルバーに画像を入れるHTM...
-
ボタンを押したままにする。
-
HPのリンクボタン。。。。
-
YAHOOオークションの出品説明に...
-
バナーの貼り方とバナーにリン...
-
▲▲マウスオンで画像を変更につ...
-
IE11にてonclickの動作不良
-
windowsは画像にマウスオンで画...
-
自分のHPにタグで天気予報を...
-
<img src="相対パス">の絶対パ...
-
<area></area> 部分にボーダー...
-
画像の周りに色がつく
-
期間ごとに画像表示を切り替え...
-
テーブルタグの余白
-
PDFの保存ボタンが表示されません
-
background-sizeでcontainする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報