チラシデザインとホームページ制作は横浜の日本一店長のアイシープへ

日本一店長のチラシデザインとホームページ制作

AMP対策【amp-imgタグの使い方】

138 views
約 2 分
AMP





はじめに



「AMP」には、独自のタグの使用が多いです。

中でも「imgタグ」でなくAMP専用の「amp-imgタグ」を使わなければいけないことでしょう。

そこで、主な使い方を備忘録としてメモしておきます。


amp-imgで画像サイズを指定する場合、layout="fixed"が必要




amp-imgで画像サイズを指定する場合、layout="fixed"が必要になります。


<amp-img alt="○○○○○○○○"
src="https://○○○○○○○○"
width="30"
height="30"
layout="fixed">
</amp-img>


と書かなければいけません。

widthとheightは必須です。

layout="fixed"がないと、画像が横幅いっぱいに広がってしまいますので気をつけましょう。


layout="responsive"は自動的に幅100%で伸縮する




layout="responsive" を指定するだけで、縦横比を保ちながら画面幅に応じて自動的に伸縮表示されます。


<amp-img alt="○○○○○○○○"
src="https://○○○○○○○○"
width="30"
height="30"
layout="responsive">
</amp-img>


widthとheightの数値は比率でしかありません。

ここで言うと、30:30 なので横縦は1:1の比率と言うことになります。

入れた縦横の数字の比率で自動的に幅100%で伸縮するようになります。












Comment On Facebook