凍結
0 名無し iPhone
プレビュー画面と実際の画面が違うのですが、どうしてそうなってしまうのかなどの原因がわかる方いらっしゃいませんか?
プレビュー画面を見つつ修正作業を行っていたのですが、編集を全て完了させて実際のページを確認しにいくと全く違うもの(行間が異様に詰まっている等)というふうになってしまいます。プレビュー画面を参考にせず修正を行うしか解決策はないのでしょうか……?
05/10 01:23
返信
コメント投稿 検索
1 しち SOV40
>>0
まずはキャッシュクリアを行ってみたり、作業するブラウザを変えてみたりしてください。

外部CSS(【CSS編集】または【CSSファイル編集】)を使っている場合は、キャッシュに残っている古いCSSファイルを適用してしまう場合があります。
この場合はキャッシュクリアで解決します。

ここまでで解決したらあとは読まなくてOKです。

解決しないのであれば試しに、
HEAD(【HEAD編集】または【head間編集】などと書かれている場所)の、
〔 □DOCTYPE宣言 〕の編集欄を、空っぽにしてみてください。

(おそらくデフォルトの『<!DOCTYPE html>』が入っているはずです。
 編集してこれ以外の何かを入れてたとしても、とりあえず空っぽにしてみてください)

これをやって、もしもプレビューと実際のサイト上の表示が同一になったとしたら、
『 CSS・HTMLの書き方に問題がある(文法ミスなど) 』
が原因だと考えられます。

━━━━━━━━━━
#※〔□DOCTYPE宣言〕の編集欄には
<!DOCTYPE html>
#↑を入れ直しておいてください。

空欄のままでもサイトは表示できるのですが、デザイン崩れのもとになりかねないので、『<!DOCTYPE html>』を入れておくのをお勧めします。
(『<!DOCTYPE html> 宣言 なし』で検索すると、その理由やデザイン崩れの例が出てきます)
━━━━━━━━━━

上述のチェック方法でプレビュー/実際のサイト上の表示が特に変わらなかったら、今のところ他に原因が思いつきません……。


HEADによるチェック方法で表示が変わるようなら、その理由は以下↓

>プレビューと実際のサイト上の画面で表示が違う
たぶんですが、↓の過去スレと同じなのでは……と思われます。

(プレビュー画面と表示が違う│助け合い掲示板)

上記スレを要約すると、
『CSS・HTMLに文法ミスがある。
 プレビュー画面だと、ブラウザ側の忖度によりミスをカバーしてくれる(結果的に、“意図通りの表示”になる)。
 しかし本番のサイト上では忖度してもらえない仕様になるため、文法ミスのある部分がエラーとなってしまい、意図通りの表示ができない』
という話です。

上記スレと同じように、『CSS・HTMLの書き方に問題がある(文法ミスがある、HTML5仕様の文法になっていない※、など)』せいでプレビューと実際で表示が異なっている可能性はあると思います。
上記スレのスレ主さんもiPhoneをお使いだったので、これじゃないかなぁと。

*※:作成時期の古いテンプレだと、文法等も古い仕様(ガラケー向けなど)のままである、といった場合が多い。



>>>>解決するには?>>>>
その文法ミス等を見つけて正すしかないです。

「『<!DOCTYPE html>』を消しておけば意図通りの表示になる」状態かもしれませんが、これだと根本的な解決はできないので……。

(ブラウザなどの閲覧環境によって表示が異なってしまう恐れがある
 =サイト訪問者さんの閲覧環境によっては、意図しないデザインで表示される恐れがある)

これが原因だったらおそらくCSSに何かあるんじゃないかとは思うのですが、情報が少ないので憶測の域を出ません……。
05/11 01:38
返信