動的配信の代わりに使える、トラブル回避テク3つ

SEOならSEOパック
ご利用実績11380件 (2020/08/09現在)

[2015/01/10] (最終更新日 2018/05/15)

動的配信の代わりに使える、トラブル回避テク3つ

サイトのスマホ対応などに動的配信を導入すると、何らかの問題が起きるケースがよく見られるとし、動的配信の代わりに使える3つの方法を、Googleが紹介しています。

20150109responsivedesign

Icon vector designed by Freepik

動的配信の代わりになる3テクニック

動的配信とは、同じURL上で、デバイス別に異なるHTMLを配信する方法です。例えばスマホにはスマホ対応コンテンツを、PCにはPC向けコンテンツを、同じURL上で別々に配信することになります。

しかし、動的配信を導入したサイトがなんらかの問題を起こすケースは少なくない、とGoogleのピエール・ファー氏は語ります

ファー氏は、動的配信を使わずに別々のコンテンツを見せられる、下記の3つの代替テクニックを紹介しています。

1. JavaScriptでは、別々のJSファイルを読ませるためのif文を埋め込む

2. CSSでは、適切なCSSファイル配信のために別々のメディアクエリを使う

3. 画像には、<picture>要素やsrcset属性を活用する

ただ、2と3についてはなじみのない方も多いのではないでしょうか。次項で少々解説を加えたいと思います。

CSS:メディアクエリ機能

CSS3で採用されたメディアクエリ機能を使えば、アクセスしてきたユーザエージェントの画面サイズや解像度に応じて、適用するCSSスタイルを切り替える、レスポンシブデザインを導入することができます。

従来は、ブラウザ向け(media=”screen”)や印刷向け(media=”print”)といった、大きな区別でしかスタイルを分けることができませんでした。

しかし、メディアクエリを使えば、

  • 幅が414px以下のブラウザの場合:
    media=”only screen and (max-width:414px);”
  • 幅が800px以上の横長のブラウザの場合:
    media=”only screen and (min-width:800px) and (orientation:landscape);”

などといった、柔軟なCSSスタイルの使い分けが実現します。
現在では、様々なサンプルコードを入手することも可能です。

画像:<picture>要素、srcset属性

<img>要素やsrc属性には、CSSのメディアクエリと同様の機能がありませんが、代わりに<picture>要素やsrcset属性を使うことで、画面サイズなどの環境別に画像を配信できます。

Retinaディスプレイなどピクセル密度の異なる高解像度環境にも便利に対応できるため、参考情報やサンプルコードもどんどん整ってきています。

例えば、

  • 表示幅が320px以下で、解像度がx1の環境では photo_320_1x.png
  • 表示幅が320px以下で、解像度がx2の環境では photo_320_2x.png
  • 表示幅が320pxより大きく640px以下で、解像度がx1の環境では photo_640_1x.png
  • 表示幅が320pxより大きく640px以下で、解像度がx2の環境では photo_640_2x.png
  • それ以外の環境では photo.jpg

を配信する場合は、下記のように記述します。

<picture>
 <source
  media=”(min-width: 320px)”
  srcset=”photo_320_1x.png 1x, photo_320_2x.png 2x”>
 <source
  media=”(min-width: 640px)”
  srcset=”photo_640_1x.png 1x, photo_640_2x.png 2x”>
 <img src=”photo.jpg” alt=”Photo”>
</picture>

これらは、未対応のブラウザもあるものの、ファー氏は「近年のブラウザには非常に強力な機能になる」として使用を促しています。

この記事が役に立ったらSNSで共有してください。

SEOツール無料トライアル

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間無料!

<

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO対策FAQ

全質問一覧

最新記事

全記事一覧

カテゴリ一覧

全記事一覧

SEO Packブログ byディーボ

このブログについて
キーワード難易度チェックツール

公式SNS

Twitter

facebook

自分でできるSEOや最新のSEO対策を配信中。