AMP の layout 属性に intrinsic が追加

AMPのlayout 属性に追加されたintrinsicの解説

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

この layout 属性は、要素をどのように表示するかを指定するもの。

AMP コンポーネントに指定でき、 CSS を書かずとも思い通りのレイアウトにできます。

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

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

ここに 8 番目の値として、 intrinsic が追加されました。

この intrinsic について、ご紹介します。

使い勝手の良いレスポンシブのレイアウト

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

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

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

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

ただ、常に親要素の幅と等しくなることには、欠点もあります。

もし、画像に指定すると、画像の本来のサイズより拡大してしまい、画像が荒くなる恐れがあります。

画像に responsive を指定したのが、下の動画です。

画像の幅は 600px (高さは 400px )ですが、親要素の最大幅 1000 pxまで拡大しています。

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

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

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

つまり、予め 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 のアドセンス広告を最適化!画面幅に合わせてサイズを変更」にて、説明しています。

ご興味のある方は、ご一読ください。