CSSで外部ファイルのスタイルが読み込めません

解決済

質問者：newtgecko
質問日時：2014/05/09 08:12
回答数：3件

不思議なことに<style>で囲った場合は、うまくいき、外部ファイル(link href)でcssを読み込んだときは、一部のレイアウト指定が乱れてしまいます。

HTML部分は
<ul id="menu_bar">
<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>

CSS　部分は
#menu_bar {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
margin-bottom: 2px;
list-style-type: none;
background: #ff7400;
position: fixed;
bottom: 0px;
left: 0px;
box-shadow: 0px -3px 15px rgba(0,0,0,0.4); // ボックス上に影をつける
}
#menu_bar li {
width: 20%;
float: left;
padding: 0;
margin: 0;
text-align: center;
border-spacing: 2px 2px;
border-collapse: separate;
}
#menu_bar li a {
width: auto;
color: #fff;
font-size: 14px;
font-weight: bold;
margin: 0;
padding: 12px 0;
text-decoration: none;
display: block;
}
#menu_bar li a:hover {
background: #ffa443;
}

です。

外部ファイルと直接<style>で記述するときに違いが出るのは初めてです。考えられる原因が何かありますか？どのようにレイアウトが異なるかを画像添付しました。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2014/05/09 09:52

意味不明の文字が

// ボックス上に影をつける
スタイルシートのコメントは
/* ボックス上に影をつける */
です。これは<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/CSS … )』

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます！

.cssファイルに@charset "Shift_JIS";を追加すれば、意図した通りの動作になりました。cssは見よう見まねで使っていて、全くの未熟者でした。

質問で求めていた以上のこと（CSS自体の誤り等のご指摘）ありがとうございます。文章構造であることを示す必要性などがまだわかりませんが、これから学んでいきます。ありがとうございました。

通報する

お礼日時：2014/05/09 10:09

No.3

回答者： ORUKA1951
回答日時：2014/05/09 09:56

div.nav ol li{

　　width: 19%; /* とかでないと、折り返される。 */
　　display:inline-block;
　　position:relative;/* 忘れてた */
}

- 0
- 件

通報する

No.1

回答者： balloon23
回答日時：2014/05/09 08:58

一部のスタイルは適用されている、ということですのでCSSの指定の仕方が原因かもしれません。

複数cssの読み込みだとか優先順が、などなど。

一度、その部分のスタイル指定だけを別ファイルにしてそれだけを読み込み、<style>で出るものと同じものが表示されるか確認してみることをおすすめします。

あと、もしFirebugなどお使いでしたら、指定の仕方、キャンセルされたスタイルなども確認できて捗るかもしれません。

- 0
- 件

通報する

この回答へのお礼

ご回答有難うございます。

一部分を移して試す方法は思いつきませんでした！

やってみると、#menu_bar li を外部ファイルに移すと「メニュー項目」が横ではなく縦に並んでしまいます。
#menu_bar li aを外部ファイルに移すと、「メニュー項目」の文字のレイアウト（文字色や大きさ）などが反映されなくなりました。

Firebugは使ってません。Google ChromeのDeveloper Toolは使ってます。ただ、画面の見方がよくわからず、全く使いこなせてはいません。

通報する

お礼日時：2014/05/09 09:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！