レスポンシブウェブデザインで画像を縮小する方法

レスポンシブウェブデザインで画像を縮小する方法

Posted at March 2,2015 12:55 AM
Tag:[CSS, Responsive]

レスポンシブウェブデザインで画像を縮小する方法を紹介します。

1.はじめに

Googleは、ページがモバイルに対応していることをモバイル検索のランキング要因として用いることを発表しました。

2015年4月21日から開始するようです。

このブログではモバイルに対応していませんが、この流れに乗り遅れないよう、そろそろレスポンシブウェブデザインに対応しようかと思います。

以前「CSSでブラウザのウィンドウサイズに合わせて画像を拡大・縮小する方法」を紹介したのですが、今回はレスポンシブウェブデザインに対応した画像の縮小方法を紹介したいと思います。

ウェブ制作に携わっている方はよくご存知の内容かと思います。

今回はこのブログのように、PC向けサイトに表示している画像をスマホやタブレットで表示したときに縮小する方法を紹介します。

なお画像がウィンドウサイズに合った表示ができないと、ウェブマスターツールの「検索トラフィック」→「モバイルユーザビリティ」の項目で「コンテンツのサイズがビューポートに対応していません」と表示されるようです。

モバイルユーザビリティ

2.レスポンシブウェブデザインで画像を縮小する

次のような、幅の異なる2枚の画像が表示されているサンプルページを用意しました。

サンプルページ

HTMLページのマークアップ

<style>
body {
    text-align: center;
}
#content {
    background-color: #ddd;
    width: 700px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}
p {
    margin: 20px;
}
</style>
<div id="content">
<p><img src="test1.jpg" /></p>
<p><img src="test2.jpg" /></p>
</div>

PCでは問題なく表示されますが、ウィンドウサイズを狭くすると画像の横幅がはみ出します。

ウィンドウを狭くしたときの表示

ウィンドウの横幅が狭くなったときに画像サイズを変更するには次のようなCSSを追加します。

@media (max-width: 700px) {
    #content {
        width: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
}

ウィンドウを狭くしたときの表示はつぎのようになります。

ウィンドウを狭くしたときの表示

「@media (max-width: 700px){...}」の部分は、ビューエリアが指定したサイズ(700px)より小さいときにブロック内のスタイルが適用される、という意味です。

この方法のメリットは、ビューエリアより狭い画像は縮小されない、という点です。

下のスクリーンショットはウィンドウサイズを狭くしたときに2つめの画像だけwidthプロパティが適用されている状態です。1つめの画像は元のサイズで表示されています。

ウィンドウを狭くしたときの表示

以上です。

viewportの設定などは省略して画像の縮小だけに特化してみましたが、認識誤り等ありましたらどこかでつぶやいてください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)