CSS が柔軟に！AMP が style 属性のインラインスタイルに対応

style 属性を許可

AMP では、これまで style 属性が使えませんでした。

使ってしまうと、もれなく AMP エラーが出ていました。

しかし、2018 年 7 月より、AMP でも style 属性が使えるようになりました。

例えば、このように書いて試してみます。

<p style="color: red;">AMP で style 属性が使えるよ！</p>

すると、こう表示されます（ご覧になっているこのページは、AMP ページです）。

AMP で style 属性が使えるよ！

AMP ページでもAMP エラーが出ることなく、style 属性で指定した赤が文字色に反映されます。

AMP テストの検証結果は合格。

style 属性は、AMP コンポーネントにも指定が可能です。私が試した限り、指定する CSS プロパティや値に制限はありませんでした。

どこにでも、どの CSS プロパティでも、style 属性で指定できます。

AMP での CSS の指定が、柔軟になりました。

ただ、AMP で使えるようになっても、HTML へ直接 style 属性を指定するのは避けるべきです。

理由は、CSS の不要な重複につながるため。何度も何度も同じ指定があるのは、無駄でしかありません。

また、メンテナンス性が大幅に低下する恐れがあります。

可能な限り使用しないのが堅実です。

尚、通常ページでも、できるだけ HTML に style 属性を使わないのが無難です。PageSpeed Insights は、非推奨としています。

style 属性は使えるようになりましたが、AMP では CSS に関するいくつかの制限があります。

まず、許可されている CSS のサイズは、75 キロバイトまでです。わずかでも超えてしまうと、AMP エラーが出ます。

ただし、<style amp-keyframes> 内に書く CSS は、サイズ制限の対象外です。

また、下記の 3 つは許可されていません。

いずれも使ってしまうと、AMP エラーが出ます。

尚、<link rel=”stylesheet”> でのスタイルシートの読み込みを許可されている一部のフォントとは、下記の 5 つです。

外部スタイルシートの読み込みが許可されているフォントの一覧
フォント提供サービス名	許可されている URL
Typography.com	https://cloud.typography.com
Fonts.com	https://fast.fonts.net
Google Fonts	https://fonts.googleapis.com
Typekit	https://use.typekit.net
Font Awesome	https://maxcdn.bootstrapcdn.com https://use.fontawesome.com

AMP の CSS に関する詳細な情報は、下記のページでご覧いただけます。

いずれも日本語に翻訳されたページがありますが、最新情報が反映されていません。翻訳ページには古い情報が書かれているため、注意が必要です。

また、Performance recommendations に書かれている transition プロパティと @keyframes の制限は、変わった可能性があります。

例えば、transition プロパティに color などを使っても効きます。

.sample {
  color: red;
  transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

.sample:hover {
  color: blue;
}

実際に transition に color を指定したのが、下のボタンです。ホバーをすると、テキストの色が 5 秒（transition-duration が 5s）をかけて赤から白に変化します。

color に効く

@keyframes は、filter や clip-path を指定しても AMP エラーが出ることなくアニメーションが動きます。

@keyframes で clip-path が動く様子は、画像を徐々に表示する CSS アニメーションでご覧いただけます。また、AMP にキャッシュされているページでも動いています。

以前は、@keyframes で clip-path は動かなかったのに。仕様が変わったのか、CSS が効いてしまうバグなのか、調べても分かりませんでした。

また、先に少し触れましたが、2019 年 1 月より @keyframes は <style amp-keyframes> タグにも書けるようになりました。詳しくは、AMP の第 3 の CSS 指定方法 amp-keyframes にて解説しています。