AMP はメディアクエリ要素クエリの両方をサポートしており、また、個別の要素のレイアウトを制御する便利な機能も備えています。layout 属性を使用すると、完全なレスポンシブ デザインの適用と作成が、CSS だけを使う場合よりもはるかに簡単になります。

レスポンシブな画像を簡単に作成

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

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

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

layout 属性

layout 属性を使うと、画面上で要素をどのように表示するかを 要素ごとに簡単に制御できます。こうした制御の多くは CSS だけでも実現できますが、 その場合は指定が大変になるほか、さまざまな CSS ハックが必要になります。代わりに layout 属性をお使いください。

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

layout 属性には以下の値を使用できます。

レイアウトの種類 幅 / 高さ
の指定
動作
nodisplay 不要 要素は表示されません。このレイアウトはすべての AMP 要素に適用できます。このコンポーネントは、表示スタイルが「なし」の場合のように、画面上で占有するスペースがありません。この要素はユーザーの操作(amp-lightbox など)で表示されることを想定しています。
fixed 必要 要素は固定の幅と高さを持ち、レスポンシブではありません。ただし、amp-pixel 要素と amp-audio 要素は例外です。
responsive 必要 要素の幅はコンテナ要素の幅と同じになるように調整され、高さも要素の width 属性と height 属性によって指定されるアスペクト比になるよう自動的にサイズ変更されます。このレイアウトは amp-imgamp-video など、ほとんどの AMP 要素に適しています。使用できるスペースは親要素によって決まりますが、max-width CSS を使ってカスタマイズすることもできます。

: "layout=responsive" の要素には、本来の所定のサイズはありません。要素のサイズはコンテナ要素によって決まります。AMP 要素を確実に表示するには、コンテナ要素に width と height を指定する必要があります。コンテナ要素に "display:table" を指定しないでください。指定すると AMP 要素の display 属性がオーバーライドされ、AMP 要素が不可視になります。

fixed-height 高さのみ必要 要素は使用できるスペースを占有しますが、高さはそのまま変更されません。このレイアウトは、水平に配置されるコンテンツを含む要素(amp-carousel など)に適しています。width 属性については、指定しないか、または auto に設定する必要があります。
fill 不要 要素は、幅と高さの両方について使用できるスペースを占有します。つまり、fill に設定した要素のレイアウトはその親と同じになります。要素を親コンテナいっぱいに表示するには、親コンテナに `position:relative` または `position:absolute` を指定しておきます。
container 不要 この要素では、通常の HTML の div のように、子要素でサイズを定義できます。このコンポーネントは、それ自体は特定のレイアウトを持たず、コンテナとして機能することが想定されています。子要素は直ちにレンダリングされます。
flex-item 不要 親がフレキシブル コンテナ(display:flex)の場合、この要素、およびこの要素の親に含まれる他の要素は、親コンテナの残りのスペースを占有します。要素のサイズは、親要素と、display:flex CSS レイアウトに沿ってその親要素内に含まれる他の要素の数によって決まります。
intrinsic 必要 要素は使用できるスペースを占有し、高さは要素の本来のサイズか CSS による制限(max-width など)に達するまで、width 属性と height 属性で指定されたアスペクト比で自動的にサイズ変更されます。width 属性と height 属性を指定する必要があります。このレイアウトは、amp-imgamp-carousel など、ほとんどの AMP 要素に適しています。使用できるスペースは親要素によって決まりますが、max-width CSS を使ってカスタマイズすることもできます。responsive とは異なり、このレイアウトには本来の所定の高さと幅が存在します。このことが最もよくわかるのは float が指定された要素内です。responsive のレイアウトでは 0x0 がレンダリングされますが、intrinsic のレイアウトでは、本来の所定のサイズか CSS による制限のどちらか小さいほうを上限にサイズ変更されて表示されます。

width や height が定義されていない場合

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

  • amp-pixel: width と height の両方がデフォルトで 0 に設定されます。
  • amp-audio: デフォルトの width と height はブラウザから推測されます。

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

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

ルール 推測されるレイアウト
height は設定されているが、width は設定されていないか auto が指定されている fixed-height
sizes 属性とともに、width 属性か height 属性が設定されている responsive
width 属性または height 属性が設定されている fixed
width 属性も height 属性も設定されていない 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>