プロフェッショナル・サービス・グループ

tableタグの使用について

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

リンク先の設定について

  • HTMLメールでは、文中にウェブサイトへのリンクを設定することが一般的である。
  • さらにこのリンクには、Goole Analyticsなどの解析ツールから解析ができるように、パラメータを付与することが一般的である。

    <a href="http://xxx.jp/news?utm_source=google&utm_medium=cpc">

メール内アンカーについて

  • HTMLメールでは、HTMLメール中の各ブロックにアンカーを付与することで、メール内の画面遷移をすることができる。
  • ただしメール内アンカーは、ユーザーの閲覧環境(ブラウザ等)により機能しないこともあるので、注意が必要。
  • より安全にメール内アンカーを設定するには、aタグを用いた方がよい。

    △ <table id="contents_2"> ← tableタグにidを付与するだけだと、機能しないこともある

    ○ <a name="contents_2" id="contents_2"> ← aタグでnameやidを付与してアンカーを設定する方が、より安全である

レスポンシブ対応について

  • HTMLメール内に記述するCSSにおいて、メディアクエリを利用することで、HTMLメール内でも画面の横幅に応じて、スタイルシートの内容を変化させることができる。
  • これを用いれば、例えばPCでのみヘッダーを表示させ、モバイルの場合は表示させなくする、などのことが可能となる。
    @media only screen and (max-width: 630px){
      td[class="only_pc"]{
        display:none !important;
      }
    }
  • ただしこれらは、ユーザーの閲覧環境(ブラウザ等)により表示が異なることがあるので、実機やクラウドサービス※を利用した検証を行う方が、より安全である。
    ※リトマスなど https://litmus.com/

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-08-03 (木) 11:01:07 (472d)