AMP の layout 属性に intrinsic が追加
はじめに
AMP には、特有の layout 属性があります。
この layout 属性は、要素をどのように表示するかを指定するもの。AMP コンポーネントに指定でき、CSS を書かずとも思い通りのレイアウトにできます。
これまで layout 属性 には、7 つの値がありました。
nodisplayfixedresponsivefixed-heightfillcontainerflex-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 でのアドセンス広告のサイズを画面幅に応じて変更する方法 にて説明しています。ご興味のある方は、ご一読ください。