ImageHTMLメールのメールマガジンのコーディング【実際に組んでみた篇】HTMLのメールマガジン、実際に組んでみました。安心して使えるCSSのリストはこれだ!!基本的に、cssはインラインで記述する必要があります。コーディング中は、こちらのチートシートが手放せませんでした。本日のサンプルはこちらです。見ながら読んで下さいね。文字を画像にする箇所は、必ずalt属性を入れました。HTMLメールは受信直後の状態では画像が表示されていないことがあります。alt属性を入れていれば、その状態でも、最低限内容がわかります。ヘッダー直下のシャドウの扱いヘッダー直下にうっすら(ほんとにうっすら)シャドウが入っています。これは背景画像で処理しています。Outlook2007など一部の環境で、背景画像のcssが無効になります。色はtd自身のbgcolor(なんて懐かしい響きだろう!)も設定しています。非対応の環境だと完全に隙間が潰れてしまうので、一考の余地がありますね。コードはこんな感じですよ。alt="TシャツプリントのT1200から、Tシャツなどオリジナルグッズ制作についてのお得な情報やお役立ち情報満載のニュースレターです。/></td></tr></table>半透明背景の扱い半透明が有効な環境では半透明の白が、それが無理な環境では、不透明の白が入るようにしています。「透明っぽく見える色のベタ塗り」は、できなかったのです。該当箇所周りのコードはこんな感じです。background-color:rgba(255,255,255,0.6);です。rgbaが有効な環境ではrgbaが有効になり、そうでない環境では#ffffffが有効になります。描画されない環境もあるので、画像で。正確に上端と下端に配置されるよう、テーブルへのvalignと画像自身へのvertical-alignの設定は必須です。画像付き見出しは、リストのマークや背景などは崩れる可能性があったので、(マークアップ的には美しくないけども)テーブルで。valign=”middle”で、上下を中央揃えです。color:#0261d1;">今月のお客様の作品!!</span></td></tr></table></h2>まとめ。古典的な技術でも綺麗に組めます!tableコーディングという古典的な技術でHTMLメール。運用の見直しや、iPhone向けの最適化など、まだまだ研究の余地がありそうですね。何か新しい発見がありましたら、記事を書きます。読んでいただいてありがとうございました!14年1月6日付記:画像を隙間なく表示する方法こちらのサンプルのように、画像を隙間なく敷き詰めたデザインを実現したい場合。指定してあげましょう。これは、line-heightが邪魔をし、一部環境で隙間が発生してしまう現象のようです。画像を非表示にした時のaltのテキストも消えてしまうので、line-heightで対応しています。SNSキャンペーン方法論と実践」を開催しました。