#author("2017-08-03T01:57:21+00:00","","")
#author("2017-08-03T02:01:07+00:00","","")
[[プロフェッショナル・サービス・グループ]]

*tableタグの使用について [#kaf86b90]
-HTMLメールの場合、ヘッダーのメニューといった複雑な段組には、tableタグを用いることが一般的である。
-しかしながらtableタグは、ユーザーの閲覧環境(ブラウザ等)により、特に横幅指定(tdやthのwidth指定)がうまく機能せず、レイアウトの崩れの原因にもなることがあるので、注意が必要。
-tableタグを使用する場合は、HTML内CSSにおけるID/クラス指定だけでなく、個々のtdやthに必ずwidthを指定しておくのが安全である。
-また画像を使用することも効果的である。

*リンク先の設定について [#x2c4ef14]
-HTMLメールでは、文中にウェブサイトへのリンクを設定することが一般的である。
-さらにこのリンクには、Goole Analyticsなどの解析ツールから解析ができるように、パラメータを付与することが一般的である。
><a href="http://xxx.jp/news?utm_source=google&utm_medium=cpc">

-さらに一部のサイトでは、これにページ内アンカー(#topなど)を付与することがある。この場合アンカーはパラメータの最後に付与しないと、ただしく機能しないので注意が必要。
>○ <a href="http://xxx.jp/news?utm_source=google&utm_medium=cpc#top">
>× <a href="http://xxx.jp/news#top?utm_source=google&utm_medium=cpc">

*メール内アンカーについて [#fe5897c2]
-HTMLメールでは、HTMLメール中の各ブロックにアンカーを付与することで、メール内の画面遷移をすることができる。
-ただしメール内アンカーは、ユーザーの閲覧環境(ブラウザ等)により機能しないこともあるので、注意が必要。
-より安全にメール内アンカーを設定するには、aタグを用いた方がよい。
>△ <table id="contents_2"> ← tableタグにidを付与するだけだと、機能しないこともある
>○ <a name="contents_2" id="contents_2"> ← aタグでnameやidを付与してアンカーを設定する方が、より安全である

*レスポンシブ対応について [#qc5ad921]
-HTMLメール内に記述するCSSにおいて、メディアクエリを利用することで、HTMLメール内でも画面の横幅に応じて、スタイルシートの内容を変化させることができる。
-これを用いれば、例えばPCでのみヘッダーを表示させ、モバイルの場合は表示させなくする、などのことが可能となる。
 @media only screen and (max-width: 630px){
   td[class="only_pc"]{
     display:none !important;
   }
 }

-ただしこれらは、ユーザーの閲覧環境(ブラウザ等)により表示が異なることがあるので、実機やクラウドサービス※を利用した検証を行う方が、より安全である。~
※リトマスなど
https://litmus.com/

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS