外部スタイルシートが反映されない理由と解決法
- 外部スタイルシートの反映がされない原因として、リンクがうまくいっていない可能性があります。絶対パスで指定してみたり、ファイルのプロパティを確認したりしましたが、いまだに解決しません。
- また、CSSファイルがHTMLファイルと同じ階層にあることや、必要なmetaタグの書き込みも行っていることを確認しました。しかし、それでもスタイルが反映されません。
- CSSファイルのアイコンがメモ帳の歯車のイラストになっていることから、正しいCSSファイルである可能性は高いですが、他に原因があるのかもしれません。解決策を見つけるために引き続き調査しています。
- ベストアンサー
スタイルシートが反映されません
<link rel="stylesheet" href="style.css" type="text/css">で 外部スタイルシートの反映がされません。 このＣＳＳファイルの中身をそのままＨＴＭＬファイルのＨＥＡＤ部分に持っていったら反映されましたので、単純にリンクがうまくいっていないのか？と思うのですが・・・ ファイル名はあっているし、リンクもファイル名ではできなかったので 絶対パスで指定してみましたがダメでした。パスの指定ミスを防ぐためにファイルのプロパティを開いて、場所をコピペして最後のところに ￥をつけてファイル名を拡張子つきでくっつけましたがダメでした。 なにがいけないのでしょう・・・ いろいろと考えたり調べたりしているのですが、どうしてもわからないです。 ＣＳＳファイルはＨＴＭＬファイルと同一フォルダ内の同一階層にあります。（まだネット上に公開しておらずＵＲＬも持っていないので 個人のＰＣフォルダ内です）ＣＳＳファイルのアイコンはメモ帳に歯車のイラストのアイコンです。このアイコンになっていたらちゃんと ＣＳＳファイルだと思っていたのですがもしかしたら違うでしょうか？ あ、ＨＴＭＬファイルのＨＥＡＤ部分の <meta http-equiv="conten-style-type" content="text/css" /> の書き込みもしてあります。 外部ファイル用の<link rel=だらだらだら>の後に </style>でしめてみたのですがダメでした。
- KanoMizuki
- お礼率61% (206/333)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 それではhtml4.01ではどうでしょう。 わたしもメモ帳で一度試してみましたので、今度は大丈夫だと思います。 最近はxhtml+cssのパターンが多いので前述はxhtmlベースで書いてました。今度はhtml+cssのパターンです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
その他の回答 (2)
- masako1981
- ベストアンサー率28% (4/14)
<!---->はhtmlに適用するコメントですよ。 cssは/**/じゃないんですか？ 参考までに。
- masako1981
- ベストアンサー率28% (4/14)
cssはstyle.cssですね？ htmlとcssは同じフォルダの段階層ですね？ では以下でチェックしてみてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>スタイルシートが反映されません</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
お礼
回答ありがとうございます。 回答を見て修正を加えてみたのですが、反応がありませんでした。 また、メモ帳を新規に作成し回答の <!DOUTYPE～～～ から </html> までをコピペしてＨＴＭＬファイルとして保存しようとしてみたのですが 『このファイルはＡＮＳＨＩテキストファイルとして保存すると失われてしまう、ｕｎｉｃｏｄｅ形式の文字を含んでいます。なんたら』とでてきました。(これは単に文字コードのことでしょうか？Ｓｈｉｆｔ－ＪＩＳとＵＴＦ－８との違いという・・・）
関連するQ&A
- スタイルシートに関して教えてください！本当に困っています！
超初心者で悪いのですが、スタイルシートの記述方法がよく分かりません。確か記述方法は３つあると思うのですが、ＣＳＳファイルを利用して記述する方法が分からない(できない)のです。ここからは実際に自分が今使っているホームページ作成サイト(初心者)に書かれていて理解できない(実際にやってみたがうまくいかない)所をここに書きます。 ３、ＣＳＳファイル利用により記述する方法 テキストエディターで”スタイルを適用する対象名 { ～ }”として記述し、 ファイル保存するときに、拡張子が”.css”というＣＳＳファイルを作ります。 そして、ＨＴＭＬファイル内にはＣＳＳファイルを参照しなさいという指示である、<LINK href="ＣＳＳファイル名.css" type="text/css" rel=stylesheet> をヘッダー部分に記述します。 ＜＜ ＣＳＳファイルデータ例（下記のデータだけを記述して.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 まず、３に書いてあるとおりにＣＳＳファイルを作成しました。 次からがよく分からないのです。３に書いてあるとおりにＨＴＭＬファイルを作成しようと思ったのですが、なぜか、ホームページの基本構造ではないのです。 こういう事です ↓ <html> <head> <LINK href="style.css" type="text/css" rel=stylesheet> </head> <body> <p>スタイルシート</p> </body> </html> 見ても分かるとおり、タイトルの部分がないのです。 タイトルがなくても良いのですか？ あと、このＨＴＭＬデータを.ＣＳＳファイルと同じフォルダ内に作成するという意味が分かりません。 本当に超初心者で悪いのですが、本当に困っています。誰か分かりやすく教えてくれる方はいないでしょうか？お願いします。
- 締切済み
- HTML
- スタイルシート
こんばんは。HPを独学で作っている超初心者です。 スタイルシートが反映してくれないのです。下記の記述で 何が違うのでしょうか？？？ ---01.css--- <sytle type="text/css"> a:link{text-decoration:none;} <style> ---index.html（抜粋）--- <head> <link rel="stylesheet" href="01.css" type="text/css"> </head> どうしても index.html のリンク部分に下線が出てきます。 どうして消せないのかが分かりません！！！ どなたか教えてください！よろしくお願いいたします！
- 締切済み
- その他（インターネット・Webサービス）
- IEで外部スタイルシートが反映されない
IEで外部スタイルシートが反映されない HPを製作したところ、 Firefoxでは、完璧に外部スタイルシートが適用されていたのですが、 IEでテストしたところ、CSSが全く反映されていてませんでした。 多くの皆さんがしてるように、 ヘッダーに、 <link href="style.css" rel="stylesheet" type="text/css" /> と記述しているのですが・・・ 原因としては何が考えるでしょうか？ ご助力願います。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートの設定
スタイルシートをリンク設定したく、文頭に下記の記述をしました。 ++++++++++++++++++++++++++++++++ <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> ++++++++++++++++++++++++++++++++ まったく、反映されません・・ どうして何でしょうか？ どなたかお助けください。
- 締切済み
- ホームページ作成ソフト
- スタイルシート２
１．スタイルシートで、外部スタイルシートがありますが これはそんなに使い勝手がよいでしょうか？ <link rel="stylesheet" type="text/css" href="style.css"> と記述する上で、これはルールですからしょうがないでしょうが、<link rel="stylesheet" type="text/css" とここで、stylesheetを指定していて、さらにtext/css" でも、”スタイルシート”ですよ！！ といっているのですから、最後のhref"URL"後のstyle.css の記述は無駄になるような（くどい＾＾）気もします。 これは、しょうがないですよねー。 個人で使うなら、HTMLで充分なような・・ あと、埋め込みスタイルでよういような・・ ２．さらに、スタイルシートはたしかに軽くなりますが、 記述が面倒で、フルスペル（省略できない）。 HTMLでは、<Li></LI>や、<tr></tr>で 表示できますが、こちらはすべて書かなくてはならないので便利とはいえ、つかいやすいでしょうか＾＾ リンクできるのは、見やすく便利ですが・・・
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートの読み込みについて
はじめまして。 最近業務でスタイルシートを使うことになったのですが、 外部ファイルとしてスタイルシートを保存して、 HTMLの中にリンクの部分を書いておいても、 IEで表示したときに読み込んでくれません。（IEのバージョンは6.0です。） インターネットオプションのユーザー補助のところで、ホームページを見る場合は自分のスタイルシートを適用する、という設定にすれば読み込んで表示されるのですが、それをしないと、表示されませんし、 その設定にしてあっても、外部シートの上書きをした場合、更新ボタンをおしただけでは画面が変わらず、 いちいちインターネットオプションのところで 更新をしないと、外部シートの変更が反映されません。 どこがおかしいか分からず困っています。 「XPのせいでは？」とも言われましたが、 そうなのでしょうか？ ぜひご回答よろしくお願いいたします。 下はソースでリンクを書いてある部分です <html lang="ja"> <head> <title>SAMPLE</title> <link rel="stylesheet"href="detail_2.css" type="text/css"> <script type="text/javascript"> </head>
- ベストアンサー
- HTML
- スタイルシートが反映されない。
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が反映されません。 原因がまったくわかりません。 なにが悪いのでしょうか？。 よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○ＨＴＭＬファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
- 外部のスタイルシートが働かない
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>内に貼り付けると期待通りになります。
- ベストアンサー
- HTML
- ＣＳＳが反映されないで困っています；；
日本のホストの時は、ＣＳＳがＨＴＭＬにうまく反映されていたのですが、 ホストを海外の Ｔ３５Hosting と Graffiti.net で同じ様に挑戦したら ＣＳＳが反映されませんでした；； index.htmlのヘッド内に下記を書いて、 top.cssの名前でＣＳＳを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした；； 「/」（ルートディレクトリ）と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。
- ベストアンサー
- ブログ
お礼
２回わたっての回答ありがとうございます。 そのままコピペして試してみました。 ＨＴＭＬで、ＣＳＳが反映されました。 ただ、わたしが作ったＸＨＴＭＬを、回答をもとにＨＴＭＬに直しても 反応がなく、文字コード以外の全てのmeta情報を全部削除して （スクリプトやページの作成者、検索キーワードなど）それでも反応がなく、つぎに<!-- -->で入れていたコメントを全て削除してみたら ようやくスタイルシートが反映されました。