AMP

体裁とレイアウトの変更

体裁の変更

AMP ページはウェブページであるため、ページやその中に含まれる要素のスタイリングには、必ず共通の CSS プロパティを使用します。要素は、<head> 内の <style amp-custom> という埋め込みスタイルシートに含まれるクラスまたは要素セレクタを使ってスタイリングしてください。

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

各 AMP ページで使える埋め込みスタイルシートとインラインスタイルは 1 つだけで、使用できないセレクタもいくつかあります。スタイリングの詳細については、こちらをご確認ください

レイアウトの制御

AMP は厳密な規則に従って、ページ上に要素を配置します。通常の HTML ページは CSS を使って要素を配置することがほとんどですが、AMP ではパフォーマンスを上げるために、すべての要素のサイズを最初から明示的に設定する必要があります。

AMP ページのレンダリングやレイアウトの方法、レイアウトの変更方法についてはレイアウトの制御方法をご覧ください。