cssでリンクに下線を表示したり非表示にしたりする

CSSの設定方法についての質問です。

ホームページで以下のような構成になっているのですが
それぞれの場所によってリンクの下線を表示させたり非表示にしたりしたいです。
CSSをどのように設定したらいいでしょうか？

<dl>
<dt><A Href="#01">○○</a>（→dtタグは下線を表示する）
<dt><A Href="#02">××</a>（→dtタグは下線を表示する）
</dl>

<h3><a name="01">○○</a></h3>（→名前定義では下線を非表示にする）
・・・
詳細については<a href="../□□.html">こちら</a>をご覧ください。
（→本文中のリンクは下線を表示する）

<A Href="#03"><img src="../images/△△.jpg"></a>（→画像リンクは下線を非表示にする）

お願いいたします！

No.1 回答者： mikemike7 回答日時： 2011/05/17 15:53

直接書くタイプ

<a href="#" style="text-decoration:none;">下線なし</a>

CSSで指定し、直接書くタイプ
# CSS指定
<style type="text/css"><!--
a.nounderline{text-decoration:none;}
--></style>

# 下線あり
<a href="#">下線あり</a>
# 下線なし
<a href="#" class="nounderline">下線あり</a>

CSSで指定し、エリアごとに自動設定されるタイプ
# 規則正しい記載でなければ難しいです。
# 現在、提示されているだけの内容だけでは、アドバイスするのは難しいです。

この回答へのお礼

ありがとうございました！

お礼日時：2011/05/19 09:16

No.2 回答者： outbrave 回答日時： 2011/05/17 15:57

text-decoration: underline; /* 下線あり */

text-decoration: none; /* 下線なし */

<dt> が２つ縦に並んでいますが下は、<dd> ではないのですか

すべてのタグに適用する場合は
dt a { text-decoration: underline; }
dd a { text-decoration: none; }

もし、両方 <dt> なら、class を設定する必要があります。
<dl>
<dt><a href="#01" class="abc01">OO</a></dt>
<dt><a href="#02" class="abc02">OO</a></dt>
</dl>

.abc01 { text-decoration: underline; }
.abc02 { text-decoration: none; }

h3 a { text-decoration: none; } /* 特に必要ないはずですが */

本文中のリンクは、そのタグを囲んでいるタグに class または id を設定します。
<p id="more">
詳細については<a href="../□□.html">こちら</a>をご覧ください。
</p>

#more a { text-decoration: underline; }

画像リンクに下線は表示されません。

この回答へのお礼

ご回答ありがとうございます！
やはりそれぞれに設定を変える場合には
classやidを設定しなければならないのですね。
cssを全体的に見直ししてみたいと思います。

ありがとうございました！

お礼日時：2011/05/19 09:16

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/05/17 18:36

CSSは、Cascading Style Sheetsです。

Cascading(滝の流れのように次々に影響を与えていくスタイルシート)と言う風な意味。
　CSSと言いながらCascadingを使いこなせていない説明があふれていますが・・

＞それぞれの場所によってリンクの下線を表示させたり非表示にしたりしたいです。
　まず、どちらを優先するかを決めます。多くの場面で下線を表示したくなかったら、詳細度が低い形でそれを指定します。
例)
a{text-decoration:none;} /* 詳細度1 */
a img{border:none;} /* リンクのある画像のborderを消す　詳細度2 */

HTML4だとして
　そのうえで、<div class="nav"></div>要素内の<dt>のみ下線を付けるなら
div.nav dt a{text-decoration:under-line;} /* 詳細度は13ですから、登場順番にかかわらず優先される。 */
HTML5だと
　<nav>と言う要素になりますから
　nav dt{text-decoration:under-line;} /* これでは詳細度が低すぎれば */
　nav dl dt{text-decoration:under-line;} /* 詳細度3 */
とか

＞<h3><a name="01">○○</a></h3>（→名前定義では下線を非表示にする）
　これはどこかで、a{text-decoration:under-line;}をしている後遺症かな、XHTMLだと下線がてたかも？？
　その場合は、h3 a[name]{text-decoration:under-line;} /* 詳細度 12 */
　要素セレクタは詳細度10です。classセレクタも厳密には[class]ですから、これも10加算する。

　スタイルシートのためだけに、class名をつけたり、idを付けるのは本来は邪道です。きちんとセレクタ，詳細度などCascading Style Sheetsを取得しましょう。

＞値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

この回答へのお礼

ありがとうございます！
さっそく修正してみます！

>スタイルシートのためだけに、class名をつけたり、idを付けるのは本来は邪道です。
>きちんとセレクタ，詳細度などCascading Style Sheetsを取得しましょう。

なるべく美しいソースを書きたいと思っているのですが
なかなか難しく悪戦苦闘しています。
全体的に見直ししてみたいと思います！

ありがとうございました！

お礼日時：2011/05/19 09:13

No.4 回答者： DrFell 回答日時： 2011/05/19 06:42

Cssのセレクタを勉強しましょう。

cssは
セレクタ{プロパティ:値}
で記述します。

ご希望のリンクの下線のプロパティおよび値は
text-decoration: underline; /* 下線あり */
text-decoration: none; /* 下線なし */
です。そして、a hrefの場合、初期値は下線ありなので記述しなければ、下線ありになるはずです。a nameの初期値は下線なしです。指定しなければ、下線は引かれません。

つまり、
セレクタ｛text-decoration: none;｝
を利用することで、ご希望のデザインになります。

セレクタですが、
「a」のみだと、a要素すべての指定に
「dl a」だと、dlの中に含まれるa要素の指定に
「dt a」だと、dtの中に含まれるa要素の指定に
「a img」だと、aの中に含まれるimg要素の指定に
「dt」だと、dt要素の指定
となります。

また、a name="～"とするより、id="～"としたほうが、何かと便利です。そこにリンク先から飛ばすこともできますし、idをcssで利用することもできます。idは最初の1文字がアルファベットでなければ、なりません。数字は文法違反です。

矛盾する指定をcssでした場合、詳細度が最も高い指定が、反映されます。同点の場合は、後からした指定が反映されるというルールがあります。詳細度は、要素タグ＜class＜idです。一応、1点、10点、100点ということになっていますが、classの10点を11こ集めて110点にしたところで、id1つ100点には負けます。

理由があって、他のdlとは別に、そのdlにだけ適応したい等と言う場合に、idやclassをhtmlでマークアップし、cssで局所的に指定することが、よくあります。本文のリストとナビゲーションのリストを分けたいなどです。

<dl class="menu" id="nav">/*ここにmenuクラスとnavのidを付記しました。片一方でも可*/
<dt><A Href="#01">○○</a>（→dtタグは下線を表示する）
<dt><A Href="#02">××</a>（→dtタグは下線を表示する）
</dl>

このdlの中身だけを他のdlと区別して指定することができます。
.menu{プロパティ:値}/*他の要素にもmenuクラスがある場合も。*/
#nav{プロパティ:値}
などで、指定できます。

dl.menu{　dlのmenuクラスのものだけ
.menu dt a{　menuクラスの中のdtの中のaだけ
などと他と区別して指定することができます。

長くなってしまいましたので、この辺で。
セレクタはまだまだ、文法があるので、詳しくは、cssの基礎を扱ったサイトや本のセレクタの項目をご参照ください。cssの基礎中の基礎です。

この回答へのお礼

ありがとうございました！

お礼日時：2011/05/19 09:11