Ownedmedia ウェブ制作に役立つコンテンツを発信中!

AMP 2018.07.09

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

Tags: ,,

前回記事「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とは少し異なりますので注意が必要です。またデザインもこういった制約を念頭に置いて設計していく必要がありそうです。

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?