タグ

2016年7月13日のブックマーク (2件)

  • 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.1「table構成編」 - Qiita
    simamikiii
    simamikiii 2016/07/13
    “<meta name="viewport" content="initial-scale=1.0,width=device-width" />”
  • HTMLメールで画像の間に隙間ができる - knowledge base

    画像をブロック要素に 先日、HTMLメールの制作をしていましたら、次のような現象に遭遇しました。 画像のあいだに余白ができてしまいました。 以前、似たような現象に対する記事を書かせて頂きましたが、それとはまったく異なる現象です。 実はこれ、Gmailでの表示です。 なので同じソースをIE6/7で表示してもまったく崩れません。 いわば、メーラーのみで起こる表示崩れの現象です。 そもそも画像をインライン要素として配置すると、ブラウザでは画像の上下にわずかな余白ができるのがブラウザにおけるデフォルトの挙動です(これを調整するのがfont-sizeであったりvertical-alignといったプロパティです)。 メーラー表示の際に発現する上記例についても、大半はvertical-alignで直すことができるのですが、一部の画像では何をしても余白が消えないときがあります。 インライン要素としてマーク

    HTMLメールで画像の間に隙間ができる - knowledge base