スタイルとレイアウト

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

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

AMP で要素をレスポンシブにするのはとても簡単で、layout="responsive" を追加するだけです。AMP でのレスポンシブデザインについて詳しくは、レスポンシブな AMP ページを作成するをご覧ください。

初めて 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>

ページ内の <style amp-custom> タグが 1 つのみであることを確認してください。AMP では、このタグを複数使用することはできません。

一般的な 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>

使用するスタイルが AMP でサポートされているかどうかを確認してください。一部のスタイルは、パフォーマンス上の理由でサポートされていません（サポートされる CSS もご覧ください）。

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

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

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

詳しくはこちら: AMP でサポートされるレイアウト

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

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

詳しくはこちら: プレースホルダとフォールバック

高度な画像読み込み

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

詳しくはこちら: srcset と sizes による高度な画像読み込み

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

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

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

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

詳細はこちら: AMP ページの検証と修正

Written by @pbakaus
with contributions from @Meggin