【HTML・CSS】画面ロード時に画像表示がちらつく問題！

とても初歩的なミスの話です・・。

Webサイトのページを開くときに、画像ファイルのサイズが定まらず、一瞬だけパッとでっかく表示されてしまう。

これはなぜかというと、cssの記述の仕方が悪かったから・・。

下記のようにcss記述を body 下部に書いていると、cssの反映のタイミングが遅れて、画像サイズのちらつきが起きてしまう。

<head>
・・・
</head>

<body>
・・・
  <style>
  <!-- ここにcssを書いていた！-->
  </style>
</body>

下記のようにcss記述を head の内に書くと、最初から画像サイズは正しく反映されます。

<head>
・・・
  <style>
  <!-- ここにcssを書けよな！-->
  </style>
</head>

<body>
・・・
</body>

当たり前の話ですよねこれは、アホらし・・。

やったこと