サポートされる CSS

他のウェブページと同様に、AMP ページは CSS でスタイル設定されますが、外部のスタイルシートを参照することはできません（カスタムフォントを除く）。また、パフォーマンス上の理由から特定のスタイルが許可されていません。たとえば、インラインのスタイル属性は使用できません。

すべてのスタイルはドキュメントの先頭で指定する必要があります（ページへのスタイルの追加に関する記事をご覧ください）。ただし、CSS プリプロセッサとテンプレートを使用して静的なページを作成し、コンテンツを管理しやすくすることができます。

AMP コンポーネントには、レスポンシブなページを簡単に作成できるように、デフォルトのスタイルが用意されています。これらのスタイルは amp.css で定義されています。

許可されないスタイル

次のスタイルは AMP ページでは許可されません。

許可されないスタイル	説明
インラインのスタイル属性	すべてのスタイルはページの `<head>` で `<style amp-custom>` タグ内に定義する必要があります。
`!important` 修飾子	この用法は許可されていません。これは AMP で要素のサイズ設定ルールを有効にするための必須要件です。
`<link rel="stylesheet">`	カスタムフォントを除いて許可されていません。
`-amp-` クラス名、`i-amp-` タグ名	作成者のスタイルシートで、クラス名を文字列 `-amp-` で始めることはできません。この文字列は AMP ランタイムが内部で使用する予約文字列です。また、ユーザーのスタイルシートで `-amp-` クラスや `i-amp` タグの CSS セレクタを参照することはできません。

制約のあるスタイル

次のスタイルは許可されていますが、サポートする値について制約があります。

制約のあるスタイル	説明
`transition` プロパティ	GPU アクセラレーションが可能なプロパティのみ（現在は `opacity` 、`transform` 、`-vendorPrefix-transform`）。
`@keyframes {...}`	GPU アクセラレーションが可能なプロパティのみ（現在は `opacity`、`transform`、`-vendorPrefix-transform`）。

カスタムフォントの例外

AMP ページでは外部のスタイルシートを使用できませんが、カスタムフォントは例外です。

詳しくは、AMP のカスタムフォントをご覧ください。

CSS プリプロセッサを使用する

プリプロセッサで生成される出力は、他のウェブページと同様に AMP でも機能します。たとえば、amp.dev のサイトでは Sass を使用しています（Grow を使用して、 amp.dev サイトを構成する静的な AMP ページを作成しています）。

プリプロセッサを使用する場合は、追加する対象に特に注意を払い、ページで使用するものだけを読み込むようにしてください。たとえば、head.html には、必要なすべての AMP マークアップと、*.scss ソースファイルからのインラインの CSS を含めます。また、サイトの多くのページで埋め込みの YouTube 動画を使用できるように、amp-youtube のカスタム要素のスクリプトも指定します。



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

上記のコードがフォーマットされた AMP HTML にどのように変換されるか確認するには、amp.dev で任意のページのソースを表示してください（Chrome では、右クリックして View Page Source をクリックします）。

Written by @Meggin
with contributions from @pbakaus , @CrystalOnScript , @bpaduch , @choumx

サポートされる CSS

許可されないスタイル

制約のあるスタイル

カスタム フォントの例外

CSS プリプロセッサを使用する

カスタムフォントの例外