作成したホームページのデザインが崩れて表示されてしまう場合


デザインにかかわるファイルの読み込みが遅い

自分のサイトにアクセスしたとき、なぜかデザインが崩れて表示されているという場合、どういった原因と対処が考えられるでしょうか。まずアクセスしてしばらくはデザインが崩れているものの、しばらくすると正常に表示されるという場合、CSSやJavaスクリプトの読み込みの仕方に問題があるかもしれません。

基本的にホームページはHTMLに書かれたことを上から実行していく形でレンダリングされます。そのため、サイト上部のデザインに関わりがあるJavaスクリプトをHTMLのもっとも下の方で読み込んでいる場合、Javaスクリプトの読み込みが終わるまでサイト上部のデザインが行われないため、アクセス時に崩れてしまうというわけです。これを回避するにはJavaスクリプトをもっと早い段階で読み込むようにしましょう。

ちょっとしたCSSの記載ミスでもおかしくなる

ずっとデザインが崩れたままという場合は、CSSの設定や書き方に問題がある可能性が高いです。たとえば「typo(綴りの間違い)」はないでしょうか。「margin」と書くところを「marjin」と書いてしまったという場合、当然、この部分はサイトのデザインに反映されません。また、一つのプロパティで複数の宣言を行う場合、宣言の終わりにセミコロンを書く必要がありますが、これを忘れると一部の宣言がデザイン反映されなくなってしまうのでやはりデザインがおかしくなってしまいます。

古いブラウザを使ってアクセスしている場合は、CSSのプロパティが対応していなかったり、特定のプロパティに対して発生するバグによってデザインが意図したとおりにならないことがあります。

レスポンシブwebデザインを利用すれば、1つのwebサイトを作るだけで、あらゆるデバイスに対応出来ます。モバイル用、パソコン用といった様に、デバイスごとにwebサイトを作る必要がなくなるので、とても便利です。