「夫を成功」へ導く妻の秘訣 座談会

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>(→画像リンクは下線を非表示にする)

お願いいたします!

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

A 回答 (4件)

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 … )
    • good
    • 0
この回答へのお礼

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

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

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

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

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

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の基礎中の基礎です。
    • good
    • 0
この回答へのお礼

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

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

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


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

<dt> が2つ縦に並んでいますが下は、<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; }

画像リンクに下線は表示されません。
    • good
    • 0
この回答へのお礼

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

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

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

直接書くタイプ


<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で指定し、エリアごとに自動設定されるタイプ
# 規則正しい記載でなければ難しいです。
# 現在、提示されているだけの内容だけでは、アドバイスするのは難しいです。
    • good
    • 0
この回答へのお礼

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

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

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

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

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

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

Qハイパーリンクに下線を表示するには?

 現在、こちら↓のテンプレートを使っているのですが
http://sozai.blog18.fc2.com/blog-entry-69.html
ハイパーリンクに下線が表示されません。

 記事内のみ、もしくは一箇所のみ下線を表示する記述はあれば教えていだだきたいです。

Aベストアンサー

直接の場合
<a href="http://foo.ne.jp" style="text-decoration: underline">下線あり</a>
-------------------------------------
CSSの場合(アンカーが全部アンダーラインになる)
a { text-decoration: none; }

a { text-decoration: underline }
に変更
-------------------------------------
CSSで記事部分のみアンダーラインになる
.entry_body a { text-decoration: underline }

a { text-decoration: none; }
よりも下方面に追加記入する。
※記事部分のクラス .entry_body が変更されている場合は未適応

Qリンクの下線を消したいのに消せない(CSS)

自分でタグを入力して、XHTMLとCSSでサイトを作っているのですがどうしても解決できない問題があるので質問させていただきます。

サイトの各ページに飛ぶテキストリンクをページの上部に作っていて、そのリンクを

・通常時(a:link)は・・・・・・・・下線なし
・訪問後(a:visited)は・・・・・・・下線なし
・マウスオーバー時(a:hover)は・・・下線あり

というふうにしたいので、CSSに書いたのですがどの場合においても下線が表示されてしまいます。

CSSをどのように書き直せば、上記のように下線が表示されるのでしょうか教えてください。

XHTML:http://love.meganebu.com/~twilight/question/index.html

CSS:http://love.meganebu.com/~twilight/question/mainstyle.css

Aベストアンサー

このあたりのサイトが参考になるかと。
http://www.tagindex.com/stylesheet/link/text_decoration.html

Qリストの左余白の削除方法

<li>リストを作成した再に表示されてしまう、左余白部分を削除して、画面左に詰めたいのですが、上手く出来ません。
どなたかご教授頂けませんでしょうか?

=>CSS記述<=
ul li {
list-style: none;
margin: 0px;
padding: 0px;}

=>HTML記述<=
<ul>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプル</a></li>
</ul>

Aベストアンサー

ul li {

の箇所を

ul {

にするだけ

Q一部CSSを無効にする

数ページのテーブルをcssファイルを使って半透明化させ背景が薄く見えるようにしています。
そこでテーブル自体だけでなくテーブル内の画像や文字も半透明化されるのですが、あるページのテーブル内にある数枚の画像のみを半透明化したくない場合、どのように書けば良いですか?
CSSはあまり、というか全く詳しくなくて、idやclassというのも調べてみたのですが、
目的のものに辿りつけず…困っています。宜しくお願いします。

Aベストアンサー

 とりあえず下記サイトは読まれましたか?下記は比較的わかりやすく説明していると思います。

参考URL:http://www.tohoho-web.com/css/basic.htm


人気Q&Aランキング