質問: cssでリンクに下線を表示したり非表示にしたりする cssの設定方法についての質問です。 ホームページで以下のような構成になっているのですが それぞれの場所によってリンクの下線を表示させたり非表示にしたりしたいです。 cssをどのように設定したらいいでしょうか? ○○(→dtタグは下線を表示する) ××(→dtタグは下線を表示する) ### ○○ (→名前定義では下線を非表示にする) ・・・ 詳細についてはこちらをご覧ください。 (→本文中のリンクは下線を表示する) ![](#03)(→画像リンクは下線を非表示にする) お願いいたします!
回答: 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で局所的に指定することが、よくあります。本文のリストとナビゲーションのリストを分けたいなどです。 /*ここにmenuクラスとnavのidを付記しました。片一方でも可*/ ○○(→dtタグは下線を表示する) ××(→dtタグは下線を表示する) このdlの中身だけを他のdlと区別して指定することができます。 .menu{プロパティ:値}/*他の要素にもmenuクラスがある場合も。*/ #nav{プロパティ:値} などで、指定できます。 dl.menu{ dlのmenuクラスのものだけ .menu dt a{ menuクラスの中のdtの中のaだけ などと他と区別して指定することができます。 長くなってしまいましたので、この辺で。 セレクタはまだまだ、文法があるので、詳しくは、cssの基礎を扱ったサイトや本のセレクタの項目をご参照ください。cssの基礎中の基礎です。