HTMLメール作成時の注意点と便利なサイト紹介
2016/09/05
HTMLメールはWebサイトよりもタグやスタイルシートに制限が多いため
作成時に注意する点をいくつか挙げます。
スポンサーリンク
目次
レイアウトにはリストタグでなくテーブルタグを使う
メーラーによっては <ul><li> タグによるレイアウトに対応していない場合もあるので
<table><tr><td> タグでレイアウトするようにします。
スタイルシートはインラインで記述する
スタイルシートの記述方法には以下の3つがあります。
- インラインスタイルシート：装飾したいタグにstyle属性で記述する
- 埋め込みスタイルシート：HTMLの<head>内の<style>タグ内にまとめて記述する
- 外部スタイルシート：スタイルシート用の.cssファイルに記述してHTML内で<link>タグで読み込む
このうち、2の埋め込みスタイルシートと3の外部スタイルシートは
対応していないメーラーがあるため、1のインラインで記述します。
スタイルシートの管理をしやすくする便利ツールのサイト
スタイルシートをインラインで記述すると、あとでフォントや色などの変更をしたいとき
変更箇所が多くて面倒だったり見落として変更しそこねるおそれがあります。
そこで、埋め込みスタイルシートをインラインに変換できるツールを提供しているサイトを紹介します。
CSS inliner
Inline styler
https://inlinestyler.torchbox.com/
まとめ
Webサイトのレイアウトには使われなくなってきたテーブルタグですが
HTMLメールではまだまだ現役なため、うまく使っていきたいですね。
スタイルシートに関しては、元ソースとして埋め込みスタイルシートで記述しておき
HTMLメール用にインラインに変換したものを使用するようにすれば
運用も楽になるのではないかと思います。