質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

40528閲覧

ローカルでは正しく表示されますが、サーバーにアップすると崩れます

yk_ol

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/10 01:45

編集2017/05/10 05:57

###前提・実現したいこと
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}

###過去の質問を確認し、試したこと

  1. Chrome上でキャッシュの削除
  2. サーバーに最新のファイルがアップされているか確認
  3. 目を皿のようにしてコーディングにケアレスミスが無いか確認

恥ずかしながら一人では原因を突き止めることが出来ず、質問させて頂いております。

###補足情報
【使用ツール】
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は削除させて頂きます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kanimaru

2017/05/10 02:05

差し支えなければ、サーバに配置したファイルのディレクトリ構成を追記いただけますでしょうか。
yk_ol

2017/05/10 02:17

お忙しいところ、ありがとうございます!ディレクトリ構成図を作成したことが無く、どのように記述すれば分かりやすいか今調べております。ページ数がかなり多いのですが、問題のページのディレクトリ構成が分かればよろしいのでしょうか?
kanimaru

2017/05/10 02:25

公開しているディレクトリで問題のHTML、PHPなどの位置とCSSの位置のみでよいと思います。
miyahan

2017/05/10 02:44

事象が発生したのは Google Chrome であっていますか?(Webのお仕事をしているのであればクライアント条件は常に意識・明記してください)ほかのブラウザでも同様ですか?開発モードでの完全なキャッシュクリア・コンソールでエラーが出てないかの確認はおこないましたか?
yk_ol

2017/05/10 03:19

Google Chromeです。FirebfoxとAndroid画面でも確認しましたが、同様に崩れています。あまりにも初心者な質問で申し訳無いのですが、クライアント条件はどのように明記すればよろしいのでしょうか?今、他の方のアドバイスをもとにコンソールでエラーを発見したところです。
kei344

2017/05/10 03:39

HTMLにbody要素がありませんが、それでも崩れるということでしょうか。また、崩れるとは具体的に「どうなるべきもの」が「どうなっているのか」をお書きください。あと、レンタルサーバがファーストサーバと書かれていますが、プランがいろいろあるためそこまで書かれたほうが良いです。
yk_ol

2017/05/10 03:44

紛らわしくて申し訳ありません。文字数オーバーしてしまって、body要素を削ったのです。追加する方法は無いでしょうか?他のご指摘については質問内に追記していきます。
kei344

2017/05/10 03:50

問題が起きるサイトのURLを提示されるのが手早いとは思います。それか、エラーが起きている外部読み込み部分を含む「崩れ」が起きる最小限のHTMLを提示されるかどちらかだと思います。
guest

回答4

0

view-source:http://www.kimijimaya.co.jp/okuyokawa_info_en.html
でアクセスするか、ブラウザで Ctrl+U でソースが見られます。
そのソースが提示されているHTMLの冒頭部分と大きく違います。

なので、
0. アップロード自体に失敗している
0. 違うサーバにアップロードしている
0. アップロードするファイルを間違えている

を確認してみてください。

投稿2017/05/10 05:26

kei344

総合スコア69407

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_ol

2017/05/10 06:01 編集

kei344さん kanimaruさんから教えて頂いた通りに作業をしたところ、問題が解決致しました。 同僚でWEBデザインについて分かる者がいないため、いつも一人でPCの前で唸っていたのですが、今回思い切って質問させて頂いて本当に良かったです。 皆さんからのアドバイスのおかげで、新たな言葉と解決策を知り、非常に勉強になりました。 お付き合い頂き、本当にどうもありがとうございました。
guest

0

どうなるのが正しいのかわかりませんが、
お示しのURLを見た限り、

awesomeのアドレスの途中に半角の空きがあるみたいです。

html

1<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font- awesome.css">

それに、

CSSにあるIDのmenuの指定がhtmlにはないようですよ。

投稿2017/05/10 04:10

8-0_nyan5

総合スコア2352

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_ol

2017/05/10 05:10

awesomeのアドレスの途中に半角の空きについて、先程他の方からもご指摘頂いたのですが、自分が作成しているhtmlファイルのhead要素内にこちらの<link>の記述が無いのです…。 こちらのサイトは別の人間が過去に作ったもので、なぜこの記述がソース上で表示されるのか、どういうことなのか理解出来ていない状態です。 また、#menuについても、現在自分の目の前にあるhtmlファイルには間違いなく、id="menu"が記載されています。 おそらく、私が「ページのソース」と自分が作っているファイルの違いについてよく理解していないせいなのかもしれませんが、何か見当違いなことを言っていたら、申し訳ありません。
yk_ol

2017/05/10 05:45

8-0_nyan5さん kanimaruさんから教えて頂いた通りに作業したところ、解決致しました。 お忙しいところ、お付き合い頂き、本当にありがとうございました。 皆さんのおかげでとても勉強になりました。
8-0_nyan5

2017/05/10 06:09

解決したようでよかったです。
guest

0

ベストアンサー

<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/okuyokawa_en.css" type="text/css"> を <link rel="stylesheet" href="/css/reset.css"> <link rel="stylesheet" href="/css/okuyokawa_en.css" type="text/css"> にしてみてはどうですか。

ちなみに、以下のディレクトリ構成になってると思いますが合ってますでしょうか。

www(公開ディレクトリ) |__css | |_reset.css | |_okuyokawa_en.css | |__index.php |__index.html |__style.css |__okuyokawa_info_en.html

投稿2017/05/10 02:43

kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_ol

2017/05/10 02:55

ディレクトリ構成は記述して頂いた通りです。 今、cssの頭にスラッシュを足して再度サーバーにアップしてみましたが、変化がありませんでした。 お時間を割いて頂いたのに申し訳ありません…。
kanimaru

2017/05/10 03:13

エラーが403の場合は、CSSディレクトリの権限(パーミッション)を確認してください。 エラーが500番台の場合は、サーバプログラムのエラーなのでスクリプトを確認してください。 サーバの種類(レンタルサーバ・VPS等)、サーバOS,WEBサーバの種類などもあると回答試薬なると思います。
yk_ol

2017/05/10 03:28

CSSディレクトリの権限(パーミッション)が何のことか分からなかったので、調べました。 適切に設定しないとまずいことになるということは分かったのですが、確認の仕方が分かりませんでした。 レンタルサーバは、ファーストサーバです。 サーバOSについては今理解している最中です。
kanimaru

2017/05/10 04:23

8-0_nyan5さんが指摘しているように、header内のULにid=menuがないといけなさそうですが、HTML内にmenuがないです。
yk_ol

2017/05/10 05:12

8-0_nyan5さんへのお返事でも書いたのですが、自分が作成中のファイルには記載があり、何故「ページのソース」と自分のファイルとの間に相違があるのか、理解出来ておりません。 通常、ページのソースと自分のファイル内容は同じように表示されるものなのでしょうか?
yk_ol

2017/05/10 05:32 編集

kanimaruさん!!!!! 出来ました!!!教えて頂いた通りに作業したところ、ローカルと同じように表示されました! 長らくお付き合い頂き、本当にありがとうございました。とてもとても助かりました。 今回皆さんのおかげで、勉強になり、いつもPCの前で一人で試行錯誤していたのですが、今回ばかりはどうしてもネット上で答えを見つけられず、思い切って質問をして本当に良かったです。
guest

0

ファイルパスが間違っているか、ファイルに対するアクセス権がないのでは?

chromeでF12を押すと開発者画面がでます。html中に指定されたcssファイルが読み込めていないのであればconsoleのところにエラーが表示されているはずです。

またshift + F5で再読込するとキャッシュを使わずに再読込をかけるのでcssが反映されていないかどうかは確認できます。

またapacheのエラーログを参照してみてください。見方はレンタルサーバーによって違うので問い合わせてください。

投稿2017/05/10 02:42

編集2017/05/10 02:45
nullbot

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yk_ol

2017/05/10 03:04

お忙しいところ、ありがとうございます。 Shift+F5は既に試みたのですがダメでした。 今、開発者画面を確認したところ、errorが4つも出ていました。 Failed to load resource: the server responded with a status of 500 (Internal Server Error) flexibility.js font-%20awesome.css Failed to load resource: the server responded with a status of 403 (Forbidden) font-%20awesome.css flexibility.js Failed to load resource: the server responded with a status of 500 (Internal Server Error) flexibility.js font-%20awesome.css Failed to load resource: the server responded with a status of 403 (Forbidden) font-%20awesome.css これは、ファイルを修正又は削除した方が良いということでしょうか?
yk_ol

2017/05/10 03:10

また、あまりにも初心者で申し訳ないのですが、apacheが分からず今調べました。 WEBサーバーのプログラムということですが、これはWEBデザインをやる人間は普通に使用していなければならないものですよね? インストールしていつでも使えるようにしておいた方が良いのですよね?
druid654321

2017/05/10 03:25

font- awesome.css と記載している場所があります?ハイフンの後の半角スペースは不要な気がします。 あとは flexibility.js が500になってるのが気になりますね。 そのファイル、サーバにUPされています?
yk_ol

2017/05/10 03:34

font- awesome.css このファイルがどこにあるのか分からず、現在探しております…。 また、ご指摘頂いた通り、flexibility.jsがサーバにアップされていなかったので、今アップしました。 スーパーリロードしましたが、レイアウトは崩れたままです。
nullbot

2017/05/10 04:02

ん?質問のhtmlだとflexibility.jsとか読み込む記述がないですよね。 もしかして違うものを表示しているのでは? (index.htmlを表示するつもりがindex.phpを表示しているとか)
yk_ol

2017/05/10 05:16

ご指摘の通り、質問のページではjsが必要無いですよね。テンパってしまって、ローカルの中にあったフォルダで、サーバに無いものをアップしてみたのです…。 紛らわしくて申し訳ありません。
yk_ol

2017/05/10 05:40

kanimaruさんから教えて頂いた通りに作業したところ、解決致しました。 皆さんお忙しいところ、お付き合い頂きどうもありがとうございました。 皆さんのおかげで勉強になりました。今回頂いたアドバイスをきちんと理解出来るようにこれからまた勉強します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問