- ベストアンサー
CSSで外部ファイルのスタイルが読み込めない原因とは？
- CSSで外部ファイルのスタイルが読み込めない場合、一部のレイアウト指定が乱れることがあります。
- 問題が発生する原因として、外部ファイルのパスが正しく指定されていない可能性があります。
- また、外部ファイルの読み込み順序やキャッシュの問題も考えられます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
意味不明の文字が // ボックス上に影をつける スタイルシートのコメントは /* ボックス上に影をつける */ です。これは<head></head>内でも同じです。たまたま無視されただけ 外部で無視されなかったのは、文字コードの問題 必ず最初に @charset "Shift_JIS"; html,body{margin:0;padding:0;} p{text-indent:1em;} と文字コードを指定する。念のため <link rel="stylesheet" type="text/css" media="screen" href="./styleSheet/standard.css" charset="Shift_JIS"> ・・特にHTMLとCSSの文字コードが異なる場合は入れておくと良い。 CSSに間違いが沢山あります。 <div class="nav"> <ul> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> <li><a href="#">メニュー項目</a></li> </ul> </div> ※HTML4.01には文書構造を示すタグが用意されていませんので、DIVを使用して文書構造を示します。 HTML5では、文書構造を示すタグが用意されているので、<div class="nav"></div>は<nav></nav>となります。ナビゲーションは複数登場する可能性があるのでclassのほうが良いでしょう。 わかりやすいように全角スペースでインデントさせています。タブに戻すこと div.nav ul,div.nav ul li{ margin:0;pading:0; } div.nav ul{ list-style:none; width:100%; height:45px;line-height:45px; background: orange; text-align:center; position:fixed; bottom:2px;left:0; box-shadow: 0px -3px 15px rgba(0,0,0,0.4);/*ボックス上に影をつける*/ font-size:2px;/* li間のスペース */ } div.nav ol li{ width: 20%; display:inline-block; } div.nav ol li a:link { display:block; width: 100%; color: white; font-size: 14px; font-weight: bold; text-decoration: none; } div.nav ol li a:hover{ background: #ffa443; } ※ border-spacing:,border-collapse:はtable-cell用のプロパティです。 ※ CSS2以降は基点となるセレクタを書くことになりました。 『5.2 セレクタの構文( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#selector-syntax )』
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
div.nav ol li{ width: 19%; /* とかでないと、折り返される。 */ display:inline-block; position:relative;/* 忘れてた */ }
- balloon23
- ベストアンサー率69% (16/23)
一部のスタイルは適用されている、ということですのでCSSの指定の仕方が原因かもしれません。 複数cssの読み込みだとか優先順が、などなど。 一度、その部分のスタイル指定だけを別ファイルにしてそれだけを読み込み、<style>で出るものと同じものが表示されるか確認してみることをおすすめします。 あと、もしFirebugなどお使いでしたら、指定の仕方、キャンセルされたスタイルなども確認できて捗るかもしれません。
お礼
ご回答有難うございます。 一部分を移して試す方法は思いつきませんでした！ やってみると、#menu_bar li を外部ファイルに移すと「メニュー項目」が横ではなく縦に並んでしまいます。 #menu_bar li aを外部ファイルに移すと、「メニュー項目」の文字のレイアウト（文字色や大きさ）などが反映されなくなりました。 Firebugは使ってません。Google ChromeのDeveloper Toolは使ってます。ただ、画面の見方がよくわからず、全く使いこなせてはいません。
お礼
ご回答ありがとうございます！ .cssファイルに@charset "Shift_JIS";を追加すれば、意図した通りの動作になりました。cssは見よう見まねで使っていて、全くの未熟者でした。 質問で求めていた以上のこと（CSS自体の誤り等のご指摘）ありがとうございます。文章構造であることを示す必要性などがまだわかりませんが、これから学んでいきます。ありがとうございました。