画像のスマートフォン対応

レスポンシブウェブデザインにすると、大きな画像はパソコンのディスプレイで表示出来ても、スマートフォンで見るとはみ出してしまう可能性があります。

画像を表示するColorboxやNivo Slider等のjQueryプラグインでも同様です。

本ページではスマートフォンで見た時、画像がはみ出さないよう対応する方法を説明します。

尚、画像をホームページに表示させる方法は「画像の挿入」をご参照下さい。

画像の対応

 例えば、スマートフォンが360pxの幅しかなかった場合、画像のサイズがそれより大きいとはみ出してしまいます。

最適化されていないサイトのスマホでの画像表示例

 これを避けるため、画像は最大でもディスプレイの幅を越えないように指定します。

【スマホ用CSSファイル画像例】
img {
max-width:100%;
}

 上記により、大きな画像を幅が小さいスマートフォンで見た時でも、画面に収まるように縮小されて表示されます。

最適化されているサイトのスマホでの画像表示例

 又、imgに対してmarginで左右に余白を指定する場合、その余白分を引いた数字を指定する必要があります。例えば、margin-leftとmargin-rightで4%を指定する場合、max-widthでは92%と指定が必要です。

 尚、画像をホームページに表示させる方法は「画像の挿入」をご参照下さい。

背景画像への対応

 background-imageで背景に画像を使っていた場合、背景画像がスマートフォンの表示より大きいと以下のように切り取られて表示されます。

最適化されていないサイトのスマホでの背景画像表示例

 スマートフォンの画面に収まるように表示するには、幅をautoで指定すると共にbackground-size:100% 100%;と指定します。

【スマホ用CSS背景画像例】
#box {
width: auto;
background-image: url(test.png);
background-size:100% 100%;
}

 上記を<div id="box">等で適用すると、以下のようにスマートフォンの幅に合わせて背景画像が縮小して表示されます。

背景画像が自動的に縮小される表示例(縦横比自動)

 上記では行数によって画像の高さが変わるため、縦横比も変わってしまう可能性があります。

 縦横比を変えたくない場合は、background-size:100% auto;と指定すると以下のように表示されます。

背景画像が自動的に縮小される表示例(縦横比保持)

 縦横比は保持していますが、画像の下が途中で切れる点は留意して下さい。

 尚、背景画像をホームページに表示させる方法は「background-image/背景画像」をご参照下さい。

jQueryプラグインColorbox対応

 jQueryのプラグインであるColorboxは、画像や動画をポップアップして表示します。

 パソコン向けに最適であっても、スマートフォンで見た時に画面からはみ出してポップアップすると困ります。

 このため、JavaScript部分を以下のように記述します。

【スマートフォン向けColorboxのJavaScript記述】
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', maxWidth:"100%", maxHeight:"100%"});
});
</script>

 赤字部分を追加する事で横幅がはみ出さないようにポップアップ出来ます。

Colorboxポートレートモード表示

 maxHeightを指定しているため、ランドスケープモードで表示しても下にはみ出しません。

Colorboxランドスケープモード表示

 このままでは左下何枚目の画像かを示す表示と、画像のタイトルが重なって表示されています。一番下の灰色の文字です。この左下の表示を消すのは以下のようにします。

【何ページ目かを消すColorboxのJavaScript記述】
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', maxWidth:"100%", maxHeight:"100%", current:false});
});
</script>

 上記で以下のように何ページ目かの表示が消えるため、文字が重なる事がありません。

Colorboxで何ページ目かを消した時の表示

 尚、Colorboxをホームページに適用する方法は「Colorboxの使い方」をご参照下さい。

jQueryプラグインNivo Slider対応

 jQueryのプラグインであるNivo Sliderは、画像をスライドショーのように切り替えて表示します。

 Nivo Sliderはデフォルトでスマートフォン対応していて、通常は画面に収まるように自動的に縮小されます。

 但し、パソコンから見た時に画像のサイズを指定したい場合は、「Nivo Sliderの使い方」で説明した#sliderで指定するとスマートフォンで見た時にはみ出して表示される可能性があります。

 パソコンから見た時だけ画像のサイズを指定したい場合、以下の記述をしたCSSファイルを作成してコードをUTF-8で保存します。

【Nivo Sliderのスマートフォン向けCSSファイル】
@charset "UTF-8";

@media screen and (min-width: 768px) {
    .nivoSlider {
        width:480px;
    }
}

 赤字の部分はパソコン向け画面を表示する解像度の最小値です。解像度の幅が768px以上であれば、その下に記述したCSSが反映されます。

 緑色の部分はパソコンで表示したい画像の幅です。表示したい幅に合わせて修正して下さい。

 上記CSSファイルをHMTLの<head>と</head>の間に<link rel="stylesheet" href="作成したcssファイル名" />と追記して読み込ませます。

 これにより、パソコン画面から見ると幅480pxで表示され、スマートフォンから見ると画像がスマートフォンの幅からはみ出さない大きさに縮小されるようになります。

Nivo Sliderでのスマホ表示例

 留意点としては、CSSファイルは後から読み込んだ方で上書きされます。このため、Nivo SliderのCSSファイル読み込みの後に記述しないと反映されません。

サイト関連1

ホームページ作成「簡単!スマートフォン対応
ホームページ作成「画像のRetinaディスプレイ対応
ホームページ作成「表のスマートフォン対応
ホームページ作成「動画のスマートフォン対応
ホームページ作成「タップターゲットのサイズ調整
ホームページ作成「スマホとパソコンで表示を変える
ホームページ作成「スマートフォン対応後の確認
  • このエントリーをはてなブックマークに追加