AMP対応のHTMLで画像とCSSを扱う
前回記事「AMP導入の基本とデバッグ方法まとめ 」でウェブサイトのAMP対応導入の基本的なところに触れました。この記事でもまとめている通り、AMP対応のHTMLでは通常のものと比べいくつかコーディングの制約があります。
今回はその中でも、ウェブサイトのデザインに大きく影響する、画像の表示とスタイルシートを扱う上での方法をまとめていきます。
このように通常の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> …実際に画像の配置とスタイルを適用するとこんな感じで確認することができます。

sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
categories