CSSで、以下の指定部分のアンダーラインを消すにはどうしたら良いでしょうか?


<h1><span class=”nounderline”>【<a href=”#”>ココ</a>】</span></h1>

h1,aにはアンダーラインが指定されているものとします。また、【】部分のアンダーラインも消えている必要があります。対象ブラウザはIE6.0以上、Firefox(最新バージョン)とします。

自分では以下のような形で試してみたのですが、アンダーラインが表示されてしまいました。宜しくお願いします。

.nounderline {
border: 0px;
text-decoration: none;
}

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/07/07 15:43:54
  • 終了:--

回答(12件)

id:hate218 No.1

hate218回答回数189ベストアンサー獲得回数02005/07/07 15:49:02

http://www.tagindex.com/stylesheet/text_font/text_underline_posi...

スタイルシート[CSS]/テキスト・フォント/下線の位置を指定する - TAG index

上記を参考にしてみてはいかがでしょうか。

id:dak

下線を消す方法は書かれていません。全く参考になりません。

2005/07/07 16:08:09
id:ed_tks No.2

ed_tks回答回数699ベストアンサー獲得回数02005/07/07 15:54:10

http://www.hatena.ne.jp/1120718634#

人力検索はてな - CSSで、以下の指定部分のアンダーラインを消すにはどうしたら良いでしょうか? <h1><span class=”nounderline”>【<a href=”#”>ココ</a>】</span></h1> h1,aにはアンダ..

※URLはダミーです。


<h1>【<a href=”#” class=”nounderline”>ココ</a>】</h1>


としてはいかがでしょうか?

id:dak

h1には下線が指定されてるんですってば。参考になりません。あの、回答もらうと回答者に払わなくてもお金掛かるんで、ちゃんと読んでから書いて下さい。

2005/07/07 16:09:41
id:fet-33 No.3

fet-33回答回数303ベストアンサー獲得回数02005/07/07 15:57:59

ポイント20pt

http://allabout.co.jp/computer/hpcreate/closeup/CU20030513A/inde...

初心者応援講座 スタイルシートを使う3つの方法 - [ホームページ作成]All About

<span class=”underline”>

はとりのぞき、

<a href=”●” class=”underline”>

にしてみて下さい。

<a>

にアンダーラインが指定されているのですから、

<a>

に対する例外項目として指定する必要があります。

また、CSSを外部ファイルから呼び出す場合は


.nounderline {

border: 0px;

text-decoration: none;

}


は、アンダーライン指定の行よりも後の行に記載する必要があります。

逆にすると、アンダーラインが消えないことがあります。

id:dak

aタグだけに指定すると【】部分が消えないので、取り除かないで両方に指定すると良いのかな。スタイル指定の順序はビンゴっぽいです。忘れてました。有難うございます。

2005/07/07 16:11:05
id:cozycozy No.4

cozycozy回答回数1ベストアンサー獲得回数02005/07/07 16:05:32

スタイルシートで


.nounderline {text-decoration:none;}


としておいて、HTMLの方で


<h1<a href=”#” class=”nounderline”>ココ</a></h1>


としてはいかがでしょうか。


(URLはダミーです)

id:dak

【】部分が消えないので駄目です。

2005/07/07 16:11:41
id:ku__ra__ge No.5

ku__ra__ge回答回数118ベストアンサー獲得回数402005/07/07 16:07:09

ポイント20pt

この場合spanタグではなく、aタグのスタイルが優先されますので、

A{

 text-decoration : none;

}

とやれば、下線が消えます。

id:dak

既出ですが、当たってます(凡ミスで悔しい)。ありがとうございます。今の所【】部分も下線を消すためにspanタグとaタグの両方にnounderlineクラスを指定しています。CSSファイル内のnounderlineクラスより下にはaの指定もh1の指定もありません。が、【】部分には下線が表示されます。何でしょうコレ。

2005/07/07 16:16:26
id:itachin No.6

itachin回答回数5ベストアンサー獲得回数02005/07/07 16:18:39

ポイント30pt

http://www.tohoho-web.com/www.htm

とほほのWWW入門

URLはダミーです。

text-decorationは入れ子要素の外側を継承してしまうようです。

つまり例でいくとH1要素のアンダーラインを

中のspan要素でキャンセルすることはできません。

私も前に同じことをしようと思ったのですがうまくいかず、

結局パラグラフ要素にクラスを設定して

<h1 class=”nounderline”>【<a class=”nounderline” href=”#”>ココ</a>】</h1>

のように使い分けました。

この方が使い勝手もいいように思います。

id:dak

なるほど!実は、実際には【の前にアンダーラインを付けたい文字列が入っているのでh1の中の全ての文字のアンダーラインを消してしまうワケにはいかないので、以下のようにしてみました。

下線必要 【ココ

【】部分の下線が消えません。。うーん。

親要素に下線が指定してあっても、aタグのnounderline指定は効くみたいです。

2005/07/07 16:35:16
id:andi No.7

andi回答回数448ベストアンサー獲得回数02005/07/07 16:27:57

ポイント30pt

http://cssbug.at.infoseek.co.jp/detail/winie/b040.html

Internet Explorer (Windows) CSSバグリスト

> CSSでは、text-decorationプロパティで指定された内容は継承されないが、子孫要素のブロックはすべて同じ装飾を施されるべきと規定されています。


だそうです。

同じページにありますが<a>に限ってIEでは解除されてしまうバグがあるそうです。

id:dak

子要素で下線を消したり出したりするべきじゃないって事ですね。何か変な気もしますが。。a要素で効いてしまうのはバグだったんですね。なるほど。

2005/07/07 16:39:30
id:tnks No.8

tnks回答回数4ベストアンサー獲得回数02005/07/07 16:34:14

ポイント30pt

http://www.mozilla.gr.jp/standards/webtips0002.html

text-decorationの仕様を理解する - Web標準普及プロジェクト

反則でしょうが、

<h1 class=”nounderline”>【<a class=”nounderline” href=”./”>ココ</a>】</h1>


FireFoxのみでよければ、

.nounderline2 {

text-decoration: inherit;

color:#FFF; //背景色に合わせる

}

span.nounderline a{

text-decoration: none;

}

<h1><span class=”nounderline2”><span class=”nounderline”>【<a href=”./”>ココ</a>】</span></span></h1>

id:dak

おお、こんなに面倒な話があったんですね。という事は、【ココ】をh1の外に出すしかなさそうです。ちなみに、h1にnounderlineを指定しても【】の下線は消えないようです。これも謎です。

2005/07/07 16:49:55
id:mustan No.9

mustan回答回数3ベストアンサー獲得回数02005/07/07 17:24:03

ポイント30pt

URLはダミーです。

H1要素にtext-decorationが指定してある場合、SPAN要素などのインライン要素に

text-decoration: none; 等を指定しても、下線は消えません。

よってご提示のソースでは無理です。

itachinさんのやり方が最もよさそうです。

(itachinさんの「パラグラフ要素」は「ブロック要素」という意味?)


他のページとの見た目の整合が取れなくなる可能性はありますが、他の案として

「下線が必要な箇所をクラスで指定する」というのはどうでしょうか?


h1, a

{

text-decoration: none;

}


.underline

{

text-decoration: underline;

}


<h1><span class=”underline”>下線あり</span>【<a href=”#”>ココ</a>】</h1>

id:dak

h1を特定する為にDIV要素(id付き)で囲って、上記のようにするのが一番無理が無さそうですね。どうもありがとうございます。

2005/07/07 18:12:14
id:pspdaiki No.10

pspdaiki回答回数30ベストアンサー獲得回数02005/07/08 18:31:18

これでどうでしょうか。

<a href=”アドレス” style=”text-decoration:none;”>表示する文字</a>

id:dak

【】部分が消えないので駄目です。回答履歴読んで下さいね。

2005/07/08 21:16:52
id:rin_way No.11

rin_way回答回数14ベストアンサー獲得回数02005/07/11 13:58:15

URLはダミーです。

<a HREF=”#” 

 styla=”border: 0px;

text-decoration: none;”></a>

で指定してみてください。

もしかしたらできるかもしれません。


また、アンダーラインの有無は、

InterNET Explorerでしか

動作しない、という話を聞いたこともありますが・・・・

id:dak

既出ですし、それでは【】部が要件を満たしません。新しい方法が出れば、と思って質問終了はしていませんが、今後回答される方は回答ログを読んでからにして下さい。

2005/07/12 07:42:55
id:tnks No.12

tnks回答回数4ベストアンサー獲得回数02005/07/12 22:35:48

ポイント10pt

http://www.hatena.ne.jp/1120718634

人力検索はてな - CSSで、以下の指定部分のアンダーラインを消すにはどうしたら良いでしょうか? <h1><span class=”nounderline”>【<a href=”#”>ココ</a>】</span></h1> h1,aにはアンダ..

2度目です。URLはダミーです。

以下のソースで私の環境では、IE6、Firefoxともにご希望の動作をします。

<html><head>

<style type=”text/css”>

h1{text-decoration:underline}

a{text-decoration:underline}

.underline{text-decoration:underline}

.nounderline{text-decoration:none;}

.forecolor{color:#000;}

.white_underline {

text-decoration: underline;

color:#FFF;

}

</style></head><body>

<h1 class=”nounderline”><span class=”underline”>下線必要</span><span class=”nounderline”>【<a href=”#” class=”nounderline”>ココ</a>】</span></h1>

<div class=”underline”>

<h1 class=”nounderline”><span class=”underline”>下線必要</span><span class=”white_underline”><span class=”forecolor”>【<a href=”#” class=”nounderline”>ココ</a>】</span></span></h1>

</div>

</body></html>

id:dak

確認してみましたが、こちらの環境では1つ目、2つ目共に「下線必要」部分の下線が出ませんでした。white_underlineを使う方はなるほど、と思いました。

2005/07/13 08:44:18

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません