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

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

ただいまの
回答率

90.51%

  • HTML

    9008questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5813questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

HTMLメールの画像の見え方の違い

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 186

kii-shi

score 26

モバイルやPCに配信されたHTMLメール中の画像サイズについて

やりたいこと

スマホ2機種で同じHTMLメールを見た場合
見比べてみると、機種Aでは、メール本文中のボタン画像は画面の幅いっぱいに近いくらい大きく見え、機種Bでは、ボタンの画像がすごく小さく見えてしまいます。

いまやりたいことは、できるだけ異なるスマホで(HTMLメールを)見た場合に
画像サイズ感を同じにしたい、ということです。

こういった場合、どういった点に注意してHTMLを作成すれば、ボタン画像の
サイズ感は同じになるでしょうか?

コードを掲載します。
スマホ2機種で違う見え方をした画像は、alt="応募方法" の画像です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width">
<title>〇〇8月号</title>

<style type="text/css">
<!--
* {margin: 0; padding: 0;}
td {border-collapse: collapse;}
a:link, a:visited {text-decoration: underline;}
@media only screen and (max-width: 699px) {
table.container {
width: 100% !important;
}
.header_left {
width:35%;
}
.header_right {
width:65%;
}
.common_padding {
padding-left:10px !important;
padding-right:10px !important;
}
.fluid {
display: block !important;
width: 100% !important;
padding:0 !important;
clear: both;
margin-bottom: 30px;
}
}
-->
</style>

</head>
<body text="#333333" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="width: 100% !important; background: #ffffff; margin:0; padding:0;">
<div style="font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;">

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f7f7f7">
<tr>
<td align="center" valign="top">
<center>

<table class="container" width="700" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff;">
<tr>
<td>
<!--Header-->
<table class="container" width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="2" style="background:#ebebeb; font-size:10px; line-height:1.4; padding:10px;">
このメールは〇〇〇から会員の方々にお送りしています。<br/>
画像がうまく表示されない方は、<a href="https://goo.goo/V" target="_blank" style="color:#003E7E">こちらのWEBページ</a>をご覧ください。
</td>
</tr>
<tr>
<td class="header_left" align="left" width="350" style="font-size:0; line-height:1; padding:15px 15px;">
<a href="https://www.project.com/jp/home.html" target="_blank"><img src="https://members.com/header_logo.png" border="0" style="width:71px; height:50px; display:block;" alt="logo">
</a>
</td>
<td class="header_right" align="right" width="350" valign="middle" style="font-size:11px;padding-right:15px;text-align:right;">
<a href="https://www.project.com/jp/home.html" target="_blank" style="color:#003E7E;">サイト</a>&nbsp;&nbsp;
<a href="https://members.com/user/edit" target="_blank" style="color:#003E7E;">変更</a>
</td>
</tr>
</table>
</td>
</tr>

<!-- Main -->
<tr>
<td align="center" style="font-size:0;"><img src="https://members.com/images/bn_02.jpg" border="0" style="width:100%; display:block;" alt="キャンペーン"></td>
</tr>

<tr>
<td class="common_padding" style="padding:0 15px">
<table class="container" width="670" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:25px 0 0">
<p style="display:block; font-size:15px; color:#333333; line-height:1.4;">
キャンペーンをご紹介!<br/>
ぜひご応募ください。</p>
</td>
</tr>
<tr>
<td style="padding:50px 0 25px">
<h3 style="font-size:18px; color:#003E7E; font-weight:bold; line-height:1.4;">毎月100名様に〇〇が当たる!</h3>
<h2 style="font-size:23px; color:#003E7E; font-weight:bold; line-height:1.25; margin-top:5px;">キャンペーン</h2>
<p style="display:block; font-size:15px; color:#333333; line-height:1.4; margin-top:25px;">会員の皆様に、毎月100名様に当たる!「キャンペーン」<br/>
第n回のご応募受付中!ご応募お待ちしてます。<br/><br/>

◆応募期間:201n年n月n日(火) ~ 201n年n月n日(火)23:59まで<br/>
 <s>第1回締切:201n年n月n日(木) 23:59まで</s><br/>
 第2回締切:201n年n月n日(火) 23:59まで<br/>
◆当選人数:毎月10名様(合計30名様)<br/>
◆賞品:〇〇<br/>
</p>
</td>
</tr>
<tr>
<td align="center">
<a href="https://goo.goo/L" target="_blank"><img src="https://members.com/images/button_new.png" width="240" height="42" alt="応募方法"></a>
</td>
</tr>
<tr>
<td style="padding:25px 0 0">
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td><img src="https://members.com/images/spacer.gif" style="display:block;" height="60" alt=""></td>
</tr>
<tr>
<td class="common_padding" style="padding:0 15px">

<!-- Contents -->
<table class="container" width="670" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- 大見出し -->
<td style="color:#fff; background:#003E7E; font-size:20px; font-weight:bold; line-height:1.4; padding:15px">お知らせ
</td>
</tr>
<tr>
<!--
<td style="padding:30px 0 0;">
</td>
-->
</tr>
</table>
<!-- /Contents -->
</td>
</tr>
<tr>
<td><img src="https://members.com/spacer.gif" style="display:block;" height="60" alt=""></td>
</tr>
<!-- Footer -->
<tr>

<td align="center" style="font-size:11px; line-height:1.4; padding:40px 0; background:#ebebeb;">
<!--
-->
</td>
</tr>
</table>
<!-- /container -->

</center>
</td>
</tr>
</table>

</div>

</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • macaron_xxx

    2018/07/10 10:17

    ですので、「機種やメーラによる差異を埋めたい」はあちらを立てればこちらが立たずになることが多いので、自身のユーザがどのメーラー表示が多いかを調べた上で割合の多いものにあわせるしかないです。たとえば、多くのメーラーにあわせたとしても使用割合1%の1000のメーラーにあわすより使用割合99%の1つのメーラーにあわせた方がいいでしょう。そういう意味では、このソースで表示されないメーラーは諦めましょう。

    キャンセル

  • kii-shi

    2018/07/10 10:58

    画像の配置(タグの書き方)の方法で、機種やメーラの違いの差異は、少しでも小さくできないでしょうか?

    キャンセル

  • macaron_xxx

    2018/07/10 11:19

    対象がわからない限りは不可能です。

    キャンセル

回答 1

checkベストアンサー

0

どのメーラーなのかが分からないので推測ですが、img画像が単純にレスポンシブ対応になっていないだけでは無いのでしょうか?

対象のimgに以下の設定ではどうでしょうか?

<img src="https://members.com/images/button_new.png" width="240" height="42" alt="応募方法" style="width:100%;height:auto;">

-追記-
画面いっぱいの感じになるようにwidth:100%;の設定です。ここを任意の希望サイズに変えてみてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/11 20:30

    ありがとうございます。
    疑問があります。
    style属性追加したことで、width="240" height="42"は不要になるのでしょうか?

    キャンセル

  • 2018/07/11 20:38

    imgの「width属性、height属性」は優先度が低いので、styleを設定した場合は「上書き」される形になりますので、本来は不要です。

    ただ、SEOとしてみた場合に記入する事が多いかと思いますので、そのままで良いです。

    キャンセル

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

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

関連した質問

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

  • HTML

    9008questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5813questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。