The amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the layout.

説明 任意の要素に AMP の高度なレイアウト機能を適用できる汎用の多目的コンテナ要素。
サポートされるレイアウト container、fill、fixed、fixed-height、flex-item、intrinsic、responsive


amp-layout コンポーネントを使用すると、任意の要素にアスペクト比ベースのレスポンシブ レイアウトを適用できます。amp-layout コンポーネントは、既存の AMP コンポーネントの layout 属性と同様の機能を果たしますが、任意の HTML マークアップを子としてサポートすることができます。他のサポート対象レイアウトはすべて、amp-layout と連携できます(fixed-height、fixed など)。

以下の例では、amp-layout を使用して、インライン SVG で描画した円の周囲にレスポンシブ コンテナを作成しています。

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
      Sorry, your browser does not support inline SVG.


この要素には、AMP コンポーネントに拡張された共通の属性が含まれます。


AMP 検証ツール仕様の amp-layout ルールをご覧ください。


You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub