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

AMP では、これまで style 属性が使えませんでした。使ってしまうと、もれなく AMP エラーが出ていました。

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

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

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

すると、このように表示されます（このページは、AMP ページです）。

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 つは許可されていません。

• !important の使用。
• -amp- と i-amp をセレクターに指定。
• 一部のフォントを除き <link rel=”stylesheet”> でのスタイルシートの読み込み。

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

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

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

• Supported CSS
• Style & layout
• Add custom fonts

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

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

執筆時点では、transition は opacity と transform のみが対象と書かれています。しかし、color などに指定しても効きます。

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

.sample:hover {
  color: blue;
}

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

@keyframes も opacity と transform のみが対象と書かれています。ただ、filter や clip-path を指定しても AMP エラーが出ることなくアニメーションが動きます。@keyframes で clip-path が動く様子は、画像を徐々に表示する CSS アニメーションでご覧いただけます。また、AMP にキャッシュされているページでも動いています。

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

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