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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

AMP が style 属性に対応しました。その解説です。

style 属性を許可

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

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

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

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

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

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

AMP で style 属性が使えるよ!

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

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

https://search.google.com/test/amp?id=Z9naM5p4R9DUGlJ5Ab3nhQ

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

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

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

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

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

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

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

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

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

AMP における CSS の制限

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

まず、許可されている CSS のサイズは、50 キロバイトまでです。

わずかでも超えてしまうと、AMP エラーが出ます。これは、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
  • 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;
}

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

color に効く

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

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

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

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

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。