- ベストアンサー
ローカルでは正常なレイアウトがWEBで崩れる原因と解決方法
- HP作成初心者がホームページビルダーで作成したファイルを修正してアップした際、ローカルでは正常なレイアウトだったがWEBでは崩れる現象が発生しました。
- 具体的な例として、https://kasuri-ikat.com内の「ブログ」リストページ（kasuri-ikat.com/posts/post_archive.html）が崩れてしまいました。
- HTMLやCSSの知識が乏しく、正常なレイアウトに戻す方法が分からない状況です。アドバイスをいただけると幸いです。
- uuu-pp
- お礼率0% (0/3)
- ホームページ作成ソフト
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
念の為、当該ファイル(post_archive.html)をDLして自分のローカルPC上で開いてブラウザ表示させてみたところ、そのままでは表示が崩れました。そこで表示が崩れていないほかのページに適用されているCSSファイルを別途にDLし、先の回答に習い修正してみたところ画像ファイル以外は正常に表示される様になりました。従って前述の通り、単純なCSSファイルへのリンク先URLの指定ミスで間違い無いです。 正常に表示されている他ページに適用されているCSSファイルは… - https://kasuri-ikat.com/style.css ～になっているので、表示が崩れているページのCSSファイルへのリンク先URLを正しく修正すれば問題は改善すると思います。とりあえず… <link rel="stylesheet" type="text/css" href="https://kasuri-ikat.com/style.css"> ～みたいに「絶対URL表記」の形式で記述して置けば確実に正常に表示されると思います。ただし絶対URL表記にした場合、web上にアップロードしたファイルの場合は正常に表示されますが、逆にローカルPC上で開くと表示が変になる場合があります。 ＞ローカルでも表示が… 初心者が使うローカルPC上で簡単web制作ソフトみたいなヤツは、マウスでドラッグするだけで画像を貼り付けたり出来て便利なんですが…。結局、webページは最終的には全てweb上のサーバにアップロードしてブラウザから不特定多数の閲覧者が利用するモノなので。その手のソフトを使ってwebページを作ると、内部のHTMLコードに記述されたURLが "製作者自身のローカルPCでのHDD上でのファイルパス" になっているので、だから日本語URLになってたり、本番のweb環境に存在しないおかしなURLになっていたりします。 中級者以上であれば慣れているので、仮にローカルPC上ではweb制作ソフトを使っていたとしても、本番のweb環境にアップロードする際に一律にリンクURL等を置換処理して本番環境のURLに合わせてからアップロードするので問題無い場合が多いのですが…まあこれはweb制作初心者あるあるなので誰もが一度は通る道です。1回、間違って置けば、次回からは「ああ、あれか」と思い当たる様になり、自力で解決出来る事が1つずつ増えて行きます。
その他の回答 (2)
- kimamaoyaji
- ベストアンサー率26% (2801/10379)
グーグルクロム、マイクロソフトエッジ、ファイヤーフォックスで見る限り正常な画像と同じです。
- 4017B
- ベストアンサー率73% (1336/1814)
単純なCSSファイルへのリンク先URLの指定ミスですね。表示がおかしくなっているページの post_archive.html の上から10行目の部分の… <link rel="stylesheet" type="text/css" href="ブログ _ 絣ラボ_files/style.css"> ～となっているのを、 <link rel="stylesheet" type="text/css" href="../style.css"> ～みたいに書き直してから再保存し、再度web上に上書きアップロードし直してみてください。
補足
すぐさまご回答いただきましてありがとうございます。確かに日本語表記はおかしいですね。ご指示のとおり修正しましたｔころ、ローカルでもレイアウトが崩れました。なぜでしょうか。ご面倒をおかけいたしますが、よろしくお願いいたします。
補足
2度目のご回答にもすぐさまお礼を申し述べましたが、本日（12/23）本サイトを再訪いたしましたところ、そのお礼コメントがどこにも見当たりません。なぜ消えているのか、あるいは別のページにあるのかもしれませんが、あらためてお礼申し上げます。ほんとうに詳しくご丁寧にご教示いただきまして、素人のわたしにもレイアウトの崩れを修正することができました。ありがとうございます。まだまだ問題が出てくるかも分かりませんが、今後ともよろしくお願いいたします。