AMP には、特有の layout 属性があります。
この layout 属性は、要素をどのように表示するかを指定するもの。
AMP コンポーネントに指定でき、 CSS を書かずとも思い通りのレイアウトにできます。
これまで layout 属性 には、 7 つの値がありました。
- nodisplay
- fixed
- responsive
- fixed-height
- fill
- container
- flex-item
ここに 8 番目の値として、 intrinsic が追加されました。
この intrinsic について、ご紹介します。
使い勝手の良いレスポンシブのレイアウト
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 。
こんな感じで覚えるといいかもしれません。
layout 属性の参考情報
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 のアドセンス広告を最適化！画面幅に合わせてサイズを変更」にて、説明しています。
ご興味のある方は、ご一読ください。