AMP対応のHTMLで画像とCSSを扱う

AMP2018.7.9

前回記事「AMP導入の基本とデバッグ方法まとめ」でウェブサイトのAMP対応導入の基本的なところに触れました。この記事でもまとめている通り、AMP対応のHTMLでは通常のものと比べいくつかコーディングの制約があります。今回はその中でも、ウェブサイトのデザインに大きく影響する、画像の表示とスタイルシートを扱う上での方法をまとめていきます。

AMP対応のHTMLで画像を扱う

AMPではimgタグは使えないため、その代わりに「amp-img」タグというものを使います。そのままimgタグの代わりに使う形でOKです。実際には以下のような形でコーディングします。

<amp-img src="./img/sample.png" alt="sample-image" width="700" height="500" layout="responsive"></amp-img>

src属性やalt属性はそのままで問題ありませんが、AMPではwidthとheight属性が必須となりますので注意が必要です。また新たに登場した「layout」属性の値を「responsive」にすると自動的に画像がレスポンシブに合わせて（アクペクト比を維持しコンテンツ全幅）表示されます。

AMP対応のHTMLでCSSを扱う

次にスタイルシートですが、AMPでは外部CSSファイルを読み込むことが禁止されているため、CSSは全てheadタグ内にインラインで記述することになります。ここでも通常のstyleタグではなく、タグの中に「amp-custom」と記載しなければなりません。それ以外は通常のCSSの表記で大丈夫です。具体的には以下のような形になります。【HTML（AMP）】※一部省略

…
<head>
  <style amp-custom>
    body {
      background: #eee;
    }
    h1 {
      color: #0C7EE4;
      margin: 90px 0;
    }
    amp-img {
      max-width: 500px;
      height: auto;
    }
  </style>
</head>
…

実際に画像の配置とスタイルを適用するとこんな感じで確認することができます。 AMP対応のHTMLで画像とCSSを扱う

このように通常のHTMLとは少し異なりますので注意が必要です。またデザインもこういった制約を念頭に置いて設計していく必要がありそうです。