• ベストアンサー
  • 困ってます

CSS:スタイルシートでテキストリンク

教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数124
  • ありがとう数2

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

  • ベストアンサー
  • 回答No.2
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)

>「menu」を選ぶと「text」が機能しなくなってしまいます なるほど、問題が理解できました。 title="menu" を同じに(あるいは、titleを設定しない)すれば、両方適用されます。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます!!!FirefoxでもNSでも問題なく作動しました!!勉強になりました!!!!!

関連するQ&A

  • スタイルシートで。。

    こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか? ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか? 教えてください、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssの外部ファイルでのリンクの装飾

    学校の課題で今HPを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもHEAD内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか? つまり↑の内容(リンクの装飾)を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

    • ベストアンサー
    • HTML
  • リンクのスタイルシートについての質問

    スタイルシートを作成しています。 リンクにアクションをつけたのですが 思うような動作にならずに、悩んでします。 ちなみに動作確認はIE6で行っています。 ◆現在の動き リンクにマウスをのせると箱が上下に動いてしまう。 ◆どうしたいか リンクにマウスののせても箱が上下に動かないようにしたい。 固定したいとうことです。 以下に作成したソースをのせておきますので わかる方いましたら教えていただけると幸いです。 a.menu01{ text-decoration:none; text-align: center; border:#FFF solid 1px; background-color:#DACD96; width:280px; font-size:15px; font-weight:bold; color:#FFF; padding:5px; display:block; letter-spacing: 5px; margin-bottom:10px; } a.menu01:active { margin-bottom:10px; } a.menu01:visited{ margin-bottom:10px; text-decoration:none; } a.menu01:hover { text-decoration:none; color:#AA8B62; background-color:#FFFFFF; margin-bottom:10px; }

その他の回答 (1)

  • 回答No.1
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)

IE6とFirefox1.5で特に問題ありませんでした。 CSSの記述にゴミが紛れているのではないでしょうか? Firefoxの場合ツール~Javascriptコンソールを表示するとエラーになっているスタイル指定も表示されますので、試してみてはいかがでしょうか

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございます。再度、Firefoxで見てみましたところ、ブラウザの「表示」→「スタイルシート」の中に上記で設定した「menu」というのを選ぶところがありました。それをクリックすると、問題なく機能しました。ところが、全体のテキストは「text」という別の外部ファイルで設定しているので、「menu」を選ぶと「text」が機能しなくなってしまいます。。。いくつもある場合は、全てを読み込むことは無理なんでしょうか?1つのファイルに格納する以外にもし方法をご存知でしたら、是非教えてください。よろしくお願いいたします。m(_ _)m

関連するQ&A

  • スタイルシートのアンカー部分

    スタイルシートを利用してのアンカー部分の指定についてです。 a:link {color: yellow; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:active {color: yellow; text-decoration: none; } a:hover {color: red; font-weight: bold; text-decoration: underline; } 現在、このように記述しています。 今までは、ページ毎に<STYLE TYPE="text/css">タグを使用し、本文中に記述していたのですが、その代わりとして新たに外部読み込みのcssファイルを使用してみました。 ところが、未訪問リンクだけが反映されないのです。 青文字で、下線付きで表示されてしまいます。 未訪問以外は、bodyなども含め、きちんと反映されています。 色々試行錯誤してみましたが、全然駄目だったので、 再び本文内に書き込む形を取りました。 IE5.5で動作確認しています。 この理由及び対策を御存知の方、教えていただけませんでしょうか?

    • ベストアンサー
    • HTML
  • 外部CSSでリンクカラー指定

    外部CSSでwebサイトを作っています。 リンクカラーの指定をbody全体にしているのですが、 フッターだけ色を変えることはできますか? その際フォントカラーも変えられればと思っています。 現在のCSSは a{/*リンクされた文字*/ color:#002AD1; font-style:normal; text-decoration:underline; } a:link {/*未訪問のリンク*/ color:0000ff; font-style:normal; text-decoration:underline; } a:visited {/*訪問後のリンク*/ color:#002AD1; text-decoration:underline; } a:hover {/*マウスをのせたとき*/ color:#335BFF; font-style:normal; text-decoration:underline; } a:active {/*クリック中*/ text-decoration:none; } 現在サイト全体のフォントカラーはグレーで、 リンクは上記の通り青系です。 footerは白から濃い紺の帯にするので、 文言やリンクが見えなくなってしまうのです。 フッターのCSSに個別にカラー指定しても変わりません。 .footer { border : none; width : 838px; heigth : 100%; text-align: left; padding : 0px 0px 0px 20px; color: #ffffff; ←このようにフォントを白にしても変化がないです line-height: 160%; font-size: 11px; } 何が原因でしょうか? またそのようにする方法があれば教えてください。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • a:hoverの下線指定が反映されない

    htmファイルのheadタグ内に以下のようなCSSの記述をしていますが、なぜかa:hoverのunderlineの部分だけが反映されません。はじめは一部のリンク箇所だけが反映されなかったのですが、訪問済みになった箇所がどんどん反映されなくなってしまい、しまいにはすべての箇所が反映されなくなりました。ただし、それはunderlineのみでfont colorやboldはしっかり反映されているのです。 これはなぜでしょうか? ちなみにscriptの記述は一切していません。 最初は同様の記述を外部ファイルにしていたのですが うまく読み込めていないのかと思って、htmファイル内に 記述しましたがダメだったというわけです。 <style type="text/css"> <!-- body { font-size: 10.5pt; line-height: 130%} table { font-size: 10.5pt; line-height: 130%} a:hover{ text-decoration: underline; color: #FF0080; font-weight: bold} a:active { text-decoration: none} a:link { text-decoration: none} a:visited { text-decoration: none} --> アドバイスお願いいたします。

    • ベストアンサー
    • HTML
  • スタイルシートでオンマウスで下線を表示させないには

    以下のような外部スタイルシートを作ったのですがうまくいきません。 p.menu a{ font-size: 12px; } p.menu a:link{ text-decoration:none } p.menu a:visited{ text-decoration:none; } p.menu a:hover{ text-decoration:none; } p.menu a:active{ text-decoration:none; } noline a{ text-decoration:none; } 以下はHTMLの抜粋です。 <noline> <TR> <TD>●<a href="http://www.hogehoge.net/" style="text-decoration:none" target="_blank"><font color="black" onMouseover="this.color='#ff8800'" onMouseout="this.color='black'">ああああ</font></a></TD> </TR> </noline> 結局外部スタイルシートを使わずにWEBPAGEを作成しましたがとても手間がかかりました。今後のために原因を知っておきたいので宜しくお願いします。

    • ベストアンサー
    • CSS
  • 外部CSSの記述方法

    色々調べたのですが行き詰まってしまったので質問させて下さい。 HPのそれぞれのページの文字色や背景が違う為BODYをクラス分けしてCSSに記述しています。 ページによって違うリンク色等はそれぞれのページの<HEAD>内で指定していますが 外部CSSから指定する場合クラスを定義すれば出来ますが下記のBODYの中には どのように記述すれば良いか解かる方がいらっしゃいましたらご回答宜しくお願い致します。 (説明ベタですみません。要は外部CSSのそれぞれのBODYのクラス内に リンク色等の記述をしたいのです。(;^_^A ) 外部CSS BODY.top{ color:#2E8B57;background-color:#FFEAFA; } BODY.menu{ color:purple;background-color:#FFFFFF; } top.htmlの<HEAD>内の下記を外部CSSのBODY.topの中に入れたい A:visited { text-decoration:none;color:#CD1076;} A:active { text-decoration:none;color:blue;} menu.htmlの<HEAD>内の下記を外部CSSのBODY.menuの中に入れたい A:visited { text-decoration:none;color:purple;} A:active { text-decoration:none;color:#E1ACDA;}

    • ベストアンサー
    • CSS
  • cssでの擬似リンク(a:hover)の複数指定

    cssでidに囲まれた範囲で複数リンクカラーを指定したいのですが、擬似リンク(a:hover)はうまく表現出来るのですが、その他のリンクの色の指定がうkまく行きません。 FireFoxでは、きちんとスタイルが適用されるのですが、Ie6やNetScape7だと、a, a:link, a:visitedの文字色のスタイルが効かなくなります。どうしたらうまくできるのか教えてください。 ■css /* menu-1 */ #menu-1 { width: 200px; height: auto; margin: 0; padding:0; } #menu-1 ul.support, #menu-1 li.support { margin: 0; padding: 0; list-style: none; } #menu-1 li.support { width: auto; height: auto; padding: 5px 10px; } #menu-1 a, #menu-1 a:link, #menu-1 a:visited { padding: 0.2em 10px; height:1.4me; color: #ff0000; text-decoration: none; } #menu-1 a:hover { color: #9f0f0f; text-decoration: underline; } /* menu-2 */ #menu-2 { width: 200px; height: auto; } #menu-2 ul, #menu li.list1, #menu li.list2 { margin: 0; padding: 0; list-style: none; } #menu-2 ul li.list1, #menu-2 ul li.list2 { width: auto; height: auto; } #menu-2 ul li.list1 { font-weight: bold; } #menu-2 .list1 a, #menu-2 .list1 a:link, #menu .list1-s a:visited { text-decoration: none; color: #0e2159; } #menu-2 .list1 a:hover { color: #9f0f0f; text-decoration: underline; } #menu-2 li.list2 a, #menu-2 li.list2 a:link, #menu li.list2-s a:visited { text-decoration: none; color: #000000; } #menu-2 li.list2 a:hover { color: #9f0f0f; text-decoration: underline; } ■html <div id="menu-1"> <a href="#"> <ul> <li class="support">テスト</il> </ul> </a></div> <div id="menu-2"> <a href="#"> <ul> <li class="list1">スタイル1</il> <li class="list2">スタイル2</il> </ul> </a></div>

    • ベストアンサー
    • HTML
  • 外部CSSの読み込みがうまくできない

    <head>~ <link href="basic.css" rel="stylesheet" type="text/css"> ~</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか? それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSについて

    カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか? リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>

    • ベストアンサー
    • HTML
  • シーサーブログのサイドバーにあるリンクについて

    うまく言葉にできないせいか、 ネットで調べても見つからないので質問させていただきます。 サイドバーの最新記事やカテゴリ、リンクや過去ログなど、 リンクすべてに、リストマークをつけたいんです。 見づらいので、箇条書きの部分にマークをつけて表示させたいのです。 どうしたらいいんでしょうか? スタイルシートと、コンテンツのHTMLを、カスタムするのだろう、 とは思っていますが、どのような表記をすればいいですか? 以下は、現在のスタイルシートの、サイドバーの部分です。 ↓ -------------------------------------------------------- サイドバーボディ -------------------------------------------------------- .sidetitle { font-size: 95%;color: #ffffff; font-weight: bold; text-align: left; line-height : 1.6; } .side { background: #ffffff url(); font-size: 80%; text-align: left; position: relative; line-height : 1.5; margin-bottom: 15px; } .side a { text-decoration:none; } .side a:hover { color:blue; text-decoration:underline; } .side-tag { font-size: 80%; } .side-tag a{ color: #777777; text-decoration:none; } .side-tag a:hover { color:#CC0000; text-decoration:underline; } .side ul { margin: 0; padding: 0; } .side li { list-style-type: none; } .side li a { text-decoration: none; } .side li a:hover { color:#CC0000; text-decoration:underline; } 以上。 よろしくお願いします。