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

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

ただいまの
回答率

89.52%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 14K+

yk_ol

score 17

前提・実現したいこと

WEBデザイン経験1年(うち実務経験半年)です。
デザイン事務所に勤めたことが無く、質問出来る同僚がおりません。

html5&css3で企業HP内の1ページを作成しています。
ローカルでは望み通りに表示されるのですが、サーバーにアップするとレイアウトが完全に崩れます。

※質問をするのが初めてなので、もし失礼な点がありましたら、ご指摘頂けると助かります。
ファイル内容を全てアップしようと試みましたが、文字数オーバーで叶いませんでした。

何卒よろしくお願い致します。

発生している問題

サーバーにアップするとレイアウトが完全に崩れます。
【詳細】
cssで指定している文字色(文字背景色)、GoogleFonts、以外の要素が全て崩れています。
例)ロゴのサイズ指定、メニューのfloat、画像の角丸、画像のfloat など、80%が崩れています。

該当のソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:math="http://www.w3.org/1998/Math/MathML" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="Okuyokawa, ultimate sake brewed only for Yokohama Kimijimaya by Honda Shouten well known as Tasuriki's brewer">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="keywords" content="sake,nihonshu,ultimate sake,Okuyokawa,Junmaidaiginjo,Junmai Daiginjo,Yokohama Kimijimaya,Yokohamakimijimaya,Tatsuriki,Hondashouten,Honda Shouten">
<link href="https://fonts.googleapis.com/css?family=Baloo|Katibeh|Chewy" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/okuyokawa_en.css" type="text/css">
<title>Okuyokawa Junmai Daiginjo</title>
</head>
</html>
@charset "UTF-8";

html {overflow-y:scroll;}
body {
   margin:0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family:Verdana, Helvetica, sans-serif;
   font-size:13px;
   color:#727272;
   background:#ffffff;
}
br {letter-spacing:normal;}
a {
   color:#727272;
   text-decoration:none;
}
a:hover {text-decoration:none;}
img {border:0;}
.frame{border-radius: 10px;}
h1,h2,h3,h4,h5,h6 {margin:0;}
.cf:after {
    content: ""; 
    display: block; 
    clear: both;
}
.pc{display: block;}
.sp{display: none;}
.myWebFontClass{font-family: 'Chewy';}
table{
    margin-left: 2%;
    float: left;
    margin-bottom: 2%;
}
table th{
    border-collapse: collapse;
    border: solid 1px;
    background-color: #f2f2f2;
    padding: 2%;
    vertical-align: middle;
}
table tr{
    border-collapse: collapse;
    padding: 1%;
    color: #6f6f6f;
}
table tr td{
    border-collapse: collapse;
    border: solid 1px #6f6f6f; 
    padding: 3%;
}
#prix{clear: both;}
.buy a{
    text-decoration: none;
    padding: 1% 1% 1% 0;
    text-align: center;
    background-color: #f6a3b0;
    color: #fff;
    display: block;
    width: 30%;
    margin-top: 3%;
}
.buy a:hover{ 
    background-color: #fff;
    color: #f6a3b0;
    border: solid 2px #f6a3b0;
    transition: 1s;
}
#prologue{
    margin-bottom: 10%;
    padding: 2%;
}
#a,#b{width: 48%;}
#a{margin-right: 2%;}
h1 {
   margin:0;
   padding:1%;
   font-size:24px;
}
#wrapper {
   width:1024px;
   margin:0 auto;
   background:#fff;
}
#header {
   width:auto;
   margin:1% 0 5% 0;
   height: 80px;
   background-image: url(../img/yk-headerlogo.jpg);
   background-repeat: no-repeat;
   background-position: center;
}
#main {
   margin:1% 0;
   width:1024px;
   padding:0;
}
#footer {
   clear:both;
   margin:0;
}
.cf:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;    
  clear: both; 
  visibility:hidden;
}
/* 回り込み解除 */
#contents:after {
   content:"";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
/* メニュー詳細 */
#menu ul {
   margin:0;
   padding:0;
   list-style:none;
}
#menu li {
   float:left;
   margin-right:1.671px;
}
#menu li a{
   display:block;
   width:169px;
   color:#224b8f;;
   text-align:center;
   line-height:2.5;
}
#menu li a:hover{
   color:#fff;
   background:#82a9da;
}
/* 回り込み解除 */
#menu ul:after{
   content:"";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
/* メイン詳細 */
#main h2 {
   margin:2% 0;
   padding-left:1%;
   font-size:15px;
   font-weight:bold;
   border-left:5px solid #82a9da;
}
#main p{margin:0 0 1em 0;}
#main .morceau{margin-bottom: 5%;}
#commentaire{
    margin: 10% 0;
    border: solid 2px #82a9da;  
    padding: 2%;
}
#commentaire h4{
    background-color: #82a9da;
    margin-top: 3%;
    padding: 2%;
    color: #fff;
    text-align: center;
}
#sakelover{margin-top: 5%}
.comment{
    padding: 1%;
    display: block;
    background-color: #dbedff;
    display: block;
    text-align: center;
}
.color{
    color: #82a9da;
    font-weight: bold;
}
/* サイドバー詳細 */
#sidebar .section {
   background:#82a9da;
}
#sidebar .search{
   margin: 5% 0;
}
#sidebar h2 {
   padding:2%;
   text-align:center;
   font-size:15px;
   font-weight:bold;
   color:#fff;
   border-bottom:1px solid #fff;
   margin: 0 auto;
}
#sidebar ul {
   margin:0;
   padding: 1%;
   text-align: center;
}
#sidebar li {
   margin:0;
   padding: 1% 0;
   list-style:none;    
}
#sidebar li a{
    color: aliceblue
}
/* フッター詳細 */
.copyright {
   padding:20px 0;
   text-align:center;
   font-style:normal;
   font-size:11px;
   color:#727272;
}
/* スマホ対応 */
@media screen and (max-width:640px){
.pc{
    display: none;
    }
.sp{
    display: block;  
    }
img{
    float:none;
    max-width:100%;
    margin:0 auto;
    display:block;
    clear:both;
}
#a,#b{
    width: auto;
}
#a{
    margin-right: 0;
}
#wrapper{
    width:97%;
    border:none;
}
#header,#footer{
    width:100%;
    margin:5% 0;
}
h1{text-align: center;}
#menu{margin:0;}
#menu ul{margin:0 auto;}
#menu ul li{
    margin-right:1.671px;
    border-bottom:1px dotted #82a9da;
    width:100%;
    line-height: 44px;
}
#menu ul li:first-child{
    border-top:1px dotted #82a9da;   
    }
#menu ul li a{
    width:100%;
    color: #224b8f;
    }
#main{
    float:none;
    width:98%;
    padding:0 1%;
    word-break:break-all;
}
#sidebar{
    float:none;
    width:100%;
    padding:40px 0 0;
}
.buy a{
    line-height: 40px;
    margin: 10% 0;
    width: auto;
}
#main .ex{
    margin-bottom: 0;
    margin-top: 5%;
}
table th,h4,h1,p,h2{
    word-break: normal;
    }
.cf{
    margin-bottom: 20%    
    }
#main .bottom{
    margin-bottom: 20%;    
    }
#commentaire{
    margin-bottom: 20%;    
    }
}

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

  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は削除させて頂きます。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/05/10 12:39

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

    キャンセル

  • yk_ol

    2017/05/10 12:44

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

    キャンセル

  • kei344

    2017/05/10 12:50

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

    キャンセル

回答 4

+3

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

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

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


それに、

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/10 14:10

    awesomeのアドレスの途中に半角の空きについて、先程他の方からもご指摘頂いたのですが、自分が作成しているhtmlファイルのhead要素内にこちらの<link>の記述が無いのです…。
    こちらのサイトは別の人間が過去に作ったもので、なぜこの記述がソース上で表示されるのか、どういうことなのか理解出来ていない状態です。

    また、#menuについても、現在自分の目の前にあるhtmlファイルには間違いなく、id="menu"が記載されています。

    おそらく、私が「ページのソース」と自分が作っているファイルの違いについてよく理解していないせいなのかもしれませんが、何か見当違いなことを言っていたら、申し訳ありません。

    キャンセル

  • 2017/05/10 14:45

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

    キャンセル

  • 2017/05/10 15:09

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

    キャンセル

+3

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

なので、

  1. アップロード自体に失敗している
  2. 違うサーバにアップロードしている
  3. アップロードするファイルを間違えている

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/10 14:36 編集

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

    キャンセル

checkベストアンサー

+2

<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 14:12

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

    キャンセル

  • 2017/05/10 14:24

    キャッシュかなと思いますが…。
    以下のように行ってみてください。
    1.サーバ上のokuyokawa_info_en.htmlを削除
    2.http://www.kimijimaya.co.jp/okuyokawa_info_en.html にアクセスし 404エラーとなることの確認
    3.ローカルのokuyokawa_info_en.htmlをアップロード
    4.http://www.kimijimaya.co.jp/okuyokawa_info_en.html にアクセスし 正常に表示されることの確認

    キャンセル

  • 2017/05/10 14:31 編集

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

    キャンセル

+1

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/10 13:02

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

    キャンセル

  • 2017/05/10 14:16

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

    キャンセル

  • 2017/05/10 14:40

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

    キャンセル

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

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る