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

このQ&Aに関連する最新のQ&A

A 回答 (3件)

A要素全体にスタイル設定してませんか?



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

なお、class1と書いたのはclass名なので任意のわかりやすい名前に変えてください。
    • good
    • 2
この回答へのお礼

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

お礼日時:2001/08/07 12:24

kusabo様がIDを使った方法をかかれているので、classとの関係について補足いたします。



IDは、一つ一つ別々につけるものです。NAME属性と同じようなものと考えてくだされば変わると思いますが、同一ページ内に同じIDを設定されたものがあってはいけません。かならずユニークにしてください。

それに対し
CLASSは、意味的にグループ化された集合と考えてください。
たとえば、ページの中でメニューとなる文字はすべてclass="menu"として、スタイルでサイズを統一する、とかいった用途で使います。

一般的にIDは、ブラウザの実装が中途半端なことがあることと、リンク下線をつけたくない文字列が複数箇所あるのならば、classを使うことをおすすめします。
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/08/07 12:29

下線を消したいリンクのタグ<A>


に名前を付けると良いでしょう。
例えば、

<A ID="kesu">ここの下線を消す</A>

そして

<HEAD>
<STYLE>
<!--
A#kesu {text-decoration:none}
-->
</STYLE>
</HEAD>

といった感じです。
分からない事があったら補足に記入してください
    • good
    • 0
この回答へのお礼

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

お礼日時:2001/08/07 12:28

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcss:リンク画像の枠消し: a img { border:none} にしてもダメ

リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。

下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。(色番号は長くなるので#だけにしています)a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。

どなたかお分かりになったら助けてください!

.entry-body a { color:#; background-color:#; border-bottom:1px #;}

.entry-body a img { background-color:transparent; border-bottom:none;}

Aベストアンサー

だいぶ端折って書きますが・・・。
こちらの環境firefox2
【引用開始】
<body>

<p class="entry-body">
<a href="#">hogehgeohgoe</a>

ぱたーんいち<a href="#">abc<img src="hogege.gif">def</a><br>
ぱたーんに<a href="#"><img src="hogege.gif"></a>

</p>
</body>
【引用終り】

もし「ぱたーんいち」のようにhtmlを書いているのでしたら、abcdefの部分に<a>に設定したcssが適用されます。<a><a/>の間に<img>ありますので・・・。「ぱたーんに」なら少なくとも背景については表示されないはずです。

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

リンクの下線の色を変えると
下線が下付きになってしまうのですが
間隔を、色を変更する前と同じにするには
どうしたらよいのでしょうか。
よろしくお願いいたします。


<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>

Aベストアンサー

> リンクの下線の色を変えると

違いますね。A要素のボーダーを描いたんです。文字列の下線は、
text-decorationのunderlineです。わざわざ消していますね。

要するに文字色と下線の色に違う色を使いたいんですよね。では
参考URLの応用でいけます。<a href="" style="color:#999999;
text-decoration:underline;"><span style="color:#ff99ff;">
説明(1)<br>説明(2)</span></a>こんな雰囲気で。

参考URL:http://oshiete1.goo.ne.jp/qa3547767.html

Q*{margin:0px;padding:0px;}というCSSのタグの意味について教えてください。

<style type="text/css">
*{margin:0px;padding:0px;}
</style>

ホームページで上記のようなソースを見かけたのですが、これはどういう意味なのでしょうか?
試しに新規ページにこのコードを記述してbody内にtableを作ってみたのですが、tableに記述したcellpaddingが
数値をいろいろ変えても動作しません。
この*{margin:0px;padding:0px;}という記述をすることによる意図は何なのでしょうか?
宜しくお願いします。

Aベストアンサー

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルールがあります。詳細度といいます。同じ詳細度なら、後から書いた方が優先されます。

*(何でも)より見出しや段落、テーブルと具体的な場所に対する指示の方が優先されます。
そして外部よりヘッダ。ヘッダよりインラインの方が優先度が高くなります。
そして、タグによってはどこに記述しても*より弱いタグもあります。
今回のcellpaddingやfontがそれにあたります。誤解を恐れず大雑把に説明するとそんな感じになります。

cellpaddingを使う代わりに同じ効果ならcellpaddingを記載した場所に「style="padding:10px;"」と入れてください。インラインといいます。このタグを閉じる場所まで有効です。
もし、そのページ全体の表に入れたいなら、ヘッダ部分(<head></head>の間)に「<style>td{padding:10px;}</style>」と入れてください。tdの当てはまる場所すべてに効きます。サイト全体に聞かせたいなら外部にします。cssでは単位は0以外省略できません。

つまり外部に原則を記述、インラインに1回だけの例外のものを記述ってやり方もできるので、状況に応じて使い分けされるといいです。

*はトランプのジョーカーみたいなものです。何にでも当てはまりますカードと思うといいです。

margin:0px;padding:0px;
これはマージンやパッディングを0にするってことです
何もしないで文字を入れると、ブラウザによってはぴったり上にくっつかないとか、くっつくとかいろいろ初期値が違うので、どのブラウザでも同じようにしたいときに、一律これだけと指示することが多いです。

●cellpaddingが聞かない理由と聞かせる方法
*はなんでもですが、より詳しい記述があれば、そちらを優先させるというルー...続きを読む

Qスタイルシートとリンク・下線・マウスのせると変化 先ほどの続き

ページ内で、リンクについて下線を表示させる方法として、以前使用していたA:link{文字色など から、.u_line{文字色など との記載に変更しました。
これにより、下線をつけたいリンクには<a class=u_line>とすることによって希望どおりの下線を表示させ、下線をつけたくないリンク部分にはそのまま記述することで、下線を自由に設定できました。

このページ内で同時に設定していた
A:hover{文字色など による、マウスをのせた時に文字色を変化について、あるリンクは下線+マウスのせると変化、他のリンク(画像)は下線なし+マウスのせても変化なし、ということはできるのでしょうか?
先ほどと同様の、.hover{文字色など ではできませんでした。
よろしくお願いします。

Aベストアンサー

クラス付きのリンクにhoverの設定をするには
.u_line:hover{・・・}
と、します。

Qtext-decorationを伸ばす方法

こんにちは、
下記のようにして、dtに下線を表示しているのですが、
スタートより横に下線だけ伸ばす方法ってありますでしょうか?

html-----------------
<dt>スタート</dt>

css------------------
#adcast dt{
width: 100%;
text-decoration: underline;}

Aベストアンサー

#adcast dt:before{content:" ";}
#adcast dt:after{content:"    ";}


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報