• ベストアンサー

一部のリンクの下線を消す

リンクの色などの設定をスタイルシートで行っているのですが、一部のリンクしている文字の下線を消したいとの依頼がありました。このような時に使えるタグはありますか? {text-decoration:none} を使うと今までのリンク全部の下線が消えてしまいますので困っています。

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

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

  • ベストアンサー
  • sight
  • ベストアンサー率53% (199/370)
回答No.1

A要素全体にスタイル設定してませんか? アンダーラインを消したい「一部の文字」を囲むAタグの中で text-decoration:noneのスタイルを設定するか、 「一部の文字」に共通なclassを作ってください。 スタイル定義のところで、 A.class1 {text-decoration:none}; のように書けば、A要素のclass1という名前のclassに関して、デコレーションなしのスタイルが設定されるという定義になります。 この定義後、「一部の文字」を囲むAタグはこのclassにしてやります。 <A herf="リンク先URL" class="class1">一部の文字</A> なお、class1と書いたのはclass名なので任意のわかりやすい名前に変えてください。

kapakapa
質問者

お礼

ありがとうございます。 消すことができました。

その他の回答 (2)

  • sight
  • ベストアンサー率53% (199/370)
回答No.3

kusabo様がIDを使った方法をかかれているので、classとの関係について補足いたします。 IDは、一つ一つ別々につけるものです。NAME属性と同じようなものと考えてくだされば変わると思いますが、同一ページ内に同じIDを設定されたものがあってはいけません。かならずユニークにしてください。 それに対し CLASSは、意味的にグループ化された集合と考えてください。 たとえば、ページの中でメニューとなる文字はすべてclass="menu"として、スタイルでサイズを統一する、とかいった用途で使います。 一般的にIDは、ブラウザの実装が中途半端なことがあることと、リンク下線をつけたくない文字列が複数箇所あるのならば、classを使うことをおすすめします。

kapakapa
質問者

お礼

捕捉ありがとうございます。勉強になりました。

  • kusabo
  • ベストアンサー率25% (18/71)
回答No.2

下線を消したいリンクのタグ<A> に名前を付けると良いでしょう。 例えば、 <A ID="kesu">ここの下線を消す</A> そして <HEAD> <STYLE> <!-- A#kesu {text-decoration:none} --> </STYLE> </HEAD> といった感じです。 分からない事があったら補足に記入してください

kapakapa
質問者

お礼

ありがとうございます。 今回は<CLASS>でやりましたが、いい勉強になりました。

関連するQ&A

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

    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">のタグを打ち込む、というやり方であってますか?教えてください!

  • テーブル内のリンク下線

    テーブル内のリンク下線(多数)を全て消したいのですが、 <table style="text-decoration:none;"> ではできず、 <a href="" style="text-decoration:none;"> と全てに指定しなければなりません。 これはいっぺんに適応はできないものなのでしょうか?

  • リンクの下線を破線にしているのですが…

    リンクの下線を破線にするスタイルシートを使用しているのですが、 通常の左寄せや<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>

  • リンクの下線や色の指定を特定のところだけ設定したい

    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
  • リンク文字変化のタグについて

    リンクを文字にマウスをあてた時のリンク文字変化のタグについて教えてください。 色々な文字変化があると思いますが上下にプルっと動くタイプのタグを探しています。 ↓これは[head]~[/head]の間に注入するタグのようなのですが <STYLE type="text/css"> <!-- A:HOVER{ position : relative; top:3px; left:3px;} A{text-decoration : none; } --> </STYLE> このように[head]~[/head]の間に挿入するタイプのものではなく 個別で指定するにはどのように記述すればいいでしょうか? ↓例えばコレは[head]~[/head]に入れて下線を消すタグですが <style type="text/css"> A{text-decoration:none;} </style> ↓こっちは個別に消す下線を消すタグです <a href="ページのアドレス" style="text-decoration:none"> リンクする文字</a> このようなに先ほどのタグの場合に個別に記述するやり方を教えてください。ヨロシクお願い致します。

  • マウスオーバーで下線を表示させる(リンク)

    <a href="リンク先" target="_blank" style="text-decoration: none;"> <font size="-1" color="405050" onMouseOver="this.style.color='#dc143c'" onMouseOut="this.style.color = '#405050'"> 文字列</a></font> というタグで、マウスオーバーで文字色が変わるように しています。 下線を常時表示させてもいいのですが、 表示させると文字が読みにくくなってしまうので、 マウスオーバー時のみ下線を表示させ、 文字色も変えるタグはないでしょうか? 出来れば上記のようにタグに直接挿入する ものが希望です。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • タグを使ってリンクの下線を非表示にする方法を教えてください。

    HTMLの質問です。 下線の装飾等をする方法はかなり紹介されているのですが、 下線を非表示にする方法をご存知のかたお願いします。 IE等のブラウザーにオプションからの設定はできるのですが、 それに頼らず、最初からタグによって、非表示にする方法を探しています。 いろいろ探しまして、これはというタグを000aboutのサイトから 教えていただいたのですが、実際に使用してみると実行されませんでした。 何かが足らないのかなと思うのですが、分かりません。 そこは掲示板がないので、こちらでお分かりの方からアドバイスをいただきたく 投稿しました。 <style type="text/css"><!-- a.declink { text-decoration: none; } --></style> 上記のタグは下線を非表示にするタグと別の装飾タグを入れるタグとの組み合わせ でしたが、私には一部不要でしたので、ーーnone;以降の部分は割愛しました。 このタグにミスがありますでしょうか。 または、他のタグで非表示にできる方法をご存知でしたら、ご教授ください。 お願い致します。

    • ベストアンサー
    • HTML
  • マウスを重ねたら下線が出る

    マウスを重ねたら下線が出るようにしたいので こちらタグを改造してもらえませんか? <a href="" style=text-decoration:none;a:hover:text-decoration:underline>test</a>

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

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

    • ベストアンサー
    • HTML
  • CSS ある場所だけリンク時に下線表示

    タイトルの通りなのですが、ページ全体ではなく 特定の場所のテキストリンクにオンマウスしたら 下線が表示されるようにしたいんです。 スタイルシートの書き方にとまどっており、 <div style="~"> で始めて </div> で閉じ、 a:link {color: #ffffff; text-decoration: none} a:hover {color: #ffffff; text-decoration: underline} を使うところまではわかるのですが…。 どなたか正しい記述を教えていただけないでしょうか?

専門家に質問してみよう