HTMLメールこんにちは、中村です。今回はWebサイトから少し離れて、HTMLメールについてです。HTMLメールはあまり作る機会がなく、数年前に作ったきりだったので作り方の注意点が変わっていないか確認していきたいと思います。Transitionalで記述すること・スタイルはインラインで記述することHTMLメールはメーラーの仕様が定まっていないので、HTMLの書き方として正しいやり方というより、いろんな方の経験を参考にさせていただくことが多いです。対応範囲を定めることも必要です。言ってもユーザーのことを思うとできるだけ読める状態にはしておきたいです。読めないものが送りつけられたら嫌ですからね。レイアウトを複雑にしないのはそういった対応範囲外の方でも崩れにくくするために大切なことだと思います。仕様の都合だけでなく、せっかく開いてもらったメールが読みやすいようにするため、というのが一番の理由になります。複雑な表現で伝えたい場合や、ボリュームが多くなる場合は専用のWebページを作り、メールはWebページへの案内として発信するのが良いでしょう。現状はどうなっているか、確認していきたいと思います。メーラーのCSS対応状況を確認するこちらのサイトで確認できます。Monitorhead内のstyleレスポンシブにする場合はメディアクエリをhead内に記述するのでこのあたりは少し心配です。対応状況を見ると、概ね問題ないなようですが、モバイルのGメールアプリとヤフーのアプリが未対応なので対応範囲に含めるか確認しましょう。linkタグこちらはさらに対応していないものが多いです。スタイルはインラインに書いた方が良いですね。セレクタ#idや.classnameは概ね問題ないです。フォントWebフォントは使えそうにないです。SVGも怪しいので特殊な書体は画像にします。BackgroundBackground-colorなら使えます。念のため、表示されなかったとしても大丈夫なところに使いましょう。タイトルで白抜き文字や装飾をしたい場合は画像にします。余白margin・paddingを使いたいところですがメーラーによって解釈が違うようです。width・height・画像で工夫しましょう。この他のプロパティは非対応が多かったので省略します。レイアウトに使うプロパティの対応がまだまだ行き届いていないのでテーブルで組むところは変わらないですね。文字コードiso-2022-jpまたはutf-8にします。※現在はほとんどのメーラーがutf-8にも対応しているようですが送信するシステムの都合もあるので制作前に確認しましょう。絶対パスで記述します。pngは重たくなりがちなのでjpegかgifにすると良いです。content="width=device-width,initial-scale=1.0">※initial-scale=1.0があるとAndroidで不具合があったという方もいたので何か起きたらここも疑った方が良さそうです。最終的には圧縮をする注意点の中で「スタイルをインラインにする」というものがありますが、制作中はインラインだととても見づらいので後からツールを使ってインラインにすると作業しやすいと思います。Inlinerまとめ2018〜2019年に書かれた記事を色々と読んでみましたが基本的にはあまり変わっていないようです。HTMLメールはまだまだテーブルコーディングが主流なんだなということがわかりました。Mailは対応していないものが多いので注意していきたいと思います。関連記事2019-11-13canvasを使って行ったり来たりするアニメーションを作ってみた遅ればせながらcanvasを勉強し始めました。〜先日の台風、凄まじかったですね。(1)月別アーカイブ執筆者リストid:xkatoid:arms_hayamaid:arms-nakamuraid:hide_san99id:masakikojimaプロフィール株式会社アームズのエンジニアブログです。読者になるはてなブログをはじめよう!hide_san99さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。