- ベストアンサー
「目次」と「サブ目次」のスタイルを分けたいのですが…
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
CSSのセレクタはクラスだけにして、リンク元の文字列にそれぞれ適用されれば良いのですよね？ 以下は <a> ～ </a> タグの間に <span> タグにCSSのクラス属性を付加して記述した例です。 リンクに文字色を適用しただけでは、リンク済みの下線には色を適用できないので、CSS定義にも text-decoration: underline を付加しています。 <html> <head> <title></title> <style type="text/css"> <!-- .mokuji { color: #000000; text-decoration: underline } .submokuji { color: #00ff00; text-decoration: underline } --> </style> </head> <body> <a href="page1.htm"><span class="mokuji">目次</span></a> <a href="page2.htm"><span class="submokuji">サブ目次</span></a> </body> </html>
関連するQ&A
- スタイルシートでサイト作り
現在サイトをスタイルシートを使って作ってます。 まだまだ本＆辞書片手に勉強中の初心者です。 幅４５０px高さ１００％中央配置のテーブル内に ヘッダー部分に４５０px × １３０pxの画像 その左下にメニューバー 右にコンテンツ を作りたいと思います。 メニューバーは 幅１２８ｐｘ 高さ１００％です。 本を見ながらアレンジして作りました。次の通りです。 /* === サイドバー部分のスタイル === */ .side {width:128px; vertical-align:top; padding:0px; background-color:#999999} .side div {font-size:12px; font-weight:bold; letter-spacing:3px; border-bottom:solid 1px white} .side a {color:#333333; text-decoration:none; display:block; padding-top:5px; padding-bottom:5px; padding-left:13px} .side a:hover {color:ffffff; background-color:#666666} <!--=== サイドバー部分のソース ===--> <td class="side" rowspan="5" valign="top"> <div><a href="link.htm">about</a></div> <div><a href="link.htm">contents</a></div> <div><a href="link.htm">blog</a></div> <div><a href="link.htm">bbs</a></div> <div><a href="link.htm">link</a></div> </td> リンクにふれると色が変わるのが気に入ってます。 この「link」の下にコメントとリンクを入れたいんですが 「拍手」ボタン <form>・・・</form> 「返事はこちら」 というコメント（「こちら」部分がリンク） をセルで囲って、画面下までのばしたいです。 いろいろ試したんですが、新しく作ったセルが横に並んだり <side>の a の影響を受けてしまったりして思ったように出来ません。 どうぞ御指南お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- スタイルシートの反映のされ方がIEとFirefoxで異なるのは何故？
■スタイルシート側 #style_a{ color:#000000; } .style_b {} .style_b a:link{ color:#ff0000; } ■HTML側 <div id="style_a"> <div class="style_b"> <a href="***.html">リンク</a> </div> </div> ↑…というようなソースを書いたところ、 Firefox(ver.2.0)では文字色が赤に、 InternetExproler(ver7.0)では黒になってしまいました。 その後、スタイルシートの優先順位は 記述による獲得ポイントによって決まるということを知り、 スタイルシートを以下のように修正することで 両ブラウザとも文字色が赤くなるように解決したのですが、 ■スタイルシート側 #style_a{ color:#000000; } #style_a .style_b {} #style_a .style_b a:link{ color:#ff0000; } このポイント制ってブラウザ毎に 微妙に異なるものなのでしょうか？ もしそのあたりを解説してくれている ホームページや書籍などがありましたら 教えていただけませんでしょうか？ よろしくお願いいたします。 ・参考としたページ http://www.stylish-style.com/csstec/base/order.html
- 締切済み
- HTML
- スタイルシートでレイアウトしたいのですが出来ません。
<a href="○○.html" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'"> ○○タイトル○○</div></a> <span id="txt1" style="display:none;position:absolute; border:3px solid #ff0000;color:#FF0099;background-color:#FFFFCC;"> ○○説明文○○</span> 上のような<txt>タグが全部で２０個以上あるので （つまりtxt1～txt20まであります） CSSでレイアウトしたいのですがうまくいきません。 上のタグをCSSでどのように定義づけたら <div class>で作れるようになるか教えてください。
- 締切済み
- ブログ
- ツリー型の目次作成
ツリー型の目次を作成しているのですが、IEでは動作するのですが、ネスケではエラーになってしまいます。 うまく動作させる方法はないでしょうか？ 下記がソースです。 <html> <head> <title>目次</title> <style type="text/css"> div.h_ {margin-left:0px;margin-top:6px;} div.h {margin-left:28px;margin-top:6px;} div.sy_ {margin-left:28px;margin-top:6px;} div.sy {margin-left:56px;margin-top:6px;} div.st_ {margin-left:56px;margin-top:6px;} div.st {margin-left:84px;margin-top:6px;} div.k_ {margin-left:84px;margin-top:6px;} div.k {margin-left:112px;margin-top:6px;} } </style> <script language="JavaScript"> <!--// function displayMokuji(obj, img) { alert("displayMokuji"); if (!obj || !img) alert("bbb"); return; } if (obj.style.display == "none") { obj.style.display =""; img.src ="./open.gif"; } else { obj.style.display ="none"; img.src = "./close.gif"; } return; } //--> </script> </head> <body text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff"> <div class="h_"> <a onclick="javascript:displayMokuji(hi0100000000, ii01000000);" href="#"> <img id="ii01000000" src="./close.gif" border="0"></a> <b>第１編 </b> </div> <div id="bbb" style="display:none"> <div class="sy"> <b>第１章</b> </div> <div class="sy"> <b>第２章</b> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- Firefox のバグ？ネスト時のレンダリングについて。
Firefox のバグかと思い調べたのですが、調べ方が悪いのか解決策を見出すことができませんでした。 問題ですが、まず以下のHTMLソースをコーディングしました。これを iframe.html として、別のファイルから参照させます。 ■iframe.html の中身 <style type="text/css"> .Link{font-size:10px;color:blue;cursor:hand;} .Title{font-size:14px;color:#000;} .Text{font-size:12px;color:#000;} </style> <table> <tr> <td> <a href="Link1" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> <td> <a href="Link2" class="Link"> <div class="Title">text</div> <div class="Text">text</div> </a> </td> </tr> </table> ■別ファイルの中身 <body> <iframe src="iframe.html"></iframe> </body> なぜこういう構造になっているかというと、まず a タグの アンカー機能を子要素に継承させ、その中の a タグにネストされるどの部分をクリックしてもリンク先を同じにしたいからです。 IE,Opera等では問題ないのですが、Windows版 Firefox2 で確認し、何度もリロードしているとたまに、 .Title と .Text が効いてないような表示になります。それも必ず後に記述されている td 側の中身が。 はてな、と思いFirebugでみてみると、以下のようにレンダリングされていました。 <a href="Link2" class="Link"> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </a> この原因がわかりません。 以下のような構造にして、 <div> <div class="Title"><a href="Link2" class="Link">text</a></div> <div class="Text"><a href="Link2" class="Link">text</a></div> </div> CSSを編集すれば解決することなのですが、 Link2 のURLは非常に長く何回もアンカータグを記述するのは避ける必要がありました。 どうかよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- 外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか
外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか？ 以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、 「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。 「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。 【例 ： 外部スタイルシート】 .main { color : red; text-align : center; } .main.sub1 { ←実際はこのような指定ではできない text-align : left; } .main.sub2 { ←実際はこのような指定ではできない color : blue; } 【例 ： htmlファイル】 <div class="sub1">あいうえお</div> ←左寄せ＆赤字にしたい <div class="sub2">あいうえお</div> ←センタリング＆青字にしたい
- ベストアンサー
- HTML
- リンクの色について
スタイルシート部分を .navi1 a:link, .navi1 a:visited{ display:block; background-image:url(images/1.gif); text-decoration:none; line-height:30px; font-size:12px; text-align:left; height: 30px; padding-left:11px; font-weight: bold; color: #00FF00; } .navi1 a:hover, {text-decoration:none; color:#FFFF00;} .top a:link, .rank a:visited{ color:#379E02; } .top a:hover{ color: #FF0066;} HTML部分を <div class="navi1"><a href="#">テキスト１</a></div> <div class="top"><a href="#">テキスト２</a></div> とした時に、IEでは思ったように表示されるのですが FirefoxやChromeではテキスト１は#00FF00のままマウスを乗せても色が変わらず テキスト２は色が紫になっています。 これをIEと同じ様に表示させるにはどうすればいいのでしょうか？
- ベストアンサー
- HTML
- 状況（変数）によってclassを変えるには
<style type=text/css><!-- .sub1 a:hover{color: red;} .sub2 a:hover{color: blue;} --> ・・・（省略)・・・ <style type="javascript"> var status = "sub1"; </style> ・・・（省略)・・・ <div id="location1" class="sub1"> <a href="#">この色を変更</a> </div> --------------------------- statusの状況によってid="location1"のclassを変えたいと思っています。 statusの状況が"sub2"だったらclassをsub2に、"sub1"だったらclassをsub1に変更したいのです。 こんな事ってできるのでしょうか？ご存知の方、ご教授ください。
- ベストアンサー
- JavaScript
- カーソルを当てると真下に説明文が来て困ってます。
<div class="sub3"><img src="○○.gif"> <a href="http:○○.html" onmouseover="txt4.style.display='block'" onmouseout="txt4.style.display='none'"> ○タイトル○</div></a> <span id="txt4" style="display:none;position:absolute; border:3px solid #ff0000;color:#FF0099;background-color:#FFFFCC;"> ○説明文○ </span> と記入したのですがカーソルを当てると説明文が 真下に来てしまいます。 右横に来るようにするにはどうしたら良いでしょうか？ なお<div class="sub3">というのは .sub3 { width: 180px; height: 8px; padding: 2px 7px 0px 0px; font-weight: bold; color: #ff69b4; font-size:11px; } という定義です。 どうしたら真下でなく横に説明文の枠が来るようにできますか？
- 締切済み
- ブログ
- 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
お礼
ありがとう御座います。 ご指摘の方法で、出来ました！ text-decoration: underline も参考になりました。 また、機会ありましたら、よろしくお願い致します。