親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

AMPのcssを別ファイルに分けて記述する方法

AMPを記述する際のCSSの書き方

AMPでHTMLを記述する際、CSSは基本的に外部ファイルに分けて記述することはできませんよね。
例えば以下の書き方でスタイルシートを読み込もうとするとエラーが発生します。

<link rel="stylesheet" href="/css/test.css">

ということで、基本的にはスタイルを当てたい場合はタグにインラインで指定するか、headタグ内に

<style amp-custom>
.body {
  font-size: 16px;
}
</style>

の記述することになります。
AMPのファイルが1つであれば、まぁ我慢できますが、複数ファイルがある場合はやはり共通のファイルにまとめたいですよね。

テキストファイルとして読み込ませる

スタイルシートではなく、テキストファイルとして読み込ませれば外部ファイルとして分けて記述できます。
つまり、「」として読み込ませるのではなく、
」内に文字列として出力させるのです。

例えばPHPだと以下でしょうか。(test.cssファイルのパスはサンプルです。test.cssファイルが/css配下に配置されていると仮定します。)

<style amp-custom>
  <?php include="/css/test.css" ?>
</style>

Java + thymeleafだと以下ですかね。

<style amp-custom="">
  <?php include="/css/test.css" ?>
</style>

このようにすれば、ページを開いた時にCSSファイルを読み込ませるのではなく、予めCSSファイルの内容が展開されてからページが開かれることになるので規則に反せずエラーにならないのです。
他の言語でも同じようにHTML側でファイルを直接読み込ませる方法はあると思うので、stylesheetとして読み込ませるのではなく、テキストファイルとして読み込ませましょう。