レイアウトとメディアクエリ

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

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

レスポンシブな画像を作成するには、width と height を指定し、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="an image">
</amp-img>

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

AMP By Example のライブデモ],amp-img.url.path}}) の動作を比較したライブデモをご覧ください。

layout 属性

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

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

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

レイアウトの種類	幅 / 高さの指定	動作
`nodisplay`	不要	要素は表示されません。このレイアウトはすべての AMP 要素に適用できます。このコンポーネントは、表示スタイルが「なし」の場合のように、画面上で占有するスペースがありません。この要素はユーザーの操作（`amp-lightbox` など）で表示されることを想定しています。
`fixed`	必要	要素は固定の幅と高さを持ち、レスポンシブではありません。ただし、`amp-pixel` 要素と `amp-audio` 要素は例外です。
`responsive`	必要	要素の幅はコンテナ要素の幅と同じになるように調整され、高さも要素の width 属性と height 属性によって指定されるアスペクト比になるよう自動的にサイズ変更されます。このレイアウトは `amp-img` や `amp-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-img` や `amp-carousel` など、ほとんどの AMP 要素に適しています。使用できるスペースは親要素によって決まりますが、`max-width` CSS を使ってカスタマイズすることもできます。`responsive` とは異なり、このレイアウトには本来の所定の高さと幅が存在します。このことが最もよくわかるのは float が指定された要素内です。`responsive` のレイアウトでは 0x0 がレンダリングされますが、`intrinsic` のレイアウトでは、本来の所定のサイズか CSS による制限のどちらか小さいほうを上限にサイズ変更されて表示されます。

[tip type = "tip"] ヒント– AMP レイアウトのデモンストレーション{/ a1}ページにアクセスして、さまざまなレイアウトが画面のサイズ変更にどのように反応するかを確認してください. [/ヒント]

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

width や height が指定されていない場合、 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 を使用すると、他のウェブサイトと同様に、ページレイアウトの見え方や動作をコントロールできます。ブラウザウィンドウのサイズや向きが変わると、メディアクエリが再評価されて、その新しい結果を基に、要素が表示されるか非表示になるかが決まります。

メディアクエリを適用してレイアウトを制御する方法について詳しくは、CSS メディアクエリを使用してレスポンシブにするをご覧ください。

要素のメディアクエリ

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

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

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

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

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

Written by @Meggin
with contributions from @pbakaus