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

2017年2月26日カテゴリー : CSS コメント : 0

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

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

img {

max-width: 100%;

height: auto;

}

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

widthとmax-widthの使い方

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

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

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

.test {
     width: 100%;
     max-width: 768px;
}

.test {

width: 100%;

max-width: 768px;

}

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

.test {
     width: 768px;
     max-width: 100%;
}

.test {

width: 768px;

max-width: 100%;

}

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

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

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

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

写真素材足成【フリーフォト、無料写真素材サイト】

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<title>デモ</title>
<style type="text/css">
<!--

body {
    max-width: 1024px;
    border: 1px #ccc solid;
    margin: 50px;
}

@media screen and (max-width: 768px) {
     body {
        width: 100%;
        border: none;
        margin: 0;
    }
}

@media screen and (max-width: 480px) {
     body {
        width: 100%;
        border: none;
        margin: 0;
    }
}

img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

p {
    width: 100%;
}

-->
</style>
</head>

<body>
    <img src="test.jpg" alt="カツカレー">

    <p>
        カツカレーは、カレーライスと豚カツを組み合わせた日本の料理。カレーライスにトッピングをした最初の例である。豚カツではなく、牛カツ、チキンカツ・メンチカツ・ハムカツなどなどが用いられる場合もある。1948年（昭和23年）に、東京都中央区銀座の洋食店「グリルスイス」で生まれたと言われている。常連客だったプロ野球・読売ジャイアンツの千葉茂が「別々に食べるのは面倒だから」と注文したことがきっかけで、グリルスイスとその系列店では現在も「元祖カツカレー」と「千葉さんのカツカレー」というメニューを出している。また、それに先駆けて1918年（大正7年）に、東京市浅草区浅草（現・台東区浅草）の洋食屋台「河金」が豚カツを載せた丼飯にカレーを掛けて「河金丼」と称して提供したともいう。
    </p>
</body>
</html>

<!DOCTYPE html>

<head>

<!--

body {

max-width: 1024px;

border: 1px #ccc solid;

margin: 50px;

}

@media screen and (max-width: 768px) {

body {

width: 100%;

border: none;

margin: 0;

}

@media screen and (max-width: 480px) {

body {

width: 100%;

border: none;

margin: 0;

}

img {

width: 100%;

height: auto;

margin-bottom: 20px;

}

p {

width: 100%;

}

-->

</style>

</head>

<body>

<p>

カツカレーは、カレーライスと豚カツを組み合わせた日本の料理。カレーライスにトッピングをした最初の例である。豚カツではなく、牛カツ、チキンカツ・メンチカツ・ハムカツなどなどが用いられる場合もある。1948年（昭和23年）に、東京都中央区銀座の洋食店「グリルスイス」で生まれたと言われている。常連客だったプロ野球・読売ジャイアンツの千葉茂が「別々に食べるのは面倒だから」と注文したことがきっかけで、グリルスイスとその系列店では現在も「元祖カツカレー」と「千葉さんのカツカレー」というメニューを出している。また、それに先駆けて1918年（大正7年）に、東京市浅草区浅草（現・台東区浅草）の洋食屋台「河金」が豚カツを載せた丼飯にカレーを掛けて「河金丼」と称して提供したともいう。

</p>

</body>

</html>

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 を使っていると表示がおかしくなります。こちらで記事にしました。

画像のレスポンシブ対応でsizes属性を使う際に注意すること | Naokix.net