htmlメルマガ仕様

htmlメルマガ仕様

htmlメルマガは閲覧する環境によって、styleなどの仕様が変わってしまうので、ここにまとめます。

対象の閲覧環境と大まかな仕様

• Gmail（PCブラウザ）
  classが効かない（レスポンシブ未対応）

• Gmail（SPアプリ）
  classが効かない（レスポンシブ未対応）

• Gmail（SPブラウザ）
  classが効かない（ページ幅の自動調整が効かない）

• Outlook（PCアプリ）
  classが効かない（レスポンシブ未対応）

• Outlook（SPアプリ）
  比較的崩れが少ない（ブラウザに近い表示）

• Yahoo（PCブラウザ）
  比較的崩れが少ない（ブラウザに近い表示）

• Yahoo（SPアプリ）
  比較的崩れが少ない（ブラウザに近い表示）

• iPhone（デフォルト）
  比較的崩れが少ない（ブラウザに近い表示）

細かい仕様

スタイルの対応表は下記に表記しています。（随時更新）

G:\02.コンサル事業\02.進行中案件\11.キナリ様\04.メルマガ\テンプレート化
メルマガテンプレート化_メーラー環境確認v4.xlsx

作成時の主な注意点

・gmailはclassが効かないため、レスポンシブが不可（正確にはstyleの変更が不可）

・imgタグにはwidth="100%"を指定する
gmail(SPブラウザ)で閲覧時、画像の横幅を基準にして表示を縮小してしまうため、
画像以外の要素が小さくなってしまう。

<img src="~" width="100%">

・余白用のimgにはstyle="opacity:0;"を指定する
ダークモード時に画像の色が反転されず、虫食いのような表示になってしまう。

<img src="~" width="100%" style="opacity:0;">

・テキストはで色を指定する
初期の色でも指定をしないと、環境によっては、色が変わってしまう。

<font color="#000000">てきすと</font>