ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 プレビュー画面と表示が違う ユーザー助け合い掲示板 『プレビュー画面と表示が違う』へのコメント投稿 記事 12 へのレス：>>11 【配色の設定】で全ての色コードの先頭に『 # 』半角シャープを付けてください！（例：#aa70b3） の補足です。 なぜプレビューと実際のサイト上で表示に違いが出るのか、なぜ以前のサイトからコピペしてきているのに現在のサイトではできないのか、……という話なので以下は読まなくとも問題ありません。蛇足です。 色コード先頭に『 # 』は必須なのですが、どうやらブラウザによっては文法エラーでも忖度して色を反映してくれるようです。 それがなぜ今回、以前のサイトでは大丈夫だったのに新しいサイトではダメだったのか……。 多分ですが、以前のサイトでは【HEAD編集】に『 <!DOCTYPE html> 』が入っていなかったんだと思います。 今はこの『 <!DOCTYPE html> 』がデフォルトで入るようになっていますが、以前は無記入がデフォルトでした。 ここで、以前のサイト／現在のサイト間に違いが生まれたのだと思います。 この記述は雑に言うと『この文書は、HTML5の規格で書いていますよ〜』という宣言です。 >そしてどうやら、【Safariでは】【HTML5文書で】【色コード先頭に『 # 』を付け忘れると】、文法エラーになって、ブラウザデフォルトの配色になってしまう……ようです。 ※FirefoxとChromeでは、シャープを付け忘れていてもブラウザの忖度で意図通りの色にしてくれるようですが。 原理は不明ですが、『 <!DOCTYPE html> 』を宣言されていない状態だとSafariでも #無し色コード を反映してくれるようでした。 じゃあなぜプレビューでは #無し色コード でも配色が反映されていたのかというと、 * ━━━━━━━━━━ * プレビュー中です * 〔修正する〕 * 〔これで保存する〕 * ━━━━━━━━━━ というテキストが、『 <!DOCTYPE html> 』よりも上に挿入されているせいでした。 『 <!DOCTYPE html> 』は文書の先頭で宣言するものなので、プレビュー画面に上記のテキストが入ったせいで、宣言が無効に →→ 結果、『 <!DOCTYPE html> 』が入っていないのと同じ状態（＝“以前のサイト”の状態）になる →→“以前のサイト”同様、プレビュー画面では #無し色コード でも配色が反映される ……という理由で、「プレビュー画面でのみ、以前のサイト同様に配色が反映される」状態となった模様です。 #誤解無きように補足しておくと、 ●『 <!DOCTYPE html> 』といった宣言は本来必須。よほどの理由が無い限り消したり書き換えたりはしないことを推奨。 ●色コードの先頭に『 # 』は必須。「<!DOCTYPE html>を消せば以前のサイトと同じ表示にできる！」……とは考えずに、とにかく【配色の設定】でも『 # 』は付けてください。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>12 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート