amp-layout

Description

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.

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive container

説明	任意の要素に 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.
    </svg>
  </amp-layout>

属性

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

検証

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

さらに支援が必要ですか？

このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。

Stack Overflow にアクセスする

バグや不足している機能がありますか？

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub にアクセスする