
DreamweaverでHPを作成しておりますが、Dreamweaver上のライブビューでは表示したい形になっているのに、デバイスプレビュー、サーバ上の表示ではcssが反映されておりません。
css、HTML自体も一応自分なりに確認しましたが、何が悪いのか分かりません。
一度コードを見ていただきたいです。
よろしくお願いいたします。
↓HTML↓
<!DOCTYPE html>
<html><head>
<!-- IEの初期設定(ここではedgeで設定) -->
<meta http-equiv="X-UA-Compatible" conatent="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Stylesheets -->
<link rel="shortcut icon" href="../img_common/favicon.ico" type="img/x-icon">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script type="text/javascript" src="../other/slidebars.js"></script>
<script type="text/javascript" src="../other/respond.src.js"></script>
<!---ドロップダウンメニュー--->
<script type="text/javascript">
<!--
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});-->
</script>
<!---リストを横並びにするメニュー--->
<script type="text/javascript" src="../other/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11 …
<script type="text/javascript" src="../other/jquery-match-height-master/jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("ul li").wrapInner("<div class='inner'></div>");
$("ul li >.inner").matchHeight();
});
</script>
<style type="text/css">
<!--
#footer a{
color:#FFFFFF;
text-decoration:none;
}
#footer a:hover{
color:#ffff00;
text-decoration:underline;
}
-->
</style>
<!-- Shims -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html …
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/res …
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
<!-- Analytics -->
<script type="text/javascript" src="../other/analyticstracking.js"></script>
<!-- Favicons -->
<link rel="shortcut icon" href="img_common/favicon.ico" type="img/x-icon">
<link rel="stylesheet" type="text/css" href="drawer.min.css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body class="drawer drawer--right">
<!--ドロワーメニュー-->
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<div id="header">
</div><!--header-->
<div id="main">
<h2 style="font-size:180%;"></h2>
<p></p>
<ul class="cols-2">
<li><img src="img/.png" width="100%" height="auto" alt=""/></li>
<li class="none"></li></ul>
<ul class="cols-2">
<li><p></p></li>
<li><br> <img src="img/.png" width="80%" height="auto" alt="" style="margin:0 auto;"/><br><p style="text-align:center;"></p></li></ul>
<ul class="cols-2">
<li><img src="img/.png" width="100%" height="auto" alt=""/></li>
<li class="none"></li></ul>
<ul class="cols-2">
<li><p></p></li>
<li> <img src="img/.png" width="80%" height="auto" alt="" style="margin:0 auto;"/></li></ul>
<ul class="cols-1">
<li><img src="img/cp2r2.png" width="100%" height="auto" alt=""/></li></ul>
<ul class="cols-2">
<li><img src="img/Yinyang_3.png" width="100%" height="auto" alt=""/></li>
<li class="none"></li></ul>
<ul class="cols-2">
<li><p></p></li>
<li> <img src="img/.png" width="80%" height="auto" alt="" style="margin:0 auto;"/></li></ul>
<ul class="fct1">
<li style="width:10%;"><img src="img/.png" width="80px" height="auto" alt="" style="text-align:right;"/></li>
<li><p></p></li></ul>
<ul class="fct2">
<li style="width:10%;"><img src="img/.png" width="80px" height="auto" alt="" style="text-align:right;"/></li>
<li><p></p></li></ul>
</div><!--main-->
</body>
</html>

No.3ベストアンサー
- 回答日時:
サーバにアップしたurlが解らない為、全貌が不明だが気づいた点のみ。
cssがindex.htmlと同じ場所に内のかも知れない。
<!DOCTYPE html>
<html><head>
<!-- IEの初期設定(ここではedgeで設定) -->
<meta http-equiv="X-UA-Compatible" conatent="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Stylesheets -->
<link rel="shortcut icon" href="../img_common/favicon.ico" type="img/x-icon">
●修正 href="../img_common/ ⇒ href="img_common/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script type="text/javascript" src="../other/slidebars.js"></script>
●修正 src="../other/slidebars.js" ⇒ src="other/slidebars.js"
<script type="text/javascript" src="../other/respond.src.js"></script>
●修正 src="../other/respond.src.js" ⇒ src="other/respond.src.js"
●以下同様、../フォルダ/ の../は不要
<!---ドロップダウンメニュー--->
<script type="text/javascript">
<!--
$(function(){
$('#menu li').hover(function(){
$("ul:not(:animated)", this).slideDown();
}, function(){
$("ul.child",this).slideUp();
});
});-->
</script>
<!---リストを横並びにするメニュー--->
<script type="text/javascript" src="../other/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11 …
<script type="text/javascript" src="../other/jquery-match-height-master/jquery.matchHeight.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$("ul li").wrapInner("<div class='inner'></div>");
$("ul li >.inner").matchHeight();
});
</script>
<style type="text/css">
<!-- ⇒ /*
#footer a{
color:#FFFFFF;
text-decoration:none;
}
#footer a:hover{
color:#ffff00;
text-decoration:underline;
}
--> ⇒ */
</style>
<!-- Shims -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html …
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/res …
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
<![endif]-->
<!-- Analytics -->
<script type="text/javascript" src="../other/analyticstracking.js"></script>
<!-- Favicons -->
<link rel="shortcut icon" href="img_common/favicon.ico" type="img/x-icon">
<link rel="stylesheet" type="text/css" href="drawer.min.css">
<link rel="stylesheet" type="text/css" href="common.css">
</head>
<body class="drawer drawer--right">
<!--ドロワーメニュー-->
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<div id="header">
</div><!--header-->
<div id="main">
<h2 style="font-size:180%;"></h2>
<p></p>
<ul class="cols-2">
<li><img src="img/.png" width="100%" height="auto" alt=""/></li>
●img/.png ⇒ img/画像ファイル名.png
●以下同様
<li class="none"></li></ul>
cssがフォルダの中とそのフォルダのもう一つ下の階層に同じcssがあり、そちらを参照していたようでした。。。
助かりました!ありがとうございました!!!

No.2
- 回答日時:
逆質問です。
フォルダ-HTMLファイル
-css
-img_common
-other
-about-about.html
-css
-img
①フォルダというのはサイト全体を格納しているフォルダですか?
②フォルダ-HTMLファイル
HTMLファイルは特別なフォルダが無く、①の直ぐ下の意味ですか?
③css
cssと言うフォルダの中にdrawer.min.cssとcommon.cssがあるのですね?
④about.htmlはトップページの下にあるページですね?
⑤質問に記載のhtmlは①内でトップページですか?
>①フォルダというのはサイト全体を格納しているフォルダですか?
そうです。
>②フォルダ-HTMLファイル
HTMLファイルは特別なフォルダが無く、①の直ぐ下の意味ですか?
そうです。
>③css
cssと言うフォルダの中にdrawer.min.cssとcommon.cssがあるのですね?
cssというフォルダも作らず、フォルダの直下にcssを散らかしています。
>④about.htmlはトップページの下にあるページですね?
製品について、等のページで、トップページの下にあります。
>⑤質問に記載のhtmlは①内でトップページですか?
はい、トップページです。

No.1
- 回答日時:
このhtmlファイルと同じフォルダ内にdrawer.min.cssとcommon.cssが居ますか?
このhtmlファイルが格納されているフォルダがimg_commonフォルダやotherフォルダと兄弟関係にある様に見えます。
htmlファイルがドキュメントルートでは無いのですか?
何か、フォルダ構成が変かなと言う気がします。
関係有りませんが、以下修正要(cssのコメントアウトは/*~*/)。
<style type="text/css">
<!-- ⇒ /*
#footer a{
color:#FFFFFF;
text-decoration:none;
}
#footer a:hover{
color:#ffff00;
text-decoration:underline;
}
--> ⇒ */
>このhtmlファイルと同じフォルダ内にdrawer.min.cssとcommon.cssが居ますか?
>このhtmlファイルが格納されているフォルダがimg_commonフォルダやotherフォルダと兄弟関係にある様に見えます。
>htmlファイルがドキュメントルートでは無いのですか?
>何か、フォルダ構成が変かなと言う気がします
おっしゃりたいことは何となくはわかるのですが、具体的に分かりません・・・HTML初心者でそもそもどのようにフォルダ構成すればいいかも分かっておらず、という感じです。
現在、
フォルダ-HTMLファイル
-css
-img_common
-other
-about-about.html
-css
-img
といった感じになっております。
そのへんもご教示願えますでしょうか。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
アコーディオンメニューが開い...
-
複数の要素へ appendchild でき...
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
JSPでの画像ファイル表示
-
1枚の画像をクリックすると複数...
-
libjpegライブラリの使い方につ...
-
jspでcssが読み込めない
-
htmlの記述で link rel=styles...
-
createElementで作成した要素を...
-
removeAttribute()メソッドで削...
-
innerHTMLに入れたリンクが反応...
-
javascriptでEnterキーをtabキ...
-
eclipseでcssを使うためには?
-
ネストされたチェックボックス...
-
リキッドデザイン3カラム左端幅...
-
div要素をランダムに表示させたい
-
css固定したフッターが本文と重...
-
UWSC(マウス自動化ソフト)に...
-
Javascript初心者|jQueryの.va...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
複数の要素へ appendchild でき...
-
【jQuery】2分割レイアウトで、...
-
fontsize.jsでhtmlの大中小の設...
-
チェックボックスと画像切替の連動
-
オンマウスで画像変更、クリッ...
-
Dreamweaver上とデバイスプレビ...
-
jqueryを使ってポップアップを...
-
javaスクリプトを使ったタブ切...
-
同一ページ内の複数のタグに同...
-
jQuerryの組み合わせについて
-
横並びの画像を3枚時間差でフェ...
-
firefox でjavascript が無効
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
画像スライダーをやってますが2
-
auのナビゲーションの動きをす...
-
Javaスクリプトで要素の表示・...
-
jQueryでタブ、スライダーを使...
-
Jqueryを使って画像サムネイル...
おすすめ情報