サイト制作

画像によるレイアウトのずれを防ぐ方法｜width・heightで表示領域を確保

慈愛妃きづな

2026-10-29

この記事には広告・アフィリエイトリンクが含まれます。

画像の表示後に文章がずれる場合は、画像用の領域を読み込み前に確保します。width・height属性やCSSで正しい縦横比を伝え、画面幅に合わせて表示。画像の差し替え時は寸法と実際の比率も確認します。

画像の読み込み前に表示領域がないと文章が動く

記事を読み始めた瞬間、上の画像が表示されて文章が大きく動く。ボタンを押そうとして別の場所を押してしまうこともあります。画像の読み込みが遅いことだけでなく、画像が入る場所を先に確保していないことが原因の一つです。容量の軽量化と、場所の予約は別々に考えたいですね。

web.devは、画像にwidthとheightの寸法属性を付けるか、CSSで必要な比率の領域を確保する方法を案内しています。ブラウザーが画像の到着前に縦横の比率を把握できれば、その分の場所を用意できます。表示幅を画面に合わせて変えることと、元の寸法を伝えることは両立します。

横長の画像なのに正方形の寸法を指定すると、読み込み後の比率との食い違いが起きます。画像を差し替えたときは、ファイルだけでなく寸法指定も確認します。スマホ用に別の切り抜きを使う場合も、表示する画像に合う領域を確保する必要があります。単に数値を入れれば終わり、ではありません。

開発者ツールなどで読み込みを遅くし、画像が出る前後で文章やボタンが動かないかを見ます。広告や後から表示する部品にも同じ視点が使えます。私なら、最初から全部見える速い環境だけで合格にしないようにしたいです。読む途中の落ち着きも、サイトの使いやすさですね。