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 の指定が、柔軟になりました。
HTML への直接の指定は避ける
ただ、AMP で使えるようになっても、HTML へ直接 style 属性を指定するのは避けるべきです。
理由は、CSS の不要な重複につながるため。何度も何度も同じ指定があるのは、無駄でしかありません。また、メンテナンス性が大幅に低下する恐れがあります。可能な限り使用しないのが堅実です。
尚、通常ページでも、できるだけ HTML に style 属性を使わないのが無難です。PageSpeed Insights は、非推奨としています。
AMP における CSS の制限
style 属性は使えるようになりましたが、AMP では CSS に関するいくつかの制限があります。
まず、許可されている CSS のサイズは、75 キロバイトまでです。わずかでも超えてしまうと、AMP エラーが出ます。
ただし、<style amp-keyframes>
内に書く CSS は、サイズ制限の対象外です。
また、下記の 3 つは許可されていません。
!important
の使用。-amp-
とi-amp
をセレクターに指定。- 一部のフォントを除き
<link rel=”stylesheet”>
でのスタイルシートの読み込み。
いずれも使ってしまうと、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 |
|
参考ページ
AMP の CSS に関する詳細な情報は、下記のページでご覧いただけます。
いずれも日本語に翻訳されたページがありますが、執筆時点では最新情報が反映されていません。翻訳ページには古い情報が書かれている可能性があるため、注意が必要です。
また、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
)をかけて赤から白に変化します。
color に効く
@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 にて解説しています。