AMPドキュメント

CSS

スタイルシートについて

スタイルシートについて

AMPでも通常のHTMLと同様にCSSを使ってスタイルを変更

使い方

<head>
  ...
  <style amp-custom>
    この部分にしかCSSは記述できない
  </style>
  ...
</head>

専用 CSS

スタイル名 説明
amp-mode-touch AMPがタッチ入力を検出したとき
amp-mode-mouse AMPがマウス入力を検出したとき
amp-mode-keyboard-active AMPがキーボードがアクティブであることを検出したとき

使えない CSS

スタイル名 説明
!important 修飾子 使用不可
<link rel=”stylesheet”> カスタムフォント以外不可
-amp-*クラス 使用不可
i-amp-*クラス 使用不可

制限のある CSS

スタイル名 説明
transition プロパティ opacity、transform、-vendorPrefix-transform のみ
@keyframes {…} opacity、transform、-vendorPrefix-transform のみ

ルール

  • CSSをすべてHTMLのHEAD内に記述
  • style要素にはamp-custom属性が必須
  • 要領は50KB

レイアウトについて

属性

属性名 説明
width 横幅
height 高さ
layout レイアウト
sizes メディア式に基づいた要素の横サイズ
heights メディア式に基づいた要素の縦サイズ
media メディア属性
placeholder プレスホルダー
fallback フォールバック
noloading 進捗インジケータ(グルグル回るアイコンみたいなやつ)をOFF

layout 属性で指定できる値

説明
container 子要素に応じて自動的にサイズ調整
fill 利用可能なスペースを埋めるよう自動的にサイズ調整
fixed 指定した横幅と高さで固定
fixed-height 指定した高さで固定。横幅は自動的にサイズ調整
flex-item 親要素や周りの要素に応じて自動的にサイズ調整
intrinsic 指定したアスペクト比に自動的にサイズ調整
nodisplay 要素が非表示
responsive 画面サイズに応じて自動的にサイズ調整

layout 属性が設定されていない場合

条件
heightが指定、widthが指定されていない、もしくはautoが指定 fixed-height
widthが指定、sizes属性が指定 responsive
widthが指定、sizes属性が指定されていない fixed
widthとheightの両方が指定されていない container