AMP の layout 属性に intrinsic が追加

AMP には、特有の layout 属性があります。

この layout 属性は、要素をどのように表示するかを指定するもの。AMP コンポーネントに指定でき、CSS を書かずとも思い通りのレイアウトにできます。

これまで layout 属性 には、7 つの値がありました。

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

ここに 8 番目の値として、intrinsic が追加されました。この intrinsic について、ご紹介します。

AMP の layout 属性に追加された intrinsic は、responsive に似ています。

これまでもあった responsive は、下記の特性を持っています。

• 指定した要素の幅は、常に親要素の幅と等しくなる。
• 同時に指定するwidth と height と同じ縦横比を維持する。

その名の通り、簡単にレスポンシブに対応できます。

ただ、「常に親要素の幅と等しくなる」ことには、欠点もあります。もし、画像に指定すると、画像の本来のサイズより拡大してしまい、画像が荒くなる恐れがあります。

画像に responsive を指定したのが、下の動画です。画像の幅は 600px（高さは 400px）ですが、親要素の最大幅 1000 pxまで拡大しています。

画像を荒くしないためには、CSS の max-width の指定が必要です（sizes 属性も有効な方法）。

一方、新たに追加された intrinsic は、下記の特性を持っています。

• 指定した要素の幅は、基本的に親要素の幅と等しくなる。
• ただし、指定した要素の本来の幅以上には拡大しない。
• 同時に指定するwidth と height と同じ縦横比を維持する。

つまり、予め CSS の max-width が指定されている responsive といった感じ。

例えば、サイズが 600 x 400px の画像に intrinsic を指定するとします。そして、親要素の幅は、最大 1000px の可変とします。もし、親要素の幅が 600px 以下であれば、画像の幅は親要素の幅と同じです。しかし、親要素の幅が 600px を超えると、画像の幅は 600px で維持されます。responsive とは異なり、画像の本来の幅 600px より大きくなりません。

実際に、上記の例と同じ指定をしたのが、下の動画です。

CSS の max-width の指定をせずとも、画像が荒くなることがありません。もちろん、<amp-img> 以外でも活躍します。とても簡単に、要素に適したレスポンシブレイアウトにできるのが intrinsic です。

子は常に親に従うのが responsive 。子はある程度まで親に従い、ある時期を境に自立するのが intrinsic 。こんな感じで覚えるといいかもしれません。

intrinsic を含む AMP の layout 属性の詳細は、Layout & media queries で確認できます。

また、Demonstrating AMP layouts をご覧になると、layout 属性の 8 つの値の動作を視覚的に把握できます。

その他、AMP 公式の YouTube でも解説されています。

尚、YouTube の最後では、AMP 特有の media 属性にも触れています。media 属性とは、CSS のメディアクエリを HTML で指定するもの。

例えば、Google AdSense に media 属性と layout 属性を一緒に使うと、こんなことができます。

• スマホでは「記事内ネイティブ広告」のような、画面幅いっぱいの広告を表示。
• タブレットや PC では、横長の広告を表示。

デバイスのサイズに合わせて、広告のサイズを切り替えられます。

やり方は、AMP でのアドセンス広告のサイズを画面幅に応じて変更する方法にて説明しています。ご興味のある方は、ご一読ください。