- ベストアンサー
画像の場合のみ、下線を消す方法はありますか？
http://www.tagindex.com/stylesheet/link/text_decoration.html この方法で消せることは知ったのですが、文字の場合は下線を表示、 画像にリンクがある場合は、リンクの下線や枠を非表示にしたいです。
- nhxwhitkqsmvy
- お礼率89% (41/46)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザによって差がありますが、 リンクの擬似クラスと子孫セレクタをつかって・・・ a:link img{text-decoration:none;border-style:none;} a要素内のすべての場合は(a name="") a img{text-decoration:none;border-style:none;} 通常は残しておいて、ナビゲーション内だけなら div.nav a img{} と指定すると良いでしょう。 ユーザーインターフェースに関わる部分なので、障害者のことを考えると、リンクがあると明示したほうが良いのです。 a img{border:none;text-decoration:none;} a:hover{border:1px solid red;} として分かりやすくしても良いでしょう。
その他の回答 (3)
- DrFell
- ベストアンサー率55% (305/551)
a img{/*★これでaの中のimgという意味になります。*/ text-decoration: none; border:none; } text-decoration: none; リンクの下線を表示しない border:none; 画像の周りの線を表示しない。
お礼
ご回答ありがとうございました。
- anmochi
- ベストアンサー率65% (1332/2045)
ん～そうねぇ。楽な方法としては次のようなやり方になるかな。まず、cssをこう書く。 a.noline { text-decoration: none; } どっとのーらいんというのを加えるんだな。次にhtmlをこう書く。 <p> <a class="noline" href="hoge">ここのリンクは下線が出ません。</a> <p> <a href="hoge">ここのリンクは下線が出ます（ブラウザによるけど）。</a> <p> <a href="noline" href="hoge"><img src="fuga.jpg"></a> <p> <a href="hoge"><img src="fuga.jpg"></a> 今度はくらすいこーるのーらいんというのがあるのに気づくだろう。これにより、class="noline"というものを付けたaだけにtext-decoration: none;を適用するつまり下線を出さないという事になる。もちろんclass="noline"を付けてないaタグはデフォルトの動作を行う。 これで、画像と文字という区分けではなく、aタグにclass="noline"をつけたら下線を消す、そうでなければ付けるという制御ができるぞ。他にも色々やり方はあるけど、これが一番分かりやすくて（面倒ではあるが）楽なのではないかな。
お礼
ご回答ありがとうございました。
- dezimac
- ベストアンサー率56% (2365/4208)
画像のリンク枠を消すのなら a img { border: none;} とCSSで定義する 例） <html> <head> <style type="text/css"> a img { border: none; } </style> </head> <body> <a href="index.html"><img src="hoge.jpg">リンク</a> </body> </html>
お礼
ご回答ありがとうございました。
関連するQ&A
- スタイルシートと画像リンクの下線
現在HPを作成しています。 スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。 A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。 何かよい方法がありますでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- ～マウスオンしたときに下線を表示させたい～
すみません。教えてください。 リンク先の下線を消す場合、要素に直接書くときは下記のように書けばいいのですよね。 <a href="リンク先" style="text-decoration:none;">文字</a> マウスオンしたときだけ下線を表示させる場合はどうしたらいいのでしょうか。 お分かりの方宜しくお願いします。
- ベストアンサー
- HTML
- マウスカーソルを当てた時だけハイパーリンクの下線を
マウスカーソルを当てた時だけハイパーリンクの下線を表示させたいです。 今、 <html> <head> <title>test</title> <style type="text/css"> a.{text-decoration: none;} </style> </head> <body> <a href="http://www.yahoo.co.jp/">yahoo</a> </body> </html> というコードですが、 まず、a.{text-decoration: none;}をしてるのに、リンクに下線がついてしまいます。 a.{text-decoration: none;}が間違っていると思うので、 マウスカーソルを当ててない状態で、リンクに下線を表示させない方法を教えてください。 更に、マウスカーソルを当てたときのみ、下線を表示させたいのですが、 その方法も併せてご教授お願いします。
- 締切済み
- CSS
- 一部のリンクの下線を消す
リンクの色などの設定をスタイルシートで行っているのですが、一部のリンクしている文字の下線を消したいとの依頼がありました。このような時に使えるタグはありますか？ {text-decoration:none} を使うと今までのリンク全部の下線が消えてしまいますので困っています。
- ベストアンサー
- HTML
- リンクの下線や色の指定を特定のところだけ設定したい
HTMLページ内で、いくつもあるリンクの中で、特定の箇所だけ 下線を付けない onMouseの時だけ下線を付ける 色をデフォルト以外の色を付ける ようにしたいのですが、どのようにしたらいいでしょうか。 たとえばこの下はむちゃくちゃですが、 .link { font-size:12pt; color:#BF0000; font-weight: bold; text-decoration:none; a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }} こんな感じでスタイルシートに書いて <a href="xxxx.html"><span class="link">click</span></a> みたいな感じでも少しずつ変えながらいろいろ試してみたのですが 色やonMouse以外の時の下線なしはできたのですが、onMouse時の下線付きがうまくいきません。 どうすればよいかご存じの方ご教授ください。
- ベストアンサー
- HTML
- CSSで指定したリンクのみに下線
現在CSSを使ってHPを作成しています。全体的にはリンクには下線を引かないように下記のように指定しました。 a:link{color:#523e35;text-decoration:none;} しかし、リンク色とテキスト色を同じにしたいので同じにしましたがどこにリンクが貼ってあるのか分かりません。 とりあえず、ホームページ内メニューの部分のみはリンクが張ってあるか把握できるようメニューのリンク部分だけにでも下線を引きたいのです。 試しに .menu_line { text-decoration: underline; } 上記をつかって<div class="menu_line">でメニューを囲ってみるとリンクの部分ではなく、テキストの部分にのみ下線がひかれてしまいました。 いったいどう指定すればメニューの部分のリンクにのみ下線を引くことができるでしょうか…。 ご存知の方がいれば教えていただきたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- Pagerで現在表示ページの下線を消したい
質問です。 「Pager」で「Sliding」モードにした場合、現在表示ページ以外のページへのリンク部分に下線が付くのは良いのですが、現在表示ページにも下線が付いてしまうのがどうも気に入りません。 スタイルシートで「text-decoration:none;」にしても効果がないのですが、なにか良い方法はないでしょうか？
- ベストアンサー
- PHP
- リンクの文字と下線の間にスペースを持たせたい
ホームページを制作する際のリンク設定について教えてください。 文字とリンク下線の間を少し空けるには、「text-decoration:underline」以外にどのような記述が必要なのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- ブログの下線
fc2ブログでアフィリエイトをしています。 私のブログのテンプレートは、ブログタイトルと記事のタイトルにカーソルをもって行くとリンクの下に下線が表示されるのですが、それ以外は色が変わるだけで下線が表示されません。 画面右側(プラグインカテゴリ2)のフリーエリアは、テキストリンクに常に下線が表示されるようにしたいんです。 他のリンクはカーソルがきた時だけ、下線がでるようにしたいです。 ブログ初心者なので分かりやすくお願い致します。 /* リンクの設定 */ a{cursor : pointer ;} a:link{ color : #000000; text-decoration: none; } a:visited{color : #000000; text-decoration: none; } a:active{color : #008B8B;} a:hover{color : #2F4F4F;} .entry a{font-weight: nomal;} h1, h2, h3{ color : #808080; text-decoration: none; margin: 0px; padding: 0px; font-weight: normal; } h2 a{ text-decoration: none; }
- ベストアンサー
- ブログ
- テーブル内のリンク下線
テーブル内のリンク下線（多数）を全て消したいのですが、 <table style="text-decoration:none;"> ではできず、 <a href="" style="text-decoration:none;"> と全てに指定しなければなりません。 これはいっぺんに適応はできないものなのでしょうか？
- 締切済み
- その他（プログラミング・開発）
お礼
ご回答ありがとうございました。