はてなブログでAMP CSSを設定するときに、気をつけなければいけないCSSの書き方
前回の記事では、はてなブログの記事（HTML）に関する、気をつけておきたいことを紹介しました。
今回は、はてなブログのAMP配信で設定できるようになったCSSの設定についてです。
記事、つまりHTMLに関しては、はてなブログ側がほとんど自動で変換してくれるます。ですが、CSSに関してはユーザー自身で設定しなくてはいけません。そしてAMPのCSSには、HTML同様に使用の禁止や、制限されているものがあるのです。
CSSを設定するときは、これらに注意しなければいけません。今回はその、はてなブログのAMPでCSSを設定するときに、気を付けなければならないことについての記事です。
スポンサーリンク
最初に
前回の記事にも書いていますが、AMPはまだ開発途中のものです。
なのでAMPのCSSの仕様も突然変わることも想定できます。その場合、記事の内容が公式ドキュメントとは違う場合もあります。
その点をあらかじめ、ご了承ください。
スタイル設定（CSS）の注意点
先ほども書きましたが、AMPのCSSには使用を禁止されている、または制限されているものがあります。
そして、はてなブログのAMPでCSSを自身で設定するとき、記事（HTML）のように自動で変換などをしてくれることはありません。これらはユーザー自身で注意しなければいけません。
これらを間違ってエラーになると、正しくブログが表示できない危険性があります。なので、エラーをおこさないように十分注意して下さい。
詳しいことは AMPプロジェクトのページに記載されていますので、一度目を通しておくことをお勧めします。
リンク：AMP - a web component framework to easily create user-first web experiences - amp.dev
一応、はてなブログのAMP CSSで注意する部分だけをざっと書き出してみると、以下のものになります。
- ■
@charset@import - 使えません。@規則で使えるものは以下の4つです。
@font-face@keyframes@media@supports
- ■
!important - 使用禁止です。
- ■
filter - 使用禁止です。
- ■
-amp-やi-amp-で始めるクラス名やタグ名 - 使用禁止です。
- ■
amp-で始まる要素に疑似クラス、疑似要素 amp-で始まる要素に:hoverや::beforeなどの疑似クラス、疑似要素は使ってはいけません。- ■
transition@keyframes - 制限があります。以下のプロパティしか使えません。
opacitytransform-webkit-transformなどベンダープレフィックス付きtransform
- ■
overflowoverflow-xoverflow-y - AMPではドキュメント中にユーザー定義のスクロールバーは使えないため、
autoとscrollは設定することはできません。*1 - ■
*:not() - ユニバーサルセレクタ(
*)と、否定疑似クラス(:not())は、使わないほうがいいです。*2
あとbehaviorと-moz-bindingが使えないなどもあります。
逆に言えば、これら以外のことはだいたい設定できます。AMPのオリジナルタグであるamp-imgに直接スタイルを設定することもできます。
そして、はてなブログで特に注意したいのは、CSSの容量の上限が50Kbyteです。
はてなブログのAMPに書き込めるCSSの容量は、最大でも約43キロバイトほど
AMPでは、デザインとしてのCSSを書き込める容量は最大50Kbyte（キロバイト）*3と決まっていて、これを超えるとエラーになります。
はてなブログのAMPも50KB（キロバイト）を超えるとエラーとなるのですが、はてなブログの場合は書き込むCSSが50KB以下の45KBでもエラーが出ます。
これははてなブログには前もって表示用のデフォルトのCSSが書かれているためです。はてなブログユーザーが書き込めるCSSは、このデフォルトのCSSの後に挿入されることになります。
このデフォルトのCSSは容量が約6.28KB（6278byte）ほどあります（時点）。
また細かく言えばCSSの前後には空白部分もあり、おそらくこの空白部分も容量として計上されるので、約6.3KBほどの容量がすでに使われていることになります。
つまり、書き込むCSSはこの容量を差し引いた容量以内で収める必要があります。
あまりないとは思うのですが、はてな運営側からデフォルトのCSSに追加などをして容量が増えることも考えられますので、書き込むCSSはある程度余裕を持たせて、最大で約40から42KBほど、ギリギリでも43KB以下にするのが良いと思います。
ところで、50KBといってもどれぐらいか分かりにくいと思います。
50KBがどれくらいかとは表しにくいのですが、半角英数字記号が1文字1バイトですので、単純計算で5万字が50KBだと言えます。
つまり、はてなブログのAMP CSSでは、オリジナルで最大約4万3千字ほどスタイル設定ができると言えます。
ちなみに、はてなブログのテーマカスタマイズ用に公開しているboilerplateで約21KB（圧縮して約10KB）。はてなユーザーが作成したテーマで、この記事執筆時点で1番インストールされていると思われるInnocentで約37KB（圧縮して約23KB ）あります。
このように容量に制限があるAMPのCSSでは、CSSを圧縮することを強く推奨します。CSSの圧縮については「CSS 圧縮」と検索するといっぱい出てきますが、オススメのサイトはRefresh-SFです。
こちらのサイトでは圧縮前（Input）と圧縮後（Output）のバイト数も計算してくれるで、バイト数のチェックも簡単にできます。
リンク：Refresh-SF - Online JavaScript and CSS Compressor
AMP CSSが正しく設定できているかのチェックする方法
このように、いろいろと制限があるAMPでは、CSSが正しく設定できているかチェックすることも重要になってきます。
AMPが正しく設定できているか確かめる方法は、いくつか方法があります。
参考リンク：AMPが正しく設定できているかチェックする3つの方法 | 海外SEO情報ブログ
その中でも、もっとも手軽なのはGoogle Chromeのデベロッパーツールを使った方法です。
確認方法は簡単で、ページURLの末尾に「#development=1」を付けてページを表示させ、Windowsなら【Ctrl +
Shift + i】、Macなら【Cmd + Opt + i】を押すなどしてGoogle Chromeのデベロッパーツールを起動して確認するだけです。
ちなみに、はてなブログでは「記事ページURL + ?amp=1#development=1」としてページを表示させたら、デベロッパーツールで検証できます。
エラーがあれば「Console」に出るのですが、右上にもエラーがある旨を知らせるアイコンも出るので、非常に分かりやすいです。
また、オンラインでAMPにエラーがないかチェックしてくれるツールも、公式のAMPプロジェクトが公開しています。
リンク： https://validator.ampproject.org/
こちらにAMP用URL（記事URL + ?amp=1）を貼り付けるだけで、そのページにエラーがないかどうか検証してくれます。
参考リンク：AMP HTMLの有効性を検証するウェブUI版の公式バリデーションチェックツール | 海外SEO情報ブログ
最後に
以上がCSSについてです。
使用禁止や使用制限、CSSの容量といった制限が多くあるので、少々ややこしいですが、CSSによるデザイン自体は自由度があり、いろいろできそうな印象です。容量の制限がありますが、はてなブログのAMP配信はサイドバーなどがないため、けっこうCSSを削れます。
それでも、エラーにならないように気をつけなといけない部分は、けっこうあります。AMPのCSSは、あくまで自己責任でお願いします。
次回は、そんなCSSの設定に役に立つかもしれない、超簡単なサンプルをいくつかご紹介したいと思います。
※↓前回の記事です。
スポンサーリンク
