AMP は、メディアクエリ要素クエリ の両方をサポートしているのに加えて、要素ごとのレイアウト を管理できる便利な機能をあらかじめ備えています。layout 属性を使うと、CSS だけを使う場合よりも簡単にレスポンシブ デザインへの対応や完全なレスポンシブ デザインの作成を行えます。

レスポンシブな画像を手軽に作成

レスポンシブな画像を作成するには、widthheight を指定し、レイアウトを responsive に設定します。さらに、srcset を使って、さまざまな画面サイズに基づいて使用される画像アセットを指定します。

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

この amp-img 要素は、画像の幅をコンテナ要素の幅に自動的に合わせます。また、高さについては、指定された幅と高さによって決まるアスペクト比に自動的に設定されます。試しに、このブラウザ ウィンドウのサイズを変えてみてください。

layout 属性

layout 属性を使うと、要素を画面上でどのように表示するかを、要素ごとに簡単に指定できます。こうした設定の多くは CSS のみでも可能ですが、いくつもの作業が必要となり、はるかに複雑です。そこで、layout 属性を代わりに使用します。

layout 属性でサポートされる値

layout 属性で使用できる値は次のとおりです。

レイアウト タイプ 幅と高さの指定 動作
nodisplay 不要 要素は表示されません。このレイアウトはすべての AMP 要素に適用できます。このコンポーネントは、表示スタイルが none(なし)の場合のように、画面上での占有スペースがありません。この要素は、ユーザーの操作(たとえば amp-lightbox)で表示されることを想定しています。
fixed 必要 要素は幅と高さが固定され、レスポンシブではありません。ただし、amp-pixel 要素と amp-audio 要素は例外です。
responsive 必要 要素の幅はコンテナ要素の幅に等しくなり、高さについては、幅と高さの属性によって決まるアスペクト比になるよう自動的に調整されます。このレイアウトは、amp-imgamp-video など、ほとんどの AMP 要素に適しています。使用できるスペースは親要素によって決まりますが、max-width CSS を使ってカスタマイズすることもできます。
fixed-height 高さのみ必要 要素は使用できるスペースを占有しますが、高さは変わりません。このレイアウトは、水平に配置されるコンテンツを含む要素(amp-carousel など)に適しています。なお、width 属性については、何も指定しないか、または auto に設定する必要があります。
fill 不要 要素は、幅と高さの両方について使用できるスペースを占有します。つまり、fill 要素のレイアウトはその親と同じになります。
container 不要 この要素は、子要素でサイズを定義できるという点で、HTML の div 要素とほぼ同じです。このコンポーネントは、それ自体では特定のレイアウトを持たず、コンテナとして機能することが想定されます。子要素は直ちにレンダリングされます。
flex-item 不要 この要素と、その親要素に含まれる他の要素は、親要素がフレキシブル コンテナ(display:flex)である場合に、親要素の残りのスペースを占有します。要素のサイズは、display:flex CSS レイアウトに基づいて、親要素、および親要素に含まれる他の要素の数によって決まります。

幅と高さが指定されていない場合

width または height が指定されていない場合、AMP ランタイムはデフォルトで次の値を使用します。

  • amp-pixel: 幅と高さの両方がデフォルトで 0 に設定されます。
  • amp-audio: ブラウザから推測される幅と高さをデフォルトとして使用します。

layout 属性が指定されていない場合

layout 属性が指定されていない場合、AMP では適切な値を推定しようと試みます。

ルール 推定されるレイアウト
height は指定されているが、width は指定されていない、または `auto` に設定されている fixed-height
width 属性または height 属性が sizes 属性とともに指定されている responsive
width 属性または height 属性が指定されている fixed
widthheight が指定されていない container

メディアクエリを使用する

CSS メディアクエリ

@media を使用すると、他のウェブサイトの場合と同じように、ページ レイアウトの見え方や動作を管理できます。ブラウザ ウィンドウのサイズや向きが変わると、メディアクエリが再評価され、新しい結果に基づいて要素の表示、非表示が決まります。

要素のメディアクエリ

AMP で使用できるレスポンシブ デザイン向けのもう 1 つの機能として media 属性があります。この属性はすべての AMP 要素で使用できます。グローバル スタイルシートのメディアクエリと同様に機能しますが、1 つのページ上の特定の要素にのみ影響します。

たとえば、相互に排他的なメディアクエリが定義された 2 つの画像があるとします。

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive">
</amp-img>

この場合は、画面の幅に応じて、どちらか一方が取得され、レンダリングされます。

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive">
</amp-img>