0%

Programmingプログラミングナレッジ

Posted:2018.07.09

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】