• ベストアンサー

スタイルシートと画像リンクの下線

現在HPを作成しています。 スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。 A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。 何かよい方法がありますでしょうか？ よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

質問者さんのやり方ですと、Aタグすべてにスタイルが適用されてしまいます。 CLASSで分けられてはいかがでしょうか？ <a class="u_line">と下線を設定したい部分に記載していただき、スタイルシートの記述には、 .u_line{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} とする。

gorocar
質問者

お礼

ありがとうございました。教えていただいた方法で、実現できました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • スタイルシートで。。

    こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか？ ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか？ 教えてください、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • リンクの下線を破線にしているのですが…

    リンクの下線を破線にするスタイルシートを使用しているのですが、 通常の左寄せや<center>タグで囲ったテキストでは正常に動作するのに、 <div align="right">または<p align="right">で囲った右寄せのテキストには破線が表示されません。 どうすれば表示されるようになるでしょうか。 私が使用しているスタイルシートは以下の通りです。 <style type="text/css"> <!-- A:link {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:visited {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:hover {color:#FF3300; text-decoration:none; border-bottom:1px dashed #00CCCC;} --> </style>

  • スタイルシートでリンクに装飾することについて教えてください

    今、自分の日記にスタイルシートを使っています。 スタイルシートでリンクに点線の下線をつけているんですが、 これをページ内のリンク部分の一部だけに適用するようにしたいのですが どうしたらできますか？ 今、ソースはこうなっています。 a:link,a:hover,a:active,a:visited { text-decoration : none ; border-bottom : 1px dashed #99E ; } これに何か付け加えて指定したらできると思うのですが 自分で調べてもわかりませんでした。 ぜひ教えてください。よろしくお願いします。

  • リンクの下線の色を変えると下線が下付きになってしまいます。

    リンクの下線の色を変えると 下線が下付きになってしまうのですが 間隔を、色を変更する前と同じにするには どうしたらよいのでしょうか。 よろしくお願いいたします。 <body link="#ff99ff" vlink="#ff99ff" alink="#ff99ff"> <a href="" style="border-bottom: 1px #999999 solid;text-decoration:none;">説明(1)<br>説明(2)</a><br><br> <body link="#ff99ff" vlink="#ff99ff" alink="#ff99ff"> <a href="">説明(1)<br>説明(2)</a></div>

    • ベストアンサー
    • HTML
  • リンクのスタイルシートについての質問

    スタイルシートを作成しています。 リンクにアクションをつけたのですが 思うような動作にならずに、悩んでします。 ちなみに動作確認はIE６で行っています。 ◆現在の動き リンクにマウスをのせると箱が上下に動いてしまう。 ◆どうしたいか リンクにマウスののせても箱が上下に動かないようにしたい。 固定したいとうことです。 以下に作成したソースをのせておきますので わかる方いましたら教えていただけると幸いです。 a.menu01{ text-decoration:none; text-align: center; border:#FFF solid 1px; background-color:#DACD96; width:280px; font-size:15px; font-weight:bold; color:#FFF; padding:5px; display:block; letter-spacing: 5px; margin-bottom:10px; } a.menu01:active { margin-bottom:10px; } a.menu01:visited{ margin-bottom:10px; text-decoration:none; } a.menu01:hover { text-decoration:none; color:#AA8B62; background-color:#FFFFFF; margin-bottom:10px; }

  • リンクの下線と文字の間隔を開けるには

    ブログでやりたいんですが、教えてください。調べてみると、padding-bottom: px らしいんですけど、うまくいきません。リンクの部分は次のような記述（ライブドア）になっているんですが、どう書き換えればいいのでしょうか。 a{color:#666;text-decoration:underline;} a:link{color:#666;text-decoration:underline;} a:visited{text-decoration:underline;} a:active{} a:hover{background-color:orange;text-decoration:none;} よろしくおねがいします

    • ベストアンサー
    • HTML
  • ホームページビルダーでスタイルシートを使ったのですが？

    今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • スタイルシートの適応のやり方

    現在ドリームウェーバーでHPを作っていますが CSSを使いメニューボタンをへこむボタンにしたいのですが うまく反映されません。 ソフトが最近から使い始めたのでうまく理解できていないところです。 a.sample{ text-decoration:none; } a:hover.sample{ color:#CC0000; border-width:0px 1px 1px 0px; border-style:solid; border-color:#990000; position:relative; top:-2px; left:-2px; } a:active.sample {/*クリック中の色*/ color:#CC0000; border-width:1px 0px 0px 1px; border-style:solid; border-color:#990000; position:relative; top:2px; left:2px; padding-left:3px; } こちらです。 手順を教えて頂けないでしょうか？

    • ベストアンサー
    • HTML
  • 【急ぎます！】ページ幅を解除と、メニューの色を変更するには

    http://flash.xtaro.com/sozai/tool/fcount/sample.htmここを参考にＨＰを作っています。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 700px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #66cc99; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 700px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #339966; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #bbffdd ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> (1)メニュー１や２の色を変更するにはどうすればいい？ (2)ページ背景色をhttp://www.kds.kddi.com/topics/index.htmlのようにグラデーションにするにはどうすればいい？ (3)ページ幅を変更するにはどうすれいい？

    • ベストアンサー
    • 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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する