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.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
といった感じになっております。
そのへんもご教示願えますでしょうか。
よろしくお願いいたします。
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.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があり、そちらを参照していたようでした。。。
助かりました!ありがとうございました!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
javascript 神経衰弱
-
Dreamweaver上とデバイスプレビ...
-
【jQuery】2分割レイアウトで、...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
JavaScriptで変更した属性の元...
-
どの<li><a> が押されたか判別...
-
複数画像のランダム複数表示(...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
読み込んだQRコードをフォーム...
-
MFCで画像を表示させているので...
-
質問に答えていくと、回答によ...
-
eclipseでcssを使うためには?
-
htmlの記述で link rel=styles...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報