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

外部のスタイルシートが働かない

HTML文書に外部からのスタイルシートを持って来て使いたいのですが、全く働きません。 スタイルシートは次のようなもので、"mystyle.css" としてHTMLと同じフォルダーに入れてあります。 <style> body{ background-color:gray; color:black; } .title{ font-size:14pt; color:blue; } a{ color:yellow; } .prompt{ color:pink; } </style> そしてHTML内では <link rel="stylesheet" href="mystyle.css">  としてリンクさせています。 <body> も <a>も class="title" としてクラス名を付けたものも、全く影響されていません。 何処がおかしいのか、詳しい方、ぜひ教えてください。お願いします。 ちなみに、このスタイル部分をHTMLの<head>内に貼り付けると期待通りになります。

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

  • 回答数4
  • 閲覧数33
  • ありがとう数4

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

  • ベストアンサー
  • 回答No.4
  • fji-jp
  • ベストアンサー率75% (3/4)

"mystyle.css"内に"<style>"と"</style>"タグを記載していませんか? 記載があるとエラーとなり、エラー発生行の次のスタイル指定もエラー扱いとなります。 (ご提示のスタイルシートでは"<style>"行からbodyの"}"までと、"</style>"行がエラーとなります)

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

質問者からのお礼

ご回答有難うございます。 たしかにCSSファイルぜんたいを<STYLE>タグでくくってありました。これを取り除いて上手く行きました。 感謝です。

関連するQ&A

  • CGIの外部スタイルシート

    お世話になっております。 CGIをIFRAMEの中にいれたところ、外部スタイルシートが反映されなくなってしまいました。 色々と書き換えて試してみましたが、反応がありません。 どのような記述を入れれば、反応するようになるのでしょうか。 index(ここにIFRAMEがあります。)  | cgi-binの中にcgiとフォルダー(style.cssが入ってます。) CGIのスタイルシートの指定は下記のようになってます。 print "<title>$title</title><link rel=\"stylesheet\" type=\"text/css\" href=\"$base/style.css\"></head>\n"; スタイルシートは a { text-decoration:none; } a:hover {color:#ff0000} body,table { font-size: 10pt; } 漠然とした質問の方法ですみません。 宜しくお願いします。

    • 締切済み
    • CGI
  • 外部スタイルシートでのスクロールバー

    Dreamweaver MX 2004でサイトを作成しています。 外部スタイルシートでスクロールバーの色を変更したいのですが 適用されなく困っています。 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="pro1"> -------------------------------------------------- 外部スタイルシート(style.css) body { scrollbar-base-color:#efefbd; scrollbar-arrow-color:#efefbd; scrollbar-darkshadow-color:#efefbd; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; } ------------------------------------------------- わかる方がいらっしゃいましたら、お願いいたします。

  • 外部スタイルシートが読み込めない

    こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。

    • ベストアンサー
    • HTML

その他の回答 (3)

  • 回答No.3
  • hok212
  • ベストアンサー率66% (100/150)

スーパーリロードでもダメでしたか。 では、mystyle.cssをブラウザで直接表示して、最初のご質問で指定したスタイルが記述されていることを確認してください。 ※記述されていなければリロードして再確認。 正しく記述されているのであれば、複数の外部スタイルシートが呼び込まれていることも考えられますので、!important 指定(優先指定)を追加してみてください。 書式は次のように、値の後に半角スペースを挟み!importantセミコロンです。 body{ background-color:gray !important; color:black !important; }

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

質問者からのお礼

回答有難うございます。 !important; を入れても上手く行きませんでしたが、回答者さん4の方のアドバイスで<style>タグを取り除いて上手く表示されました。

  • 回答No.2
  • t_ohta
  • ベストアンサー率38% (3844/10012)

htmlファイルとcssファイルは同じディレクトリに置いてありますか?

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

質問者からのお礼

ご回答有難うございます。 HTMLファイルもCSSファイルも同じフォルダーに置いてあります。

  • 回答No.1
  • hok212
  • ベストアンサー率66% (100/150)

mystyle.cssのキャッシュを読み込んでいるのではないでしょうか。 その場合、スーパーリロード(Windowsであれば キーボードのSHIFTキーを押したまま再読み込み)してやればOKです。 スーパーリロードは、ページに埋め込まれているすべての要素のキャッシュを無視して再読み込みする手法です。 それでもダメであれば、キーボードのF12で開発ツールウィンドウを表示させ、対象の要素にどのようなスタイルが適用されているか調査する方法があります。

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

質問者からのお礼

早速ご回答を頂き、有難うございます。 すぐにやってみます。

質問者からの補足

教えて頂いたスーパーリロードを実行しました。 しかしクラス定義した要素のフォントサイズと色はCSSファイルの通りになりましたが、フレームのバックグラウンド色は変化しませんでした。 セレクターの書き方がおかしいのでしょうか?

関連するQ&A

  • CSSで、外部スタイルシートを2つ指定した場合。

    たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように2つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。

    • ベストアンサー
    • HTML
  • スタイルシートに関して教えてください!本当に困っています!

    超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は3つあると思うのですが、CSSファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 3、CSSファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 { ~ }”として記述し、 ファイル保存するときに、拡張子が”.css”というCSSファイルを作ります。 そして、HTMLファイル内にはCSSファイルを参照しなさいという指示である、<LINK href="CSSファイル名.css" type="text/css" rel=stylesheet> をヘッダー部分に記述します。 << CSSファイルデータ例(下記のデータだけを記述して.cssファイルを作成 >> < ファイル名=style.css > p { color:blue } << HTMLデータ例(.cssファイルと同じフォルダ内に作成する) >> <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> << ブラウザ表示 >> スタイルシート 分かりずらかったらここを参照してください。(たぶん削除されると思うが) http://homepage-how.com/hp/hp-css2.html まず、3に書いてあるとおりにCSSファイルを作成しました。 次からがよく分からないのです。3に書いてあるとおりにHTMLファイルを作成しようと思ったのですが、なぜか、ホームページの基本構造ではないのです。 こういう事です   ↓ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか? あと、このHTMLデータを.CSSファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか?お願いします。

  • CSSの外部ファイル使用に関して。

    ビスタorEMエディターを使用しています。 ~~index html~~ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>cssの勉強</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>見出し</h1> </body> </html> ~~mystyle.css~~ h1 { color: blue; } このようにテキストエディタも2つに分けて編集しデスクトップへ 保存してブラウザ上へ出力させたのですが文字の色が表示できません。 表示できないというよりもblueで組んだ際にはblueとなりblueをredにした際には 黒になったり、デスクトップ画面上で新規にフォルダをつくそこにhtmlファイルを 入れてその後ブラウザ表示をすると文字がきちんと赤になっていたり 意味がわからず、ずっと悩んでいます。 分かりにくい質問ですいませんどうすればそうならないのか教えていただければ幸いです。 また、毎回アイコンをグーグルクロームのブラウザへドロップして検証するのが めんどうになってきたので、そうせずにブラウザへ直で表示できる方法も教えていただけると嬉しいです。

  • スタイルシート2

    1.スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか? <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ!! といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような(くどい^^)気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ 2.さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル(省略できない)。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか^^ リンクできるのは、見やすく便利ですが・・・

  • スタイルシートの使い方

    職場のイントラネット内のページ全部を明朝体印刷に統一したいのですがスタイルシートで可能でしょうか。 全パソコンIE.5.0使用。 下記のように外部ファイルを使用して、 <link rel="stylesheet" href="style.css" src="style.css" type="text/css"> 下記で明朝を指定しているつもりなのですがうまくいかないようです。 BODY{background:white; margin-left:3mm; margin-right:3mm; margin-top:3mm; font-size:30pt; font-family:MS明朝体; line-height:120%; text-decoration:none; color:black;}

  • 外部cssがうまくできません。

    外部cssがうまくできません。 よろしくお願いいたします。 ホームページ作成初心者です。 Mac OS X Snow Leopardです。 デスクトップに Homepageというフォルダを作成しました。 そのHomepageフォルダの中に、 index.htmというファイル -----------以下内容------- <html> <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> 背景を青くしたい </Body> </html> ----------------------------------- とstyle.cssというファイル ---------以下内容----------- body {background-color: blue} ----------------------------- を テキストエディットで作成しました。 背景を青くしたいのですが、なりません FirefoxでもSafariでもなりません。 何が間違っているのでしょうか? 教えていただきたいです。 よろしくお願いいたします。

    • ベストアンサー
    • Mac
  • スタイルシート(CSS)の外部リンク方式を使用したテキストリンクの色変更

    お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート(CSS)を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 (外部リンク式html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ~抜粋~ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> (外部リンク式スタイルシート) a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} (埋め込み式html) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ~抜粋~ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。

  • IEで外部スタイルシートが反映されない

    IEで外部スタイルシートが反映されない HPを製作したところ、 Firefoxでは、完璧に外部スタイルシートが適用されていたのですが、 IEでテストしたところ、CSSが全く反映されていてませんでした。 多くの皆さんがしてるように、 ヘッダーに、 <link href="style.css" rel="stylesheet" type="text/css" /> と記述しているのですが・・・ 原因としては何が考えるでしょうか? ご助力願います。

  • スタイルシートが反映されない。

    htmlに <link rel="stylesheet"type"text/css" href="style.css" media"all"> と記入 style.cssに <style type="text/css"> <!-- body{ text-align:center; padding-top:20px; h1{ text-align:center; font-size:1.5em; color:♯800000; backgraund-color:♯FFFFFF; padding-top:20px; padding-bottom:20px; } --> </style> と記入 bodyは反映されるのにh1が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか?。 よろしくお願いします。

  • 外部スタイルシートは分ける?

    外部スタイルシートを分けるのかそれともまとめるのか? もしくは分けるべきなのかまとめるべきなのかがわかりません。 index を含む全ページに共通の class 指定があれば、1つの外部でいいですが、 各ページ固有の class 指定があった場合これは分けたほうがいいでしょうか? つまり、 <link href="main.css" rel="stylesheet" type="text/css"> と全ページに置き、全ての指定をここに入れるのか、それとも <link href="main.css" rel="stylesheet" type="text/css"> <link href="a.css" rel="stylesheet" type="text/css"> として共通の指定と、各ページ固有の指定は分けたほうがいいのか、 そのあたりがわからなくて困ってます。 前者だと1つファイルでいいとは思いますが、長くなってしまいますし、 ページによっては必要ない部分まで読み込むことになります。 多分一長一短で好み次第ということにはなるかと思いますが、 実際にどちらの方法でやっていて便利だという経験をお聞かせいただければ、 大変ありがたく思います。よろしくお願いします。