メインコンテンツまで移動する

AMP の layout 属性に intrinsic が追加

  • 公開日
  • 更新日

Akira Web クリエイター

はじめに

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

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

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

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

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

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

AMP の 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 。こんな感じで覚えるといいかもしれません。

参考情報

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 でのアドセンス広告のサイズを画面幅に応じて変更する方法 にて説明しています。ご興味のある方は、ご一読ください。

フォローする