WebサイトをAMP対応させる過程で「AMP対応ページの見た目をデザインする」こともあると思います。私はAMPのドキュメントにある通り「<head></head>」内に「<style amp-custom></style>」を使ってCSSのスタイルをインラインで書いていきました。
例えば下のような感じですね。
<style amp-custom> body{ background-color: #F3F1E8; } </style>
調子よくCSSを書いていましたが、AMP対応に問題がないかChromeブラウザでコンソールを開くと、CSSの書き方についていくつかエラーが表示されていました。
AMP対応ページのURLの後ろに「#development=1」を付けてコンソールを開くと、エラーがあればその原因や解決方法などが表示されます。
どんな原因でエラーがあって、どう解決すればいいのか。今後似たようなことで詰まった時に見直したいと思いましたので、以下にまとめました。
CSSが長すぎる
「モバイル表示用のCSSをそのままAMP用のCSSに流用してしまえばいいかな」と思ってやってみたんですが、下のようなエラーが表示されました。
エラー内容
he author stylesheet specified in tag 'style' is too long - we saw 52220 bytes whereas the limit is 50000 bytes. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#maximum-size)
原因
英文を読めばエラーの原因がわかるんですが、端的に表現するとCSSが長すぎました。案内されているドキュメントにも以下のように書かれています。
It is a validation error if the author stylesheet is larger than 50,000 bytes.
つまり「<style amp-custom></style>」内に書けるCSSは50,000Bytes(バイト)＝50KB(キロバイト)までなんですね。
解決方法
CSSは50KB(キロバイト)以下に減らしましょう。要らない改行とかスペースなどを削除してminify（軽量化）などするといいかもしれないです。
Gulpなどを使うとminify作業を補助してくれるので、機会があれば以下のページをご参考ください。
@Charsetは使えない
CSSファイルの先頭でよく見るような文字コードの指定をしていました。
@charset "UTF-8";
エラー内容
CSS syntax error in tag 'author stylesheet' - saw invalid at rule 'charset'.
原因
「@charset」は使えないみたいですね。
解決方法
「@charset」は削除しましょう。
Gulpを使って自動で削除してもいいかもです。以下のページをご参考ください。
Sassを使ってコンパイルすると、毎度この記述が入っていちいち消すのが地味に手間だったりします。
!importantは使えない
CSSの適用の優先度を高めるために「!important」を使わざるを得ないこともあると思います。
margin: 1rem 0 !important;
エラー内容
The text (CDATA) inside tag 'author stylesheet' matches 'CSS !important', which is disallowed. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets)
原因
例によってエラーで案内されているドキュメントを読み進めると、以下のように書かれていました。
Usage of the !important qualifier is not allowed. This is a necessary requirement to enable AMP to enforce its element sizing invariants.
「!important」は使えないけど、AMP対応用に読み込むことになる「https://cdn.ampproject.org/v0.js」ファイルには、いくつかCSSが書かれていて「!important」が使われています。
「!important」が使われている例
.-amp-replaced-content {
padding: 0!important;
border: none!important;
}AMP用に使うから「!important」は他では使わないでね、という意味かな・・・
解決方法
「!important」は削除しましょう。
-amp-で始まるクラス名の指定はできないし、上書きもできない
AMPページに適用される専用のCSSプロパティをカスタマイズしたいな～と思って「-amp-」で始まるプロパティを上書きしようとしました。
例えば・・・
.-amp-fill-content {
text-align:center;
}や
.-amp-replaced-content{
right:0;
}などですね。上記のような記述をすると、以下のようなエラーが出ました。
エラー内容
The text (CDATA) inside tag 'style amp-custom' contains 'CSS -amp- class name prefix', which is disallowed.
ドキュメントを読むと、以下のように書いてありました。
Class names, in author stylesheets, may not start with the string -amp-
つまり「-amp-」から始まるClass名は指定できないようですね。
解決方法
今のところ、使わないようにするしかないですね。AMPページのカスタマイズは難易度高い、と感じますね。
他にもCSSの書き方についてはいろいろあるよ
私個人的には、これから複数のWebサイトでAMP対応の機会があるので「このエラー初めて見たな～」という事もあると思います。「これは今後も覚えておこう！」という内容は、都度追記して行こうかな～と考えています。
CSSの書き方について「これは使ってもいい」「これは使わないで」という内容はおおよそドキュメントにまとまっています。
今回私が書いた内容とは別のエラーが出ている場合や、解決方法がわからない場合はドキュメントに書かれているかもしれませんので、ご参考ください。
このページを共有する