なぜフルードイメージではmax-widthを100%にしているのか?

スマホでのネット利用者の増加により、ウェブサイトのレスポンシブ対応が必要になってきました。画像に対してはフルードイメージを導入しますが、ネットで調べると次のようなソースコードが出てくるはずです。

「これ、width を100%にしてはいけないの?」と思ったのが、この記事を書こうと思った発端です。

widthとmax-widthの使い方

ウェブサイトのレスポンシブ対応の手順として、まずは固定ピクセル幅でサイトのデザインを作成し、これを相対幅にするために%で置き換えていくと思います。%で置き換えるものは width、margin、padding といったものです。

(最近はまずモバイルのデザインを完成させておき、後からPC用のデザインを追加していく「モバイルファースト」での設計が主流であるようです。理由はPC用から先に作ってしまうと、モバイル対応させるときにPCで指定したものをいちいち無効化しなければならないからです。記述量が増えてしまうわけですね。私は理解がしやすいのでPCファーストでの設計のほうが好きなのですが。)

小さいスクリーンでは幅いっぱいに表示し、大きいスクリーンでは固定幅にしたい場合、一般的に width と max-width を使って次のように記述します。幅の最大値を指定することで、親要素からはみ出さないようにすることができます。

ところが、このソースコードは次のように記述しても同じ動作をしてしまいます。日本語の文脈的に考えるとおかしいと思うのですが。

フルードイメージをwidthで指定してもちゃんと動作します

ここから考えれば、フルードイメージを width で指定しても動作してくれそうです。

リセット用スタイルシートとして normalize.css を使用しました。

画像は無料素材で有名な「足成」さんから頂いたものを、動作確認のため縦横比をそのままに幅768pxに縮小しています。

ソースコードは UTF-8 で保存します。.html ファイルは Shift-JIS で保存しても動作しますが、content プロパティなどを使うときに文字化けを起こすことがあるので、UTF-8 で保存することを習慣にしていたほうがよいかと思います。

Google Chrome で HTML ファイルを開いたら検証ツールを立ち上げて、モバイル環境をテストするためのツールに切り替えてください。

機種の一覧から「Responsive」を選択します。

今回は Retina ディスプレイ対応を考えていないので、「Add device pixel ratio」を表示しておき1倍に設定しました。

モバイルの横幅をマウスでドラッグ&ドロップし、画像がきちんとフルードイメージ化しているかを確認してください。

max-widthではいけない場合がある

このように width でも max-width でも画像のフルードイメージ化は実現できるのですが、私の知る限りひとつだけ max-width を使用してはいけない場面があります。sizes 属性です。

画像をフルードイメージ化しておけば、とりあえずレスポンシブ対応にはなっています。ただ、改善されてきているとはいえスマホの通信速度はPCに比べて遅いため、画面よりもはるかに大きな画像をダウンロードさせるのはユーザーにとって不親切です。

そのため、最近の傾向では HTML5.1 から導入された srcset や pictere などを使い、用意された複数のサイズの画像のなかから最適な大きさを選んで表示するようになってきています。sizes 属性はメディアクエリや vw を使った画像の振り分けよりはるかに細かく制御することができますが、フルードイメージ化で max-width を使っていると表示がおかしくなります。こちらで記事にしました。

まとめ

日本語の文脈から考えると、フルードイメージ化には width を使ったほうがいいんじゃないかと思うんですけどね。ネットの情報では max-width が主流なので右にならえでもよいのですが、どなたか知っている方がいればご教示いただけるとありがたいです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP