凍結
0 名無し iPhone
プレビュー画面と実際の画面が違うのですが、どうしてそうなってしまうのかなどの原因がわかる方いらっしゃいませんか?
プレビュー画面を見つつ修正作業を行っていたのですが、編集を全て完了させて実際のページを確認しにいくと全く違うもの(行間が異様に詰まっている等)というふうになってしまいます。プレビュー画面を参考にせず修正を行うしか解決策はないのでしょうか……?
05/10 01:23
返信
コメント投稿 検索
5 しち SOV40
>>0
取り急ぎなのですが、
>>4 <head>に<!DOCTYPE html>は入れられないです
>>4 <head>の<!DOCTYPE html>とletter-spacingは削除してください。
↑ALICE+の編集画面では、『<!DOCTYPE html>』は入れて大丈夫です!

# なので、>>0『<!DOCTYPE html>』は消さずに入れておいてください。

ALICE+には、DOCTYPE宣言(『<!DOCTYPE html>』など)を入れるためだけの編集欄が用意されております。
前回私が書いていた、【HEAD編集】画面の〔□DOCTYPE宣言〕という項目がそれです。
(※言い換えると、この編集欄以外の場所に入れるのは、>>4さんのおっしゃるとおり、絶対駄目です)

━━━━━━━━━━
>>4
補足すると、今回の議題になっているALICE+の小説機能には、【HEAD編集】という編集画面が設けられています。

この【HEAD編集】画面には、〔□xml宣言〕〔□DOCTYPE宣言〕〔□HEAD間編集〕といった項目があり、各項目に編集欄があります。
>>4さんのおっしゃる『<head>〜</head>』の間に挿入されるのは、〔□HEAD間編集〕に入力した内容のみとなります。
今回とは別の編集欄ですので、まったく問題ありません。

もちろん〔□DOCTYPE宣言〕の入力内容は、本番環境の(=Web上に公開された)サイトページだと正しくHTML文書の先頭に挿入されます。

そして現在のALICE+では〔□DOCTYPE宣言〕編集欄に、デフォルトで『<!DOCTYPE html>』が挿入される仕様になっています。

だから最近ALICE+でサイトを作成した場合は、管理人が編集したりテンプレをDLしたり(※自動で各編集欄がテンプレ通りに上書きされる)しない限り、『<!DOCTYPE html>』の宣言が入ったサイトページになるはずなのです。

つまり、本番環境のサイトページはブラウザの《標準モード》で表示されます。

ですが、ALICE+の「プレビュー画面」「メンテナンス機能(ログイン中の管理人以外はサイトにアクセスできなくなる機能)を使って表示するサイトページ」ですと、
《互換モード》で表示されてしまうのです……。

標準モードと互換モードについて,(ホームページの作成に役立つ)

最近のインターネットエクスプローラー7(IE7)は、HTMLやスタイルシートを仕様通りに解釈してだんだんうまく表示できるようになってきています。これを標準モードと言います。 しかし、IE6以前のブラウザでは、仕様とは違った解釈で表示してしまうことが多くあります。(バグもあります)

as76.net

▲参考(標準モードと互換モードについて│ホームページの作成に役立つ)

なんでプレビューなどでは表示モードが《互換モード》になってしまうかというと、“ DOCTYPE宣言より前に ”文字列(※)が挿入されてしまうからです。

*※…「プレビュー中です」とか「メンテ中なのでこのサイトページは現在管理人にしか見られない状態です」みたいな文言がALICE+側から自動で挿入されます。なぜかHTML文書の先頭に……。

HTML文書の先頭に書くべきDOCTYPE宣言が、この挿入文字列のせいで先頭に来なくなる
→DOCTYPE宣言(今回の場合『<!DOCTYPE html>』)が無効になり、プレビュー等の画面では《互換モード》で表示されてしまう……。

ということです。まとめると、
━ ━ ━ ━ ━ ━
>●プレビュー&メンテ機能使用中のサイトページ
→ブラウザの《互換モード》で表示される
>●本番環境のサイトページ
→ブラウザの《標準モード》で表示される
━ ━ ━ ━ ━ ━

この表示モードの違いにより「プレビューと実際のサイトでの表示が違う」という今回の問題が起きていると考えられます。
読んだ感じでは十中八九これかと……。


そしてこの表示モードの違いで顕著に「表示が変わってしまう」かもしれないのが、CSSの文法ミス等です。

追加情報>>2でほぼ確信しましたが、おそらくmarginかpaddingの余白を指定する数値に不備がある(単位の付け忘れ・スペルミスなど)と考えられます。
互換モードと標準モードでの違いの一つに、
「 互換モードでは、単位のついてないサイズ関係の数値は、『px』単位のものとして扱う 」があるからです。

実験してみたら、『margin:3;』と書いたものが
*▼《互換モード》※プレビュー等
→marginが「3px」で計算され、「3px」の余白が表示される
*▼《標準モード》※本番環境
→数値が反映されないため、margin(余白)がゼロになる

……という結果になりました。今回の表示差異はこれが原因だと思います。
05/13 17:43
返信