重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

つらい・・・

Dreamweaver上とデバイスプレビュー、サーバ上の表示、css反映されない

解決済

  • 質問者：HTML勉強中
  • 質問日時：
  • 回答数：3件

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>&emsp;<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>&emsp;<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>&emsp;<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>

通報する

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

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： t_fumiaki
  • 回答日時：

サーバにアップした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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

cssがフォルダの中とそのフォルダのもう一つ下の階層に同じｃｓｓがあり、そちらを参照していたようでした。。。
助かりました！ありがとうございました！！！

通報する
お礼日時：2016/03/04 08:47

No.2

  • 回答者： t_fumiaki
  • 回答日時：

逆質問です。



フォルダ－HTMLファイル
　　　　－css
　　　　－img_common
　　　　－other
　　　　－about－about.html
　　　　　　　 －css
　　　　　　　 －img

①フォルダというのはサイト全体を格納しているフォルダですか？
②フォルダ－HTMLファイル
HTMLファイルは特別なフォルダが無く、①の直ぐ下の意味ですか？
③css
cssと言うフォルダの中にdrawer.min.cssとcommon.cssがあるのですね？
④about.htmlはトップページの下にあるページですね？
⑤質問に記載のhtmlは①内でトップページですか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

>①フォルダというのはサイト全体を格納しているフォルダですか？
そうです。

>②フォルダ－HTMLファイル
HTMLファイルは特別なフォルダが無く、①の直ぐ下の意味ですか？
そうです。

>③css
cssと言うフォルダの中にdrawer.min.cssとcommon.cssがあるのですね？
cssというフォルダも作らず、フォルダの直下にcssを散らかしています。

>④about.htmlはトップページの下にあるページですね？
製品について、等のページで、トップページの下にあります。

>⑤質問に記載のhtmlは①内でトップページですか？
はい、トップページです。

通報する
お礼日時：2016/03/03 16:31

No.1

  • 回答者： t_fumiaki
  • 回答日時：

この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;
}
-->　⇒　*/
    • good
    • 0
    • 件
通報する
この回答へのお礼

>このhtmlファイルと同じフォルダ内にdrawer.min.cssとcommon.cssが居ますか？
>このhtmlファイルが格納されているフォルダがimg_commonフォルダやotherフォルダと兄弟関係にある様に見えます。
>htmlファイルがドキュメントルートでは無いのですか？
>何か、フォルダ構成が変かなと言う気がします

おっしゃりたいことは何となくはわかるのですが、具体的に分かりません・・・ＨＴＭＬ初心者でそもそもどのようにフォルダ構成すればいいかも分かっておらず、という感じです。

現在、
フォルダ－HTMLファイル
　　　　－css
　　　　－img_common
　　　　－other
　　　　－about－about.html
　　　　　　　 －css
　　　　　　　 －img
といった感じになっております。
そのへんもご教示願えますでしょうか。
よろしくお願いいたします。

通報する
お礼日時：2016/03/03 16:08

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報