- ベストアンサー
CSSの外部参照について
- XHTML内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると認識されず、表示されません。
- index.html,works.htmlとCSSの記述場所を外部参照にし、HPを作成しようとしています。
- XHTMLファイルはindex.html, works.htmlで、CSSはcssフォルダのstyle.cssに記述され、画像はimgフォルダに保存されています。しかし、外部参照CSSが認識されません。
- von_un
- お礼率36% (19/52)
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
連投失礼します。 先ほど記載したものからまた誤字脱字が見つかりましたので差し替えさせていただきます。 まだほかにも誤字脱字があるかもしれません。 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <title>***</title> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS div,ul,ol,li,h1,p{margin:0;padding:0;} body{ text-align:center; min-width:780px; background-color:#f5f5f1; font-color:#666666; font-family:"Lucida Geande",sans-serif; font-size;62.5%; margin:0; padding:0; } h1{ display:none; } #wrapper{ width:740px; margin:0 auto; text-align:left; } #main a { height:100px; font-color:#ffffff; font-size:1.8em; text-transform: uppercase; text-decoration: none; display: block; } #main a:hover{ font-color: #cccccc; } #main a:active{ font-color: #cccccc; } #main ul{ list-style:none; } #main ul li{ padding:5px 0px 5px 0px; } #header{ height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center; } .biography{ background:url("blue.gif") no-repeat left center; } .works{ background-image:url(./img/works.gif) no-repeat left center; } .access{ background-image:url(./img/access.gif) no-repeat left center; } #footer ul li { padding:10px; display:inline; } #footer ul { text-align:right; } #footer p { text-align:center; }
その他の回答 (4)
- one-moment
- ベストアンサー率30% (23/76)
ソースの誤字脱字部分を修正してみました。 ですが、もしかしたら一部用途が変更になっているかもしれません。 colorとしか記載されておらず、font-colorなのかbackground-colorなのかわからなかったりとか、純粋なうち間違いでソースが機能してなかったりとか＾＾； <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <title>***</title> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS div,ul,ol,li,h1,p{margin:0;padding:0;} body{ text-align:center; min-width:780px; background-color:#f5f5f1; font-coler:#666666; font-family:"Lucida Geande",sans-serif; font-size;62.5%; margin:0; padding:0; } h1{ display:none; } #wrapper{ width:740px; margin:0 auto; text-align:left; } #main a { height:100px; color:#ffffff; font-size:1.8em; text-transform: uppercase; text-decoration: none; display: block; } #main a:hover{ font-color: #cccccc; } #main a:active{ font-color: #cccccc; } #main ul{ list-style:none; } #main ul li{ padding:5px 0px 5px 0px; } #header{ height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center; } .biography{ background:url("blue.gif") no-repeat left center; } .works{ background-image:url(./img/works.gif) no-repeat left center; } .access{ background-image:url(./img/access.gif) no-repeat left center; } #footer ul li { padding:10px; display:inline; } #footer ul { text-align:right; } #footer p { text-align:center; }
行間を読む力が無いので、失礼な書き込みになってしまうかもしれません。 その際は、「バカが来たよ」とスルーしてください。 質問文を拝見して疑問に思ったんですけど。 > 次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 ↑の場合は <link rel="stylesheet" type="text/css" href="../style.css" media="all" /> では？ <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> だと、「HTMLが置いてあるディレクトリ内にcssというフォルダを作りその中にstyle.cssがある場合」になると思うんですけど。 「回答番号：No.2」のやり取りを拝見して疑問に思った事。 > <link rel="stylesheet" type="text/css" href="style.css" media="all" /> ↑はHTMLとCSSを同じフォルダに置いてある場合の呼び出し方ですが。その辺りは大丈夫ですか？ 「回答番号：No.1」のお礼欄に書かれていた記述を見たところ、余分な「"」や「.」を見つけました。 ↓余分なものを消しみましたので、見比べてみてください。質問欄に書かれていたCSSの中身はしっかり見ていません。すみません。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>***</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <body>
お礼
shumokuさん 回答、ありがとうございます！！ 余分な「"」や「.」を消して分かりやすく教えて頂き、お蔭様で CSSを内部参照していたページと同じページになりました。 注意深く読んでいたのですが、XHTMLヘッダー部分も端から理解して いませんでした。読んでいたつもりでした。 次に、CSSのフォルダの位置のことなのですが、shumokuさんの おっしゃる通りですね。 いま振り返ってみてみると意味の分からないことを書いていました。 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、 今はこう記述しています。 <link rel="stylesheet" type="text/css" href="css/style.css" media="all" />） とは完全に間違えていますね。 正解はこうですね。 ・CSSが置いてあるファイル内に新規フォルダを作りその中にHTMLがある場合 <link href="../style.css" rel="stylesheet" type="text/css"> ・HTMLが置いてあるファイルの中に新規フォルダを作りその中にCSSがある場合 <link href="css/style.css" rel="stylesheet" type="text/css"> ・HTMLとCSSを同じフォルダに置いてある場合 <link rel="stylesheet" type="text/css" href="style.css" media="all" /> それから、CSSが外部参照で反映できなかったのは、 ・XML宣言や構成要素をまだ理解していない ・文字のスペルミス ・CSSの保存方法(保存するときに、ファイルの種類→すべてのファイル, 文字コード→UTF-8にしました。) ・XHTMLに記述するCSSの外部参照<link href="">のミス だと思えるようになりました。 最後になりますが、失礼な書き込みではないです(＞＜) shumokuさんの知識をお借りして内部参照していたページ外部参照で出せたので、 次へのやる気が出てきました。 助けてくれて、本当にありがとうございます。ｍ（＿ ＿）ｍ
素直にディレクトリ云々では無くhref="○○.css"では正常にCSSは反映しますか？
補足
href="○○.css"（href="style.css"）でもCSSは反映しませんでした。 <link rel="stylesheet" type="text/css" href="style.css" media="all" /> 知識不足だとは分かっています。。 それから、メモ帳から書き直してみたら、worksにリンクすることは出来ました。 CSSは反映しないということはどういうことなのでしょう。
- one-moment
- ベストアンサー率30% (23/76)
認識云々の前にソースが＾＾； <?xml version="1.0" encoding"utf=8"?> ↓ <?xml version="1.0" encoding="UTF-8"?> あとDOCTYPE宣言が2重？ どこかで見たことがあるのですが、XMLの場合、CSS記述が通常のHTMLとして認識されてしまうとの記憶があります。 内部に埋め込むか、要素に直接記述するほうが良いかもしれません＾＾；
お礼
回答、ありがとうございます！！^O^ ^^;;;;; 基礎的なことが分かっていないと思い知らされました。 ヘッダーの部分、DOCTYPE宣言をひとつにして、 <?xml version="1.0" encoding="UTF-8"?> の部分を書き換えました。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <head profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> ですが、worksにリンク出来なくなりました。 <li class="works"><a href="works.html#works">>> Works</a></li> works.htmlファイルからは正常にみれます。 教えていただけますか。（；O；）
お礼
one-momentさん 三回の回答、ありがとうございます！！(嫌味ではありません^^ 親身になって回答してくれてありがとうございますと、感謝の意です。) 誤字脱字を発見して見やすくソースを書いて頂き、 実はこんなに親身になって答えてくれるのかと驚いている程です。 一回目にworksにリンク出来ないと書きましたが、 メモ帳から書き直してみたら、worksにリンクすることが出来ました。 shumokuさんの返答にも書いたのですが、 CSSが外部参照で反映できなかったのは、 ・XML宣言や構成要素をまだ理解していない ・文字のスペルミス ・CSSの保存方法(保存するときに、ファイルの種類→すべてのファイル, 文字コード→UTF-8にしました。) ・XHTMLに記述するCSSの外部参照<link href="">のミス だと思います。 colorのことも大して触れていなかったです。 当たり前のことを言いますが、ソースに書く全てがそのままHPに現れますね。 colorにも今後気をつけます。 時間を割いて注意深く見て指導してくださり、本当にありがとうございます。 ｍ(＿ ＿)ｍ