<h1><span class=”nounderline”>【<a href=”#”>ココ</a>】</span></h1>
h1,aにはアンダーラインが指定されているものとします。また、【】部分のアンダーラインも消えている必要があります。対象ブラウザはIE6.0以上、Firefox(最新バージョン)とします。
自分では以下のような形で試してみたのですが、アンダーラインが表示されてしまいました。宜しくお願いします。
.nounderline {
border: 0px;
text-decoration: none;
}
No.1
189
0
http://www.tagindex.com/stylesheet/text_font/text_underline_posi...
スタイルシート［CSS］/テキスト・フォント/下線の位置を指定する - TAG index
上記を参考にしてみてはいかがでしょうか。
No.2
6990
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>
としてはいかがでしょうか？
h1には下線が指定されてるんですってば。参考になりません。あの、回答もらうと回答者に払わなくてもお金掛かるんで、ちゃんと読んでから書いて下さい。
No.3
3030
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;
}
は、アンダーライン指定の行よりも後の行に記載する必要があります。
逆にすると、アンダーラインが消えないことがあります。
aタグだけに指定すると【】部分が消えないので、取り除かないで両方に指定すると良いのかな。スタイル指定の順序はビンゴっぽいです。忘れてました。有難うございます。
No.4
10
スタイルシートで
.nounderline {text-decoration:none;}
としておいて、HTMLの方で
<h1<a href=”#” class=”nounderline”>ココ</a></h1>
としてはいかがでしょうか。
（URLはダミーです）
【】部分が消えないので駄目です。
No.5
11840
20pt
この場合spanタグではなく、aタグのスタイルが優先されますので、
A{
text-decoration : none;
}
とやれば、下線が消えます。
既出ですが、当たってます(凡ミスで悔しい)。ありがとうございます。今の所【】部分も下線を消すためにspanタグとaタグの両方にnounderlineクラスを指定しています。CSSファイル内のnounderlineクラスより下にはaの指定もh1の指定もありません。が、【】部分には下線が表示されます。何でしょうコレ。
No.6
50
30pt
http://www.tohoho-web.com/www.htm
とほほのＷＷＷ入門
URLはダミーです。
text-decorationは入れ子要素の外側を継承してしまうようです。
つまり例でいくとH1要素のアンダーラインを
中のspan要素でキャンセルすることはできません。
私も前に同じことをしようと思ったのですがうまくいかず、
結局パラグラフ要素にクラスを設定して
<h1 class=”nounderline”>【<a class=”nounderline” href=”#”>ココ</a>】</h1>
のように使い分けました。
この方が使い勝手もいいように思います。
なるほど！実は、実際には【の前にアンダーラインを付けたい文字列が入っているのでh1の中の全ての文字のアンダーラインを消してしまうワケにはいかないので、以下のようにしてみました。
【】部分の下線が消えません。。うーん。
親要素に下線が指定してあっても、aタグのnounderline指定は効くみたいです。
No.7
4480
30pt
http://cssbug.at.infoseek.co.jp/detail/winie/b040.html
Internet Explorer (Windows) CSSバグリスト
> CSSでは、text-decorationプロパティで指定された内容は継承されないが、子孫要素のブロックはすべて同じ装飾を施されるべきと規定されています。
だそうです。
同じページにありますが<a>に限ってIEでは解除されてしまうバグがあるそうです。
子要素で下線を消したり出したりするべきじゃないって事ですね。何か変な気もしますが。。a要素で効いてしまうのはバグだったんですね。なるほど。
No.8
40
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>
おお、こんなに面倒な話があったんですね。という事は、【ココ】をh1の外に出すしかなさそうです。ちなみに、h1にnounderlineを指定しても【】の下線は消えないようです。これも謎です。
No.9
30
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>
h1を特定する為にDIV要素(id付き)で囲って、上記のようにするのが一番無理が無さそうですね。どうもありがとうございます。
No.10
300
Yahoo! JAPAN
これでどうでしょうか。
<a href=”アドレス” style=”text-decoration:none;”>表示する文字</a>
【】部分が消えないので駄目です。回答履歴読んで下さいね。
No.11
140
Yahoo! JAPAN
URLはダミーです。
＜a HREF＝”＃”
ｓｔｙｌａ＝”border: 0px;
text-decoration: none;”＞＜/a＞
で指定してみてください。
もしかしたらできるかもしれません。
また、アンダーラインの有無は、
InterNET Explorerでしか
動作しない、という話を聞いたこともありますが・・・・
既出ですし、それでは【】部が要件を満たしません。新しい方法が出れば、と思って質問終了はしていませんが、今後回答される方は回答ログを読んでからにして下さい。
No.12
40
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>
確認してみましたが、こちらの環境では1つ目、2つ目共に「下線必要」部分の下線が出ませんでした。white_underlineを使う方はなるほど、と思いました。
80
77
4
2
2
下線を消す方法は書かれていません。全く参考になりません。