AMP HTML のスタイルとレイアウト

Program

今回は AMP HTML で独自のスタイルでデザインする方法についてです。

AMP はモバイルページを高速表示するプロジェクトやフレームワークです。

AMP では高速表示を実現する為に実装のルールがあり、スタイルに関しても AMP ならではのルールがあります。CSS の制約やレイアウトの為の機能が用意されており、それは外部リソースに制限や読み込みの処理をかけているからです。詳しい AMP の仕組みは下記の記事で紹介しています。

AMP | fff

AMPはモバイルページを高速表示する技術です。AMPの特徴や高速表示の仕組み、AMPを実装する方法やルールを紹介します。

カスタムスタイル

AMP で独自のカスタムスタイルを適応する時のルールがあります。CSS はstyle要素に記述し、外部ファイルのスタイルシートの読み込みやインラインのstyle属性の記述はできません。

<head>
  <style amp-custom>
    amp-img {
      border: 1px solid #666;
    }
  </style>
</head>

style要素にはamp-custom属性を設定しhead要素内に記述します。また<style amp-custom></style>は複数記述することはできず、一度だけ記述します。

また AMP ではパフォーマンスを向上させる為に一部のスタイルを制限しています。スタイルの制限は下記のようなものがあります。

スタイル説明
外部ファイルのスタイルシート読み込みAMP では外部ファイルのスタイルシートを読み込むことができません。
例外としてカスタムフォントの読み込みは可能です。
インラインのstyle属性AMP ではインラインのstyle属性は使用できません。
CSS は前述の<style amp-custom></style>に記述します。
!importantAMP では!importantを使用できません。
-amp-*クラス
i-amp-*タグ		-amp-で始まるクラス名は AMP ランタイムが使用する予約語です。ユーザーのカスタムスタイルで-amp-で始まるクラス名、i-amp-で始まるタグを CSS セレクタで参照することはできません。
translationGPU アクセラレーションが可能なプロパティopacitytransform-vendorPrefix-transformのみが使用できます。
@keyframesGPU アクセラレーションが可能なプロパティopacitytransform-vendorPrefix-transformのみが使用できます。

一部の制限はありますが AMP でも CSS を使うことでカスタムスタイルを適応し好きなデザインを実装することが可能です。

レイアウトとレスポンシブ

amp-img要素をはじめ AMP の要素ではパフォーマンスを高める為に予めheight属性やwidth属性でサイズを指定します。AMP では要素のサイズを指定してもデバイスに合わせサイズが可変するレスポンシブになるようlayout属性が用意されています。

レイアウトheightwidth説明
fixed必要必要指定した高さと幅のサイズで表示します。
fixed-height必要不要
auto		高さは指定したサイズですが幅は親要素の使用可能なスペースを占有して表示します。
responsive必要必要指定した高さと幅のアスペクトを保ちながら表示します。
fill不要不要親要素のサイズに合わせて使用可能なスペースを占有して表示します。
container不要不要サイズは子要素により定義され、指定した要素はコンテナとしてのみ機能すると見なされます。
flex-item不要不要親要素がフレキシブルの場合、指定した要素と兄弟要素でスペースを占有します。
intrinsic必要必要指定した高さと幅のアスペクト比を保ちながら表示しますが、高さは要素本来のサイズより大きくなることはありません。
nodisplay不要不要要素を表示しません。

レイアウトにfixedを指定した時は下記のようになります。

<amp-img src="sample.png" height="126px" width="240px" layout="fixed"></amp-img>

fixedは高さ幅ともにサイズを固定しレスポンシブに可変しないので上記のように指定通りのサイズになります。その為、画像の左右には余白ができています。

レイアウトにfixed-heightを指定した時は下記のようになります。

<amp-img src="sample.png" height="126px" layout="fixed-height"></amp-img>

fixed-heightは親要素のサイズに合わせスペースを占有しますが、高さは指定したサイズに固定されます。width属性は指定しないかautoにします。上記では幅は親要素のスペースを占有していますが高さは指定した 126px になります。

レイアウトにresponsiveを指定した時は下記のようになります。

<amp-img src="sample.png" height="126px" width="240px" layout="responsive"></amp-img>

responsiveは指定したサイズのアスペクト比を保ちながら、幅は親要素のサイズに合わせてスペースを占有します。

レイアウトにfillを指定した時は下記のようになります。

<amp-img src="sample.png" layout="fill"></amp-img>

fillは親要素の使用可能なスペースを占有し、親要素と同じサイズになります。親要素のpositionはrelativeかabsoluteを指定します。上記では高さは親要素のpadding20px、幅は横いっぱいにスペースを占有して画像を表示しています。

レイアウトにcontainerを指定した時は下記のようになります。

<amp-layout layout="container">
  <amp-img src="sample.png" height="126px" width="240px" layout="container"></amp-img>
</amp-layout>

containerはサイズが子要素により定義されます。div要素のようになり、containerを指定した要素はコンテナとしてのみ機能すると見なされます。上記ではのエリアが<amp-layout layout="container"></amp-layout>のエリアです。

レイアウトにflex-itemを指定した時は下記のようになります。

<amp-img src="sample.png" height="126px" width="240px" layout="flex-item"></amp-img>
<amp-img src="sample.png" height="126px" width="240px" layout="flex-item"></amp-img>
<amp-img src="sample.png" height="126px" width="240px" layout="flex-item"></amp-img>
<amp-img src="sample.png" height="126px" width="240px" layout="flex-item"></amp-img>
<amp-img src="sample.png" height="126px" width="240px" layout="flex-item"></amp-img>

flex-itemは親要素がフレキシブルの場合、レイアウトを指定した要素と兄弟要素で使用可能なスペースを占有します。その為、各要素の幅は要素数に影響されてサイズが決まります。

レイアウトにintrinsicを指定した時は下記のようになります。

<amp-img src="sample.png" height="126px" width="240px" layout="intrinsic"></amp-img>

intrinsicは指定したサイズのアスペクト比を保ちながら使用可能なスペースを占有します。responsiveと異なり高さが要素本来のサイズよりも大きくなることはなく、上記も幅はまだ占有可能なスペースが残っていますが高さが 126px になりこれ以上大きくなりません。

レイアウトにnodisplayを指定した時は下記のようになります。

<amp-img src="sample.png" layout="nodisplay"></amp-img>

nodisplayは要素を表示しないので上記のように画像は表示されません。

AMP ではメディアに関する要素のサイズを明示的に指定する必要がありますが、このようにlayout属性でレイアウトを指定することでレスポンシブにも対応したデザインを実装できるようになります。