質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

HTML/CSSメールをGmailで正しく表示させる

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,553

higekatsu24

score 10

 Gmail内で正しいHTML表示をさせる

※HTMLの初心者の質問になるため、
内容に齟齬がございましたらご教示頂けますと幸いです。

もしHTMLメール作成にお詳しい方がいらっしゃったら、
ご助力頂けますと幸いですm(_ _)m

お手数ではございますが、宜しくお願い致します。
 
 
★Gmail内で正しいHTML/CSSの表示がされない
★タグ毎に送信テストすると表示される

HTMLメールメルマガの作成のため、CSSインライン形式でHTMLを作成し、
タグ確認やウェブ上での表示確認、メーラーでの表示確認を行っております。

前提として、ウェブ上での表示確認、メーラーでの表示確認の際は正しく表示がされていたことは確認済みです。
※入力してして確認できたweb確認はこちら
http://hmaster.net/tagtest.html
https://codepen.io/

まず、施策として<td>内に<h2><p>の2つの要素があるので、
それぞれ分離し以下の2パターンに分けて受信確認したところ、
CSSが動作し、正しい表示が確認できました。

  • <table><tr><td><h2>
  • <table><tr><td><p>

これにより、各エレメントのstyle要素は
Gmail上で表示されることが確認できました。
 
 
しかし、<h2><p>を一つのHTMLとしたときには表示されません。
以下のパターンを試してみましたが、相変わらず<h2>のCSSが動作しません。
※<p>要素のCSSは正しく表示されます

  • <p>エレメントのCSSを外す
  • <h2><p>を別の<tr>内に分離する
  • <h2><p>を別の<table>に分離する

テスト送信を行ったところ、
Gmailで【h2見出し部分】のCSS(背景色など)が効かない状況になりました。

 発生している問題

Gmailで各エレメント要素を分離して受信する際は表示されるのに、
<h2><p>要素を1つのHTMLとした際は正しく表示されない

 該当のソースコード

<table cellpadding="0" cellspacing="0" class="content" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;width:100%;" >
<tr>
            <td style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;" >
              <h2 class="heading" style="margin-top:30px;margin-bottom:0.3em;margin-right:0;margin-left:0;font-style:normal;font-variant:normal;font-weight:24px;font-size:20px;font-family:Hiragino Kaku Gothic Pro;line-height:24px;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:7px;background-color:#F8F8F8;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;border-left-width:5px;border-left-style:solid;border-left-color:#25BFA1;color:#474747;" >◯◯見出し◯◯</h2>

              <p class="text-contents" style="color:#333;font-size:16px;line-height:1.47;margin-top:2em;margin-bottom:2em;margin-right:auto;margin-left:auto;padding-top:1em;padding-bottom:1em;padding-right:1em;padding-left:1em;width:90%;border-width:1px;border-style:solid;border-color:#ccc;background-color:#fff;box-shadow:1px 1px 2px #ccc;" >
                <u>コンテンツ</u><br><br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br></p> 
            </td>
          </tr>
</table>

 試したこと

  1. 以下の要素に別けてHTMLを作成し、受信表示確認
    →正しく表示される
    ・<table><tr><td><h2>
    ・<table><tr><td><p>
     

  2. <h2><p>を一つのHTMLとして作成し、受信表示確認
    →<h2>のCSSが動作せず、テキストのみになる
    ・<p>エレメントのCSSを外す
    ・<h2><p>を別の<tr>内に分離する
    ・<h2><p>を別の<table>に分離する
    ※いずれも<p>要素のCSSは正しく表示されます
     

  3. HTML、マルチパート(テキスト+HTML)でも同上

2018/09/21 13:24

 Gmailで受信した際のソース

--SUBMITMAIL_180921_00094.16392
Content-Type: text/html; charset="iso-2022-jp"
Content-Transfer-Encoding: 7bit

<table cellpadding="0" cellspacing="0" class="content" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;width:100%;" >
<tr>
            <td style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;bgcolor:#ffffff;" >
              <h2 class="heading" style="margin-top:30px;margin-bottom:0.3em;margin-right:0;margin-left:0;font-style:normal;font-variant:normal;font-weight:24px;font-size:20px;font-family:Hiragino Kaku Gothic Pro;line-height:24px;padding-top:10px;padding-bottom:10px;padding-right:0;padding-left:7px;background-color:#F8F8F8;background-image:none;background-repeat:repeat;background-position:top left;background-attachment:scroll;border-left-width:5px;border-left-style:solid;border-left-color:#25BFA1;color:#474747;" >◯◯見出し◯◯</h2>

              <p class="text-contents" style="color:#333;font-size:16px;line-height:1.47;margin-top:2em;margin-bottom:2em;margin-right:auto;margin-left:auto;padding-top:1em;padding-bottom:1em;padding-right:1em;padding-left:1em;width:90%;border-width:1px;border-style:solid;border-color:#ccc;background-color:#fff;box-shadow:1px 1px 2px #ccc;" >
                <u>コンテンツ</u><br><br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br>
                ・コンテンツ<br></p> 
            </td>
          </tr>
</table>

--SUBMITMAIL_180921_00094.16392--
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • higekatsu24

    2018/09/21 15:34

    >x_xさん ありがとうございます。こちらは改行しておらず、続いているものとお考えください。

    キャンセル

  • x_x

    2018/09/21 15:38

    実際には改行されていないということでしょうか? それならば質問文を修正してください

    キャンセル

  • higekatsu24

    2018/09/21 15:41

    >x_xさん 失礼しました。修正致しました。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る