HTMLのメールマガジン、実際に組んでみました。 メーラーという独特の環境や、 昔懐かし(自分で組むのは12年ぶりくらいだ!)テーブルコーディング、 なかなか工夫のしがいがありましたよ♪ 安心して使えるCSSのリストはこれだ!! 基本的に、cssはインラインで記述する必要があります。 コーディング中は、こちらのチートシートが手放せませんでした。 作ってくれた方、ほんとうに感謝です!! 「The Ultimate Guide to CSS」 http://www.campaignmonitor.com/css/ テーブルコーディングの勘所 本日のサンプルはこちらです。 見ながら読んで下さいね。 alt属性は必須! 画像にする箇所が多かったのですが、 文字を画像にする箇所は、必ずalt属性を入れました。 HTMLメールは受信直後の状態では画像が表示されていないことがあります。 alt属性を入れ
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
HOMEブログウェブ制作HTMLメールのレスポンシブ化。 | ネクストページブログ こんにちは、藤中です。 最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。 パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。 最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。 今回は制作者向けの情報です。 HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く