###前提・実現したいこと
WEBデザイン経験1年(うち実務経験半年)です。
デザイン事務所に勤めたことが無く、質問出来る同僚がおりません。
html5&css3で企業HP内の1ページを作成しています。
ローカルでは望み通りに表示されるのですが、サーバーにアップするとレイアウトが完全に崩れます。
※質問をするのが初めてなので、もし失礼な点がありましたら、ご指摘頂けると助かります。
ファイル内容を全てアップしようと試みましたが、文字数オーバーで叶いませんでした。
何卒よろしくお願い致します。
###発生している問題
サーバーにアップするとレイアウトが完全に崩れます。
【詳細】
cssで指定している文字色(文字背景色)、GoogleFonts、以外の要素が全て崩れています。
例)ロゴのサイズ指定、メニューのfloat、画像の角丸、画像のfloat など、80%が崩れています。
###該当のソースコード
html5
1 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml" xmlns:math="http://www.w3.org/1998/Math/MathML" xml:lang="en" lang="en"> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6<meta http-equiv="Content-Style-Type" content="text/css"> 7<meta http-equiv="Content-Script-Type" content="text/javascript"> 8<meta name="description" content="Okuyokawa, ultimate sake brewed only for Yokohama Kimijimaya by Honda Shouten well known as Tasuriki's brewer"> 9<meta name="viewport" content="width=device-width,initial-scale=1.0"> 10<meta name="keywords" content="sake,nihonshu,ultimate sake,Okuyokawa,Junmaidaiginjo,Junmai Daiginjo,Yokohama Kimijimaya,Yokohamakimijimaya,Tatsuriki,Hondashouten,Honda Shouten"> 11<link href="https://fonts.googleapis.com/css?family=Baloo|Katibeh|Chewy" rel="stylesheet"> 12<link rel="stylesheet" href="css/reset.css"> 13<link rel="stylesheet" href="css/okuyokawa_en.css" type="text/css"> 14<title>Okuyokawa Junmai Daiginjo</title> 15</head> 16</html>
css3
1 2@charset "UTF-8"; 3 4html {overflow-y:scroll;} 5body { 6 margin:0; 7 padding:0; 8 line-height:1.6; 9 letter-spacing:1px; 10 font-family:Verdana, Helvetica, sans-serif; 11 font-size:13px; 12 color:#727272; 13 background:#ffffff; 14} 15br {letter-spacing:normal;} 16a { 17 color:#727272; 18 text-decoration:none; 19} 20a:hover {text-decoration:none;} 21img {border:0;} 22.frame{border-radius: 10px;} 23h1,h2,h3,h4,h5,h6 {margin:0;} 24.cf:after { 25 content: ""; 26 display: block; 27 clear: both; 28} 29.pc{display: block;} 30.sp{display: none;} 31.myWebFontClass{font-family: 'Chewy';} 32table{ 33 margin-left: 2%; 34 float: left; 35 margin-bottom: 2%; 36} 37table th{ 38 border-collapse: collapse; 39 border: solid 1px; 40 background-color: #f2f2f2; 41 padding: 2%; 42 vertical-align: middle; 43} 44table tr{ 45 border-collapse: collapse; 46 padding: 1%; 47 color: #6f6f6f; 48} 49table tr td{ 50 border-collapse: collapse; 51 border: solid 1px #6f6f6f; 52 padding: 3%; 53} 54#prix{clear: both;} 55.buy a{ 56 text-decoration: none; 57 padding: 1% 1% 1% 0; 58 text-align: center; 59 background-color: #f6a3b0; 60 color: #fff; 61 display: block; 62 width: 30%; 63 margin-top: 3%; 64} 65.buy a:hover{ 66 background-color: #fff; 67 color: #f6a3b0; 68 border: solid 2px #f6a3b0; 69 transition: 1s; 70} 71#prologue{ 72 margin-bottom: 10%; 73 padding: 2%; 74} 75#a,#b{width: 48%;} 76#a{margin-right: 2%;} 77h1 { 78 margin:0; 79 padding:1%; 80 font-size:24px; 81} 82#wrapper { 83 width:1024px; 84 margin:0 auto; 85 background:#fff; 86} 87#header { 88 width:auto; 89 margin:1% 0 5% 0; 90 height: 80px; 91 background-image: url(../img/yk-headerlogo.jpg); 92 background-repeat: no-repeat; 93 background-position: center; 94} 95#main { 96 margin:1% 0; 97 width:1024px; 98 padding:0; 99} 100#footer { 101 clear:both; 102 margin:0; 103} 104.cf:after{ 105 content: "."; 106 display: block; 107 height: 0; 108 font-size:0; 109 clear: both; 110 visibility:hidden; 111} 112/* 回り込み解除 */ 113#contents:after { 114 content:""; 115 display:block; 116 height:0; 117 clear:both; 118 visibility:hidden; 119} 120/* メニュー詳細 */ 121#menu ul { 122 margin:0; 123 padding:0; 124 list-style:none; 125} 126#menu li { 127 float:left; 128 margin-right:1.671px; 129} 130#menu li a{ 131 display:block; 132 width:169px; 133 color:#224b8f;; 134 text-align:center; 135 line-height:2.5; 136} 137#menu li a:hover{ 138 color:#fff; 139 background:#82a9da; 140} 141/* 回り込み解除 */ 142#menu ul:after{ 143 content:""; 144 display:block; 145 height:0; 146 clear:both; 147 visibility:hidden; 148} 149/* メイン詳細 */ 150#main h2 { 151 margin:2% 0; 152 padding-left:1%; 153 font-size:15px; 154 font-weight:bold; 155 border-left:5px solid #82a9da; 156} 157#main p{margin:0 0 1em 0;} 158#main .morceau{margin-bottom: 5%;} 159#commentaire{ 160 margin: 10% 0; 161 border: solid 2px #82a9da; 162 padding: 2%; 163} 164#commentaire h4{ 165 background-color: #82a9da; 166 margin-top: 3%; 167 padding: 2%; 168 color: #fff; 169 text-align: center; 170} 171#sakelover{margin-top: 5%} 172.comment{ 173 padding: 1%; 174 display: block; 175 background-color: #dbedff; 176 display: block; 177 text-align: center; 178} 179.color{ 180 color: #82a9da; 181 font-weight: bold; 182} 183/* サイドバー詳細 */ 184#sidebar .section { 185 background:#82a9da; 186} 187#sidebar .search{ 188 margin: 5% 0; 189} 190#sidebar h2 { 191 padding:2%; 192 text-align:center; 193 font-size:15px; 194 font-weight:bold; 195 color:#fff; 196 border-bottom:1px solid #fff; 197 margin: 0 auto; 198} 199#sidebar ul { 200 margin:0; 201 padding: 1%; 202 text-align: center; 203} 204#sidebar li { 205 margin:0; 206 padding: 1% 0; 207 list-style:none; 208} 209#sidebar li a{ 210 color: aliceblue 211} 212/* フッター詳細 */ 213.copyright { 214 padding:20px 0; 215 text-align:center; 216 font-style:normal; 217 font-size:11px; 218 color:#727272; 219} 220/* スマホ対応 */ 221@media screen and (max-width:640px){ 222.pc{ 223 display: none; 224 } 225.sp{ 226 display: block; 227 } 228img{ 229 float:none; 230 max-width:100%; 231 margin:0 auto; 232 display:block; 233 clear:both; 234} 235#a,#b{ 236 width: auto; 237} 238#a{ 239 margin-right: 0; 240} 241#wrapper{ 242 width:97%; 243 border:none; 244} 245#header,#footer{ 246 width:100%; 247 margin:5% 0; 248} 249h1{text-align: center;} 250#menu{margin:0;} 251#menu ul{margin:0 auto;} 252#menu ul li{ 253 margin-right:1.671px; 254 border-bottom:1px dotted #82a9da; 255 width:100%; 256 line-height: 44px; 257} 258#menu ul li:first-child{ 259 border-top:1px dotted #82a9da; 260 } 261#menu ul li a{ 262 width:100%; 263 color: #224b8f; 264 } 265#main{ 266 float:none; 267 width:98%; 268 padding:0 1%; 269 word-break:break-all; 270} 271#sidebar{ 272 float:none; 273 width:100%; 274 padding:40px 0 0; 275} 276.buy a{ 277 line-height: 40px; 278 margin: 10% 0; 279 width: auto; 280} 281#main .ex{ 282 margin-bottom: 0; 283 margin-top: 5%; 284} 285table th,h4,h1,p,h2{ 286 word-break: normal; 287 } 288.cf{ 289 margin-bottom: 20% 290 } 291#main .bottom{ 292 margin-bottom: 20%; 293 } 294#commentaire{ 295 margin-bottom: 20%; 296 } 297}
###過去の質問を確認し、試したこと
- Chrome上でキャッシュの削除
- サーバーに最新のファイルがアップされているか確認
- 目を皿のようにしてコーディングにケアレスミスが無いか確認
恥ずかしながら一人では原因を突き止めることが出来ず、質問させて頂いております。
###補足情報
【使用ツール】
Bracketsを使用しています。
【ディレクトリ構成】
css ├ okuyokawa_en.css
banner ├
img ├
index.html
index.php
style.css
okuyokawa_info_en.html
【事象が発生したブラウザ】
Google Chrome
Firefox
IE
Android
Iphone
【レンタルサーバ】
ファーストサーバ
ギガント2
###お礼
皆様から頂いたアドバイスの全てが、非常に勉強になりました。
ベストアンサーを選ぶのが心苦しかったのですが、アドバイス通りに作業をして解決出来た回答を選びました。
恥ずかしいので、問題ページのURLは削除させて頂きます。

回答4件
あなたの回答
tips
プレビュー