写真が出るたび本文が動くとき、画像の縦横サイズを指定しよう

工房紹介の文章を読み始めた途端、写真が現れて本文が下へ動く。写真の表示後だけを見ていると、こうした変化を見落とします。画像がまだ届いていない段階でも、置き場所の比率を伝えておきましょう。

架空の染物工房のページで、横1200ピクセル、縦800ピクセルの写真を本文に載せる場面を考えます。写真全体を表示する例です。決まった高さの枠へ切り抜くデザインや、異なる構図の画像を切り替える処理は扱いません。

写真の実寸と、ページ内で見せる幅を分ける

最初に画像ファイルの情報を開き、幅と高さを確認します。この模擬例では1200と800なので、幅と高さの比は3対2です。見た目で推測せず、実際に使うファイルから数字を取ってください。

ページ内で600ピクセル幅に見せるとしても、画像ファイルそのものが600ピクセルになったわけではありません。元の寸法と、画面上の表示寸法は分けて考えます。比率を保って600ピクセル幅で表示するなら、高さは400ピクセルに相当します。

画像の圧縮や通信時間を改善する作業とも区別しましょう。今回の中心は、写真が表示されるまで空けておく場所です。読み込みを速くしただけで、領域の指定が不要になるとは考えません。

imgに、ファイルに合う二つの寸法を入れる

画像を置くHTMLにwidthとheightを追加します。次はbody内に入れる断片です。studio.jpg は説明用の名前なので、手元にある1200×800の練習画像へ置き換えてください。画像ファイルはこの記事には付属しません。

<img class="studio-photo" src="studio.jpg"
     width="1200" height="800"
     alt="染めた布を長い作業台に広げた工房の室内">

altの文章も、実際の画像とページで伝える内容に合わせます。模擬の写真説明をそのまま別の画像へ付けないでください。判断に迷ったら、画像の役割からaltを決める記事を参照できます。

MDNのimg要素の説明では、widthとheightを指定し、読み込み前に領域を確保することでレイアウトのずれを軽減する方法を確認できます。二つの属性へ、単位を付けない整数で実寸を記入します。

CSSでは、幅に合わせて高さも変えられるようにする

HTMLの寸法だけを足して、狭い画面で大きすぎる表示にならないよう、写真のCSSも確認します。次を練習ページのスタイルへ追加します。HTMLとこのCSSを組み合わせ、前の節で示した写真を読み込む例です。

.studio-photo {
  display: block;
  max-width: 100%;
  height: auto;
}

この例では、写真が親の幅を超えないよう上限を付け、高さは縦横比に応じて変わるようにします。HTMLの寸法を消してレスポンシブ対応するのではなく、寸法と表示用のCSSを組み合わせます。

既存CSSに固定の高さがある場合は、追加した指定が使われているかも調べてください。写真を全体表示したいのに幅だけ縮み、高さが固定のままなら、今回の例とは異なる条件になっています。画面上の幅だけで成功と判断しないようにします。

間違った比率の指定を、写真の差し替え時に残さない

横1200、縦800の写真へ、以前使っていた正方形のwidthとheightを残すのは避けます。読み込み前に想定した形と、実際の写真の形が違うと、場所の確保が意図どおりにならないことがあります。

差し替えるときは、ファイル名、幅、高さ、altを一組で見直してください。前の写真と同じ表示幅にしたい場合でも、元の写真が縦長に変われば高さの扱いは変わります。

なお、文章が動く原因は画像だけではありません。今回の指定後もずれる場合は、動いた箇所とタイミングを記録し、後から追加される要素などを別に調べます。この修正でページ全体のずれがなくなるとは断定しません。

画像の読み込み前後で、本文の位置を比べる

画像を一枚選び、寸法を確かめて二つの属性を直します。広い画面と狭い画面で、はみ出しと写真の比率を見た後、ブラウザーの通信速度を遅くする機能が使えれば、キャッシュを無効にして読み込み直します。

写真の下の文章がどこから表示されるかを、変更前後で比べて記録しましょう。すぐ画像が出る条件しか試せなかった場合は、遅い読み込みは未確認と残します。幅ごとの配置も見直すなら、レスポンシブCSSの無料レッスンを参照できます。