画像やyoutube・Googleマップをレスポンシブ対応に

スポンサーリンク

スマホやタブレットもOK レスポンシブ対応

ウェブサイトをスマホやタブレットに対応させるため、画像やyoutube・Googleマップなどをデバイスの横幅に合わせて表示させるための方法をご紹介します。

スマホやタブレットの横幅に合わせて画像やyoutubeを表示させるためには、HTMLで画像を表示させるためのimg要素と、youtubeやGoogleマップを表示させるためのiframe要素をCSSで調整します。

スマホやタブレット対応は当たり前の時代に

スマートフォンの時代
最近はウェブにアクセスするためのデバイスとして、iPhoneやandroidなどのスマホや、iPadなどのタブレットがどんどん普及しています。いわしブログもPVの3割はスマホやタブレットからのアクセスですが、サイトによっては5割を超えるところもあるようです。

こうなると、PCの表示だけを考えてwebサイトを作るわけにはいきません。レスポンシブWebデザインを用いて、スマホやタブレットに対応させることは当たり前の時代になりつつあります。

また、Googleも「モバイルフレンドリーなサイトを検索結果で優先する」と公表しているので、スマホ表示に対応していないサイトはSEOや検索順位の面でも不利になります。多少敷居が高くても、ウェブサイトはレスポンシブデザインで作らないといけません。

最近のWordPressテーマは、最初からレスポンシブ対応のものが増えました。いわしが使っているブログテーマ「Stinger5」も、スマホやタブレットに対応したレスポンシブデザインです。デバイスの横幅に合わせて文字や画像を表示してくれるので、更新の時にいちいち適切な画像のサイズや文字の位置を考える必要はありません。

レスポンシブデザインでウェブサイトを作るなら、最初からレスポンシブ対応のテーマを使うのが一番簡単な方法です。しかし、中途半端なレスポンシブテーマを選ぶと、スマホで見た画像がはみ出したり、途中で切れたりする場合があります。

中途半端なレスポンシブwebデザイン

中途半端なレスポンシブwebデザインで画像を見ると、こんな感じになります。文字幅以上に画像が広がってますね。これはデバイスと画像の横幅が一致しない場合に起こる現象です。

レスポンシブデザイン未対応の画像 スマホ表示

今度はGoogleマップを表示させてみましょう。こちらもデバイスの横幅より<iframe>で指定したGoogleマップの横幅の方が大きいので、枠からはみ出したような表示になります。youtubeの場合も<iframe>を使うので、同じような表示になります。

レスポンシブデザイン未対応のGoogleマップ スマホ表示

続いてPCで表示させた場合です。ブラウザの横幅を縮めてスマホと同じようなサイズにすると、画像が切れてしまいました。youtubeやGoogleマップも同様です。横幅が小さくなっても画像の大きさは変わらないので、このような表示になります。

レスポンシブデザイン未対応の画像

ちなみにPCのブラウザを使って、そのウェブサイトがレスポンシブデザインかどうかを調べる方法があります。やり方は簡単、該当のウェブサイトを表示させてから、ブラウザの端をつまんで縮めたり広げたりしてください。横幅に応じて文字の配置や画像の大きさが変わるなら、そのウェブサイトはレスポンシブデザインで作られています。

レスポンシブデザイン対応サイト調査方法 ブラウザの端をつまむ

画像をレスポンシブ対応に

では、スマホやタブレットでも画像がはみ出したり切れたりしないように、デバイスの横幅に合わせて画像を伸縮させてみます。CSSファイル内に以下を記載してください。

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

たったこれだけでデバイスの横幅に合った画像が表示されるようになります。先ほどの方法でブラウザの横幅を変えながら、画像が伸縮するかどうか確認してみてください。

レスポンシブデザイン対応画像 横幅に合わせて表示

youtubeやGoogleマップ<iframe>をレスポンシブ対応に

続いて、youtubeやGoogleマップを表示させるための<iframe>をレスポンシブに対応させます。

youtubeやGoogleマップ埋め込み用の<iframe>を<div class=”iframe-css”>で囲んで、横幅に合わせて伸縮するようにCSSを設定します。positionプロパティは<div class=”iframe-css”>を relative で相対指定とし、<iframe>には absolute で絶対指定としています。

CSS4行目の padding-top:56.25%; は、youtubeの縦横比率に応じて変更します。16:9の動画を埋め込んだ場合は56.25%ですが、4:3だと75%になります。数値が違っても表示はされますが、周囲に余白が生じます。

Googleマップは適当な数字を入れても大丈夫ですが、どうしても比率を合わせて表示させたい場合は、「縦幅÷横幅×100」で計算した数字を入れて下さい。youtubeも同様です。例えば、youtubeで1024×768の動画を埋め込む場合の計算式は、「768÷1024×100=75」なので、padding-top:75%となります。

<iframe>レスポンシブ対応 HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/DqOWgIxALbA" frameborder="0" allowfullscreen></iframe> </div>

<iframe>レスポンシブ対応 CSS

.iframe-css {
  position: relative;
  width: 100%;
  padding-top:56.25%;
}

.iframe-css iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これで画像のimg要素と、youtube・Googleマップなどを表示させるiframe要素が、レスポンシブWebデザインに対応しました。このコードはWordPressだけでなく、MovableTypeやHTMLで作成したウェブサイトにも使えますよ。

HTMLとCSSに少し追記するだけなので、すぐに実行できます。スマホやタブレットで画像が切れたり、横幅からはみ出してしまうという方は、ぜひ一度試してみてください。

スポンサーリンク
PC用
PC用

フォローする