ワイヤード・パンチ

サイズが可変の画像でも、読み込み中にページをガタガタさせない方法。

文字より画像の方がファイルサイズが大きい分、Webページを開くと基本的に、画像はあとから読み込まれます。

しかし画像が読み込まれたあと、ページがその分下にずれてしまい、操作の妨げになってしまいます。

cssでimgに対して固定値によるサイズ指定がされていると、あらかじめその分大きさを確保するのでずれないのですが、最近はレスポンシブが主流なので、固定値にできない場面もあります。

広告

固定値による画像サイズ指定。

最初の写真の例だと、ハリを刺している画像の原寸の大きさは800×533です。

cssで画像に対して以下のように指定しておけば、画像が読み込まれる前後で、ページが下にずれ動くことはなくなります。

img {
	width: 800px;
	height: 533px;
}

下記のように、htmlにてimgタグに対して直接数値をすることも可能ですが、デザインに関するものですから、できるかぎり上記のようにcssにサイズを書いた方が適切と言えるでしょう。

<img src="hogehoge.jpg" width="800" height="533" />

しかし、これらの方法だと、どのような端末でサイトを開いても、サイズが固定です。

画面の大きいPCならまだしも、スマホからだと画面外に画像が飛び出してしまいます

原寸どおりのサイズ以外を指定してもいいのですが、小さいサイズだと今度は、PCから見て隙間が大きすぎるように感じてしまいます。

可変値によるサイズ指定。

imgタグを囲っているコンテナの幅に合わせて、画像を自動的に拡大したり縮小することも可能です。

img {
	width: 100%;
	height: auto;
}

cssで上記のようにしておくと、横幅はコンテナいっぱいの幅に合わせられるようになり、なおかつ高さは比率を保ったまま自動的に変化します。

比率は保たれるので、極端に横長になったり縦長になったりはしません。

しかしautoは、画像が完全に読み込み終わったあとでなければ有効になりません

つまり、画像が読み込まれる前だと、画像の原寸サイズが不明の状態なので、縦横の比率を計ることもできず、高さが0ということになります。

高さが0の状態から画像が表示されると、画像の高さ分、ページが下にずれることになります。

画像が多ければ、それだけ読み込み後ページが下へガタガタと…。

vwによるサイズ指定。

今回はスマホサイトを想定しており、端末の横幅に応じて、比率を保ったままサイズを自動的に変えるというのをやりたいと思います。

それを踏まえて、100%やauto以外で可変をするなら、vwを使うことになります。

vwは端末の横幅を表す単位であり、100vwで端末の横幅いっぱいということになります。

同様にvhは縦幅となります。

それならば、widthにはvw、heightにはvhを使うの?

いえ、そうではありません。

img {
	width: 100vw;
	height: 66.625vw;
}

今回の画像は原寸サイズが800×533なので、比率で表すと100:66.625となります。

比率をそのままwidthとheightにして、単位をvwにすると、画面横幅に応じたサイズ可変画像のできあがりです。

画像の読み込み前だろうが後だろうが、画面幅は変わらないので、vwはいつでも有効です。

ただ、100vwだと画面いっぱいに広がってしまうので、ちょっと横に隙間が欲しいなと思ったら、比率を変えて計算し直して、marginを取ればOK。

img {
	width: 90vw;
	height: 59.963vw;
	margin: 0 auto;
}

なお、比率の計算は下記のサイトを使えば楽にできます。

比率計算機 – instant tools

余談。

実は、いちいち比率を計算してvwを使うとか、そういう周りくどいのはやらなくていいのではないか、と思えてきました。

Chromeがモバイルでの不快なページジャンプを追放―スクロール・アンカリングを追加 | TechCrunch Japan

2017年の時点のChromeですでに、現在見えてない部分の画像が読み込まれても、ページがずれ動かない機能がすでに追加されていたようなんです。

ただ、見えている部分ではそうではないかもしれないので、やはりvwによるサイズ指定は無駄ではない?

あと、画像読み込みでページが下にずれ動く現象、なんて呼べばいいのでしょうか?

検索しても同様の事象がぜんぜん出てこないので、この記事のタイトルの付け方にも困りました。

Webページを読み込む時にコンテンツのずれを減らす方法 – ライブドアニュース

上記の記事だとコンテンツシフトと名付けられていましたが、コンテンツシフトというワードで検索してもぜんぜん違うことが出てくるので、一般的ではないみたいです。

むしろ、すでに誰もページずれに困ることはない時代になったのでしょうか?

いや、そんなことないはず。

屋内でも電波の悪いところはありますし、そんなところでスマホからページを表示すると、画像がなかなか出ないという状況は、いまだにあります。

こればかりは、どうしようもない。