ベストアンサー

同じページでリンクの色を変える

2011/10/06 13:54

同一ページ内でa:linkの設定を変える方法がありますか。最初はCSSでclassの設定で簡単にできると思いましたが、そもそも .site { a:link { red } } とかってできないですよね？

uzume_z
お礼率87% (396/452)

CSS
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/06 18:47 回答No.4

No.3です。＞詳細度とか見たことすらないですけど、階層構造の深さだなとは何となく分かります。　CSS(カスケーディングスタイルシート)を使うときは、プロパティより先に、カスケーディングの仕組みを学んでおかないとなりません。そうしないと、要素(タグ)にいちいちIDやclass名を振ってしまい、とんでもない文字数のHTMLが出来上がるし、後から「わけわかめ」になります。　HTMLは文書構造を示し、スタイルシートでプレゼンテーションを指定することでHTMLは極めて簡略化できる・・はずなのに・・divやclassやidてんこ盛りの巨大なHTMLを書いてしまう。　決して難しいものじゃなくて、ごくごく一般的に理解できる常識的な内容です。 a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */ リンクのa要素の色はマゼンタにしましょう。 div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */ 　headerクラスのdiv(汎用ブロック)の子孫( 半角スペース)のリンクaは赤ですよ。 div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */ 　しかし、その中のナビゲーションブロック内のリンクaは、緑 div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */ 　そのうちで、兄にふたつのaをもつa:linkは水色 div.header div.nav a+a:link{color:yellow;}/* (3)詳細度[0,0,3,4] */ 　兄がふたつのaは水色 div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */ 　一方本文(section)内の段落中のa:linkは青 (6)は詳細度が[1,0,0,0]として計算される。　詳細度は *(全称セレクタ)、タグの属性(<body link="blue">)はゼロ要素(タグのこと)、擬似要素(:first-leterとか)は、d=1 属性a[href]、クラス(a.class)、擬似クラス(:linkとか)は c=1 一意セレクタ(ID)は、b=1 HTMLの属性中のstyleでの指定は、a=1 [a,b,c,d]という数として数えます。　そのプロパティが継承されるか否かは常識的なものです。たとえばcolorプロパティは、親の段階で決めれば子々孫々まで有効ですが、borderプロパティは継承されません。　値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) 　カスケーディングスタイルシートの本当に大事な根幹部分です。もし理解していれば、HTMLをどう書けばよいかもわかるはずです。idはリンクの終端、class名は文書(の意味的)構造を示すものをつける。と言う意味は、CSSのCを知ると理解できるかと。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

質問者

お礼 2011/10/06 19:17

再度のご回答どうもです。言いたいことはよく分かりますよ。でも普通の人にとってはやっぱり難しいです。ホームページソフトのメーカーが簡単にできるというから足を突っ込んで中途半端になっちゃう人が多いです。自分もみごとにその中の一人ですから。　本当は１から習う順番があるんでしょうがそんな事したら売れなくなるからじゃないでしょうか。

質問者

補足 2011/10/07 00:45

返信の内容は批判ではなく率直な感想です。なので気に障ったらごめんなさい。やっぱり普通の人にとって簡略化できるより、汚くても出来るor出来ないかの方が重要です。　このテーマは私も疑問に思っていることなのでまた別の機会に質問してみたいと思います。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/10/06 15:53 回答No.3

a要素でには、href属性やname属性をもちますから、a:linkとは、<a href="">の意味ですね。わたざわたざclassなどで悩む必要はありません。HTMLが文書構造にしたがって正しくマークアップされていれば・・・ [例] <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<p>なんたらかんたら<a href="">リンク</a>へ<p> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> 　　<h2>見出し</h2> 　　<p>なんたらかんたら<a href="">リンク</a>へ<p> 　　<div class="aside"> 　　　<h3>コラム記事</h3> 　　　<p>なんたらかんたら<a href="" style="color:silver;">リンク</a>へ<p> ・・・・・だとしたら、 a:link{color:magenta;} /* 詳細度[0,0,0,1] (colorは継承するプロパティ) */ div.header a:link{color:red;} /* (1)詳細度[0,0,2,2] */ div.header div.nav a:link{color:green;} /* (2)詳細度[0,0,3,3] */ div.header div.nav a+a+a:link{color:aqua;}/* (4)詳細度[0,0,3,5] */ div.header div.nav a+a:link{color:aqua;}/* (3)詳細度[0,0,3,4] */ div.section p a:link{color:blue;}/* (5)詳細度[0,0,2,2] */ (6)は詳細度が[1,0,0,0]として計算される。　CSS(カスケーディングスタイルシート)のカスケーディング機能を使うと、HTMLさえきちんと書けていれば、スタイルシートのためだけにclass名やidを使わなくても、特定の部分の要素のスタイルホ変更できます。　カスケーディングは、スタイルの出所、継承、詳細度などをひっくるめて利用します。

質問者

お礼 2011/10/06 17:16

この前も詳しくお世話になりました。これは前の方の説明を更に詳しくしたものですね。今なら理解できるけどa+a+aって？？？何か凄く深淵な世界を見せられている気がします。詳細度とか見たことすらないですけど、階層構造の深さだなとは何となく分かります。

ログインすると、全ての回答が全文表示されます。

gungnir7
ベストアンサー率43% (1124/2579)

2011/10/06 15:30 回答No.2

こちらから応用ができるでしょう。 http://www.scollabo.com/banban/apply/ap5.html タグに直接当てれば良いのだそうです。タグごとにという話であれば、ol headerとかを作って ol header li a:{linl:red}とかでやれば良いでしょう。これでvisitedとかもいけると思いますが未検証なので悪しからず。

質問者

お礼 2011/10/06 17:11

これは全く気付きませんでしたｏｒｚ＿その通りリストです。上段と下段で違う色にしたかったので。とても自分の力だけでは無理ですね。取り敢えずうまく動いたみたいです。

ログインすると、全ての回答が全文表示されます。

・真綾・（@Ma-yan_bh1011）
ベストアンサー率30% (79/257)

2011/10/06 14:15 回答No.1

＞.site { a:link { red } } 入れ子はできないけど、できたとしてもする必要なんてない。 .site { 　color: #000000; } これで<a class="site">が黒になる。というかlinkなんてわざわざ明示することないと思う。だからこんな基本中の基本のところなのに要らん混乱してしまったんじゃないでしょうか。

質問者