AMP HTML のスタイルとレイアウトには、通常の HTML と同じように CSS を使用します。

ただし AMP の場合は、パフォーマンスと操作性の関係で、一部の CSS が制限されています。一方、レスポンシブ デザイン機能は、 プレースホルダとフォールバックsrcset による高度な画像読み込みレイアウト属性 などの機能で拡張されているため、要素の表示方法を細かく制御できます。

Watch UpperQuad talk about the AMPproject site redesign, including the challenges of using AMP for the first time.

ページにスタイルを追加する

すべての CSS は、ドキュメントの <head><style amp-custom> タグ内に追加します。次の例をご覧ください。

<!doctype html>
<head>
...
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}

amp-img.grey-placeholder {
background-color: grey;
}
</style>
...
</head>

一般的な CSS プロパティを使用し、クラスセレクタまたは要素セレクタでコンポーネントのスタイルを定義します。次に例を示します。

<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>

要素をレスポンシブにレイアウトする

width 属性と height 属性を使用して、表示されるすべての AMP 要素のサイズと位置を指定します。これらの属性を指定することで、必然的に要素のアスペクト比が決まり、コンテナによる拡大、縮小が可能になります。

レイアウトはレスポンシブに設定してください。これにより、要素の幅がコンテナ要素に合わせて調整され、width 属性と height 属性で決まったアスペクト比に応じて高さが調整されます。

プレースホルダとフォールバックを提供する

プレースホルダとフォールバックがビルトイン サポートされていますので、ユーザーに対して何もない画面が表示されることはありません。

高度な画像読み込み

AMP では、srcset 属性と sizes 属性の両方がサポートされているため、どの場合にどの画像を読み込むかを細かく制御できます。

スタイルとレイアウトを検証する

AMP 検証ツールを使用すると、ページの CSS やレイアウトの値をテストできます。

AMP 検証ツールは、ページの CSS が上限の 50,000 バイトを超えていないか、許可されていないスタイルはないか、ページのレイアウトがサポートされているか、形式は正しいか、などを検証します。チェックできるエラーの一覧については、スタイルとレイアウトのエラーをご覧ください。

CSS が上限の 50,000 バイトを超えた場合、コンソールには次のように表示されます。