• 締切済み

cssでハイパーリンクの線を消したい

<style type="text/css"> a.noline { text-decoration: none; } </style> <a href="http://www.yahoo.co.jp/">yahooを開く</a> これで、リンクの線が消えると思ったら、消えません。 どこがまちがってますか?

  • HTML
  • 回答数2
  • ありがとう数0

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

そうではなくて、 a.noline { の.はクラスセレクタと言って  class属性の値リストにnolineを含むa要素というセレクタです。  class属性は、複数の値を半角スペースで区切った値のリストになっています。 <p><!-- 段落の開始 -->  <span id="YAMADA" class="name first female">山田</span>君と<span id="ORUKA" <span id="TANAKA" class="name second male">田中</span>は、今日は欠席しました。そのために、この班は5人で実験を行なうことになりました。 </p> <p>  今日は、塩酸と水酸化ナトリウムの中和実験をしました。 </p>  このように、classは、複数の値を半角スペースでもつことができます。idはそのページ内で一箇所しかありませんが、classはそうではない。 name:このspanは名前 first|second:1列2列 female|male:女性|男性  ここで、 span.name{font-weight:bold;}だと名前は太字 span.female{color:red;}だと女性は赤 span.male{color:blue;}だと男性は青 HTMLは文書構造だけを書きます。 a.nolineとは、classの値に一つにnolineをもつ a 要素と言う意味です。 <a href="http://www.yahoo.co.jp/">yahooを開く</a>  はclass属性を持ちませんから、このスタイルは適用されません。  もしこのa要素にスタイルを適用させたければ a[href="http://www.yahoo.co.jp/"]{text-decoration:none;} と属性セレクタで指定すれば良いです。  すべてのa要素でしたら a{text-decoration:none;} ★ まずHTMLをきちんと文書構造だけをマークアップすること ★ その文書構造を使ってセレクタを使ってスタイルを適用させたい要素を指定すること ★ スタイルは、text-decoration:none;というふうに、プロパティ:値;と記述する  この順番です。 a[href="http://www.yahoo.co.jp/"]{text-decoration:none;} a{text-decoration:overline;} と書かれていたら、すべてのa要素は上に線が引かれます。しかし、href属性の値にhttp://www.yahoo.co.jp/をもつa要素には、適用されません。  これは、a[href="http://www.yahoo.co.jp/"]のほうが、より詳しく指定されているためです。これを詳細度といいます。 a[href="http://www.yahoo.co.jp/"]の詳細度は 0011 a{text-decoration:overline;}の詳細度は 0001 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

  • dezimac
  • ベストアンサー率56% (2365/4208)
回答No.1

クラス指定をしているからです。 a.noline { text-decoration: none; } としているなら <a href="hoge" class="noline">nolineクラス指定したのだけ装飾無し</a> 全てのリンクで装飾無しにしたいなら a { text-decoration: none; } <a href="hoge">全て装飾無し</a>

関連するQ&A

  • CSSについて

    カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか? リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>

    • ベストアンサー
    • HTML
  • css で一部のハイパーリンクの色を変えたい

    デフォルトでは 27595a というカラーで各リンクに対してハイパーリンクを貼り、Title という ID 内のみハイパーリンクに触れた時やハイパーリンクそのものの色を白にしたい場合、どのように css を書けばいいいですか? 色々やってみたのですが、うまくいきません。 ご教授よろしくお願い致します。 <style type+"text/css"> a:link { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:visited { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:active { text-decoration: none; color: #27595a; font-family: "メイリオ","Meiryo","Tahoma","Courier New"; } a:hover { text-decoration: none; color: #27595a; font-family: "Tahoma","メイリオ","Meiryo","Courier New"; } </style> <div id="Title"><a href="./" target="_top">Toppage</a></div>

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

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • CSSの文字指定

    <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか? <style type="text/css"> font:16px "MS Pゴシック",平成角ゴシック,</style>とやってもダメでした と

    • ベストアンサー
    • HTML
  • CSSの優先順位

    CSSを一部適用しない部分を設定したいのですが方法が分かりません。 もしかすると、私のやりたいことはCSSの順位付けかもしれません。 ▼基本▼ a:link {color:赤;text-decoration:none;} a:visited {color:青;text-decoration:none;} a:hover {color:黄;text-decoration:none;} a:active {color:緑;text-decoration:none;} ▲基本▲ 一方、下記のテキストには上記CSSの効果はいらないです。ここのテキストはリンクを貼っても文字の色(基本色:黒)を変化させず、下線もつけたくありません。 <td style="border:1px solid gray;" onmouseover="this.style.backgroundColor=紫" onmouseout="this.style.backgroundColor=白">ホーム</td> 「基本」を記述をすると、もちろんリンクをつけたすべてのテキストに適用されてしまいます。 しかし「基本」を一部適用したくない場所に不適用とすると下線とかも勝手につきますよね。 2番目に優先させるものとして↓を記述すべきですか? a:link {color:黒;text-decoration:none;} a:visited {color:黒;text-decoration:none;} a:hover {color:黒;text-decoration:none;} a:active {color:黒;text-decoration:none;} そもそも優先順位のつけかたが分からないのですが…。 色々考えましたが、何をすべきか分かりません。よろしくお願いします。

  • 外部CSSがうまく表示されません

    下記ファイル(index.html・sld01.html・sld02.html) について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html(CSS反映せずdefault表示)さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか? index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略(java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略) a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }

  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • リンクの線を消してもう一度表示したい。ところが・・・。

    DTIでブログを作成している者です。 「リンクの下線を消して、ポイントしたときだけリンクの線が出るようにしたい」と思っています。 リンクの線を消すには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } --> </STYLE> と入力すればよいとHTML辞書に書いてありました。 リンクをポイントしたときに下線が出るようにするには、 <STYLE TYPE="text/css"> <!-- A { text-decoration:none } A:hover {color:#FF0000;text-decoration:underline;} --> </STYLE> とタグを打ち込めばOKと書いてありました。 ここで、「リンクの下線を消してポイントだけ表示させる」ため、上記の二つ目のタグを打ち込んで文章を書き、リンクを作ったのですが、「リンクの下線を消して、ポイントした時だけ」という形では表示されません。(プレビュー画面ではちゃんとそうなっているのですが、その後ブログ上で見ても、下線もなければ、ポイントしても下線が出てきません。IEでもスレイプニルでも同じです。)正しくはどうやればいいのでしょうか? あと、リンクごとによって「ポイントする前の最初の文字の色」を変更したいのですが、どのような順序でやればよいでしょうか?例えば最初ピンク色に設定したとして、その文章をリンクすると青文字になってしまいます。その場合、青色になった箇所のソースで、その単語の直前に<FONT color="#ff00ff">のタグを打ち込む、というやり方であってますか?教えてください!

  • 外部CSSをかくには。

    HPのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部CSSでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY {  letter-spacing:7px;  line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML

専門家に質問してみよう