- ベストアンサー
同じページでリンクの色を変える
- みんなの回答 （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 )］より
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
a要素でには、href属性やname属性をもちますから、a:linkとは、<a href="">の意味ですね。 わたざわたざclassなどで悩む必要はありません。HTMLが文書構造にしたがって正しくマークアップされていれば・・・ [例] <body> <div class="header"> <h1>見出し</h1> <p>なんたらかんたら<a href="">リンク</a>へ<p><!-- (1) --> <div class="nav"> <ol> <li><a href=""></a></li><!-- (2) --> <li><a href=""></a></li><!-- (3) --> <li><a href=""></a></li><!-- (4) --> </ol> </div> </div> <div class="section"> <h2>見出し</h2> <p>なんたらかんたら<a href="">リンク</a>へ<p><!-- (5) --> <div class="aside"> <h3>コラム記事</h3> <p>なんたらかんたら<a href="" style="color:silver;">リンク</a>へ<p><!-- (6) --> ・・・・・ だとしたら、 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を使わなくても、特定の部分の要素のスタイルホ変更できます。 カスケーディングは、スタイルの出所、継承、詳細度などをひっくるめて利用します。
お礼
この前も詳しくお世話になりました。 これは前の方の説明を更に詳しくしたものですね。 今なら理解できるけどa+a+aって？？？ 何か凄く深淵な世界を見せられている気がします。 詳細度とか見たことすらないですけど、 階層構造の深さだなとは何となく分かります。
- gungnir7
- ベストアンサー率43% (1124/2579)
こちらから応用ができるでしょう。 http://www.scollabo.com/banban/apply/ap5.html タグに直接当てれば良いのだそうです。 タグごとにという話であれば、ol headerとかを作って ol header li a:{linl:red}とかでやれば良いでしょう。 これでvisitedとかもいけると思いますが未検証なので悪しからず。
お礼
これは全く気付きませんでしたｏｒｚ＿ その通りリストです。 上段と下段で違う色にしたかったので。 とても自分の力だけでは無理ですね。 取り敢えずうまく動いたみたいです。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
＞.site { a:link { red } } 入れ子はできないけど、できたとしてもする必要なんてない。 .site { color: #000000; } これで<a class="site">が黒になる。 というかlinkなんてわざわざ明示することないと思う。 だからこんな基本中の基本のところなのに要らん混乱してしまったんじゃないでしょうか。
お礼
ご回答どうもです。
関連するQ&A
- サイト内リンクと違うページへのリンクについて
(1)nameタグで、同じページ内のリンクをしたいのですが、 移動はできるので、htmlは合っているようですが、 <a>の設定をしたほうに、 ハイパーリンクのようになってしまいます。 CSSの設定で、一般の<a>がそのような設定になってはいますが、 文字リンクとアンダーラインがつかないようにするには、どのように設定をしたらいいのでしょうか？ (2)a.htmlというページから、b.htmlのnameタグへいくこともできますか？ もしできる場合は、設定も教えていただけるとありがたいです。 理解不足なので、説明がわかりずらいかもしれませんが、 よろしくお願いします
- ベストアンサー
- その他（インターネット・Webサービス）
- リンクカラーが変わりません。
外部CSSでリンクカラー設定したいのですがうまくできません。 最初からvisited設定カラーとなり、visitedはactive設定カラーで表示されてしまいます。（link設定カラーが適用されません。） 前回同じような質問をさせていただき、解決したと思ったのですが、作り直しているうちにまた解らなくなってしまいました。ページ自体は問題なくジャンプするのですが、どこが間違っているのでしょうか？ よろしくご指導お願い致します。 [site] ├[contents] │ └ [index] │ └ index.html │ └[styles-site.css] └ navi.css index.html <html> <head> <link href="../../styles-site.css/navi.css" rel="stylesheet" type="text/css"> </head> <body> <div class="navi"> <div><a href="index.html">top</a></div> </div> </body> </html> .navi.css <style type="text/css"> <!-- .navi div { float:left; width:45px; text-align:center; } a:link { color:#ff9933 } a:visited { color:#cccccc } a:active { color:#0000f5 } a:hover { color:#009700 } -->
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートで一部分だけ リンクの色を変えたい
CSSでリンクの色をかえるのにa:link{} a:visited{} などを使っています。別の場所にCSSファイルを作って使っています。 ページに多数存在するリンクのうち、一部分だけ色を変えたいときはどうすればいいでしょうか？ <divc class=""></div>などでは無理ですよね body内に直接記述するしかないのでしょうか？
- ベストアンサー
- HTML
- Dreamweaver リンクの色
こちらでいろいろ検索してみたのですが、 よくわからなかったので質問させてください。 Deamweaver8を使っています。 index.htmlのページの#address部分だけリンクの色を変えたいです。 ページプロパティのリンクでページ全体のリンクの色を設定してあります。 既に質問されてた方の回答を見させていただいたのですが、外部CSSなどと書いてありました。外部CSSのやりかたがわかりません。 簡単にできる方法などありましたら教えてください。 お願い致します。
- ベストアンサー
- ホームページ作成ソフト
- CSSの添削をお願いします。リンク色が反映しません
閲覧ありがとうございます。下記CSSの 「.CLASS li a:link,a:visited{ color:red; text-decoration:none;」 の部分が反映されず、ブラウザの標準設定のままになってしまいます。 本来のstyleの全文はbodyや他のクラスの記述もしているのですが、それらが影響しているわけではないことを確認してあります。 <style> .CLASS ul{ padding:0; } .CLASS li{ border-top: solid pink 1px; list-style-type: none; } .CLASS li a:link,a:visited{ color:red; text-decoration:none; background-color:lightgray; display: block; } .CLASS li a:hover { background-color:gray; } </style> <div class="CLASS"> <ul> <li> <a href=""> 反映されてない…リンク文字色red、デコレーションnone</a> </li> <li> <a href="">反映されてる…リンク背景色lightgray、ホバー背景色gray</a> </li> </ul> </div> 宜しくお願いします
- 締切済み
- CSS
- 開いているページのリンクの色の指定
HPの初心者です。 <body link="blue" alink="red" vlink="blue">としていますが、 リンク先ページが開いている間、そのページのリンクの色を"red" のままにしておきたいのですが、どのようにするのでしょうか？ お分かりの方、教えて下さい。
- 締切済み
- HTML
- htmlから別ページのswfのタイムラインへリンク
htmlから同サイト内の別ページにはられたswfのタイムラインへリンクしたいのですが、 何か方法はあるのでしょうか。 例えば main.html内のテキストリンクから、 同サイト内の別ページa.htmlファイル内に張られた a.swfファイルの指定タイムラインへリンクする方法 宜しくお願いします。
- 締切済み
- HTML
- Dreamweaverで2種類のlink設定（色など）をする方法を教えて下さい
Dreamweaver MX 2004を使ってますが、 例えば、同じページで、a:link a:visited a:hoverなどをCSSで設定する場合、 その色・設定項目は、一種類しか設定できません。 この、a:link a:visited a:hoverなどを、もう一種類（例えば別の色とか） 違う設定をする方法が分かりません。 とても簡単な様で、なぜか昔から分かりません。（汗） CSSを使っても使わなくても良いのですが、 どなたか、a:link a:visited a:hoverを複数設定をする方法などあれば、 お教えくださいませ。よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- リンク色の取得方法
ページ全体のリンク色を取得するためには、documentオブジェクトの、linkColor,linkColor,vlinkColorプロパティを参照すれば良いですが、cssを使って部分的にリンク色が設定されている場合の取得方法がわかりません。 このように部分的に適用されているオブジェクトのリンク色（a:link、a:visited、a:hover、a:active）を取得する方法を教えていただきたいと思います。
- ベストアンサー
- JavaScript
- CSSでのリンク色の変更で
HPのリンク色(a:link)の色をa:link{color:#ffffff;}(色は例です)で変えたんですが、 何故か色が反映されず、デフォルトの青色で表示されてしまいます。 ・hover、active、visitedも同じように変更しているが、そっちは反映されている ・リンクの色を変えようとするページにcss(仮にAとB)ファイルを２つ使っている ・Aではリンクに関する設定は記述してない。またAを省いても変わらない ・Bのリンク以外の指定を消しても同じ ・そもそも青色で設定している文字がない ・HTML文にも色変えの記述はない ・ブラウザ指定もしていない 何度自分で見直しても全く分からないのでお願いします
- ベストアンサー
- HTML
お礼
再度のご回答どうもです。 言いたいことはよく分かりますよ。 でも普通の人にとってはやっぱり難しいです。 ホームページソフトのメーカーが簡単にできるというから 足を突っ込んで中途半端になっちゃう人が多いです。 自分もみごとにその中の一人ですから。 本当は１から習う順番があるんでしょうが そんな事したら売れなくなるからじゃないでしょうか。
補足
返信の内容は批判ではなく率直な感想です。 なので気に障ったらごめんなさい。 やっぱり普通の人にとって簡略化できるより、 汚くても出来るor出来ないかの方が重要です。 このテーマは私も疑問に思っていることなので また別の機会に質問してみたいと思います。