レスポンシブなHTMLメールをつくる - Qiita
仕事でHTMLメールを作る機会があったんですが、メーラーは種類が多く、各メーラーによって実装状況にかなり差があるので、多くのユーザー環境で正しく表示されるHTMLメールを作ろうと思うとなかなか面倒でした。 しかもレスポンシブとなると、通常のwebページでいうクロスブラウザ対応の比ではないほど気を使うことに。。 なので、やったことをここにメモしておきます。 後々、会社のブログで記事にするつもりだけど。 基本的なつくりかた レスポンシブという言葉の響きで、なんかモダンな作りができそうだなーと思ってしまうけど、結局は下記のような昔ながらの作り方をしなくちゃいけないです。 tableレイアウトでコーディング。 これでやらないとOutlookでまともに表示できない。 インラインスタイルでCSSを記述。 <style>タグに対応していないメーラーが多いため。 また、前述のとおり各メーラーで動作に差異が
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
Outlookに勝てるHTMLメールコーディング vol.2「レスポンシブ設計編」 - Qiita
前回に引き続きメールコーディングのちょっとしたコツをつらつらと書いていきたいと思います。 ちなみに前回の投稿はこちらから。 Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 あんまり関係ないけどファイル構成 特にレスポンシブ対応には関係ないのですが、HTMLメールのコーディングってとにかくコードが長く、インデントも煩雑になっていきませんか？ 今回長文のコードを書くに当たって、ファイル分割してコーディングしています。 共通化できる場所を別ファイルとして作成しておけば、一括でヘッダなどの内容も変えることが出来ますし、何よりコードの可読性があがります。 分割したファイル構成 <!-- ヘッダの設定 --> <%= render :partial => '/user_mailer/template_head' %> <body class="res" width="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
