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

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

初めて AMP を利用するにあたっての課題など、UpperQuad における AMP プロジェクトでのサイト再設計に関する話をご覧になれます。

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

すべての 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 バイトを超えた場合、コンソールには次のように表示されます。