メインコンテンツまで移動する
FirstLayout

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

  • 公開日
  • 更新日

Akira Web デザイナー

style 属性を許可

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

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

参考：[Master feature] Support inline CSS · Issue #14072 · ampproject/amphtml

例えば、このように書いて試した AMP Playground での デモ をご覧いただけます。

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

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

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

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

HTML への直接の指定は避ける

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

理由は、CSS の不要な重複につながるため。何度も何度も同じ指定があるのは、無駄でしかありません。また、メンテナンス性が低下する恐れがあります。可能な限り使用しないのが堅実です。

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

参考：CSS の配信を最適化する | PageSpeed Insights | Google Developers

AMP における CSS の制限

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

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

ただし、2019 年 1 月より @keyframes は <style amp-keyframes> タグにも書けるようになり、この <style amp-keyframes> 内に書く CSS はサイズ制限の対象外です。

参考：AMP の第 3 の CSS 指定方法 amp-keyframes

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

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

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

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

フォント提供サービス名許可されている URL
Typography.comhttps://cloud.typography.com
Fonts.comhttps://fast.fonts.net
Google Fontshttps://fonts.googleapis.com
Typekithttps://use.typekit.net
Font Awesomehttps://maxcdn.bootstrapcdn.com または https://use.fontawesome.com

参考ページ

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

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

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

 .sample {
  color: red;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sample:hover {
  color: blue;
}

実際に transition に color を指定した デモ があります。<button> にマウスポインターを乗せれば、テキストの色が 5 秒（transition-duration が 5s）をかけて赤から青に変化します。AMP エラーにはなりません。

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

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