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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

1回答

217閲覧

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

sakura-shi

総合スコア93

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/07/09 13:19

編集2018/07/11 00:35

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

#やりたいこと

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

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

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

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

HTML

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2<html> 3<head> 4<meta http-equiv="content-type" content="text/html;charset=UTF-8"> 5<meta name="viewport" content="width=device-width"> 6<title>〇〇8月号</title> 7 8<style type="text/css"> 9<!-- 10* {margin: 0; padding: 0;} 11td {border-collapse: collapse;} 12a:link, a:visited {text-decoration: underline;} 13@media only screen and (max-width: 699px) { 14table.container { 15width: 100% !important; 16} 17.header_left { 18width:35%; 19} 20.header_right { 21width:65%; 22} 23.common_padding { 24padding-left:10px !important; 25padding-right:10px !important; 26} 27.fluid { 28display: block !important; 29width: 100% !important; 30padding:0 !important; 31clear: both; 32margin-bottom: 30px; 33} 34} 35--> 36</style> 37 38</head> 39<body text="#333333" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0" style="width: 100% !important; background: #ffffff; margin:0; padding:0;"> 40<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%;"> 41 42<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f7f7f7"> 43<tr> 44<td align="center" valign="top"> 45<center> 46 47<table class="container" width="700" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff;"> 48<tr> 49<td> 50<!--Header--> 51<table class="container" width="700" border="0" cellspacing="0" cellpadding="0"> 52<tr> 53<td align="center" colspan="2" style="background:#ebebeb; font-size:10px; line-height:1.4; padding:10px;"> 54このメールは〇〇〇から会員の方々にお送りしています。<br/> 55画像がうまく表示されない方は、<a href="https://goo.goo/V" target="_blank" style="color:#003E7E">こちらのWEBページ</a>をご覧ください。 56</td> 57</tr> 58<tr> 59<td class="header_left" align="left" width="350" style="font-size:0; line-height:1; padding:15px 15px;"> 60<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"> 61</a> 62</td> 63<td class="header_right" align="right" width="350" valign="middle" style="font-size:11px;padding-right:15px;text-align:right;"> 64<a href="https://www.project.com/jp/home.html" target="_blank" style="color:#003E7E;">サイト</a>&nbsp;&nbsp; 65<a href="https://members.com/user/edit" target="_blank" style="color:#003E7E;">変更</a> 66</td> 67</tr> 68</table> 69</td> 70</tr> 71 72<!-- Main --> 73<tr> 74<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> 75</tr> 76 77<tr> 78<td class="common_padding" style="padding:0 15px"> 79<table class="container" width="670" border="0" cellspacing="0" cellpadding="0"> 80<tr> 81<td style="padding:25px 0 0"> 82<p style="display:block; font-size:15px; color:#333333; line-height:1.4;"> 83キャンペーンをご紹介!<br/> 84ぜひご応募ください。</p> 85</td> 86</tr> 87<tr> 88<td style="padding:50px 0 25px"> 89<h3 style="font-size:18px; color:#003E7E; font-weight:bold; line-height:1.4;">毎月100名様に〇〇が当たる!</h3> 90<h2 style="font-size:23px; color:#003E7E; font-weight:bold; line-height:1.25; margin-top:5px;">キャンペーン</h2> 91<p style="display:block; font-size:15px; color:#333333; line-height:1.4; margin-top:25px;">会員の皆様に、毎月100名様に当たる!「キャンペーン」<br/> 92第n回のご応募受付中!ご応募お待ちしてます。<br/><br/> 93 94◆応募期間:201n年n月n日(火) ~ 201n年n月n日(火)23:59まで<br/> 95 <s>第1回締切:201n年n月n日(木) 23:59まで</s><br/> 96 第2回締切:201n年n月n日(火) 23:59まで<br/> 97◆当選人数:毎月10名様(合計30名様)<br/> 98◆賞品:〇〇<br/> 99</p> 100</td> 101</tr> 102<tr> 103<td align="center"> 104<a href="https://goo.goo/L" target="_blank"><img src="https://members.com/images/button_new.png" width="240" height="42" alt="応募方法"></a> 105</td> 106</tr> 107<tr> 108<td style="padding:25px 0 0"> 109</td> 110</tr> 111</table> 112</td> 113</tr> 114 115<tr> 116<td><img src="https://members.com/images/spacer.gif" style="display:block;" height="60" alt=""></td> 117</tr> 118<tr> 119<td class="common_padding" style="padding:0 15px"> 120 121<!-- Contents --> 122<table class="container" width="670" border="0" cellspacing="0" cellpadding="0"> 123<tr> 124<!-- 大見出し --> 125<td style="color:#fff; background:#003E7E; font-size:20px; font-weight:bold; line-height:1.4; padding:15px">お知らせ 126</td> 127</tr> 128<tr> 129<!-- 130<td style="padding:30px 0 0;"> 131</td> 132--> 133</tr> 134</table> 135<!-- /Contents --> 136</td> 137</tr> 138<tr> 139<td><img src="https://members.com/spacer.gif" style="display:block;" height="60" alt=""></td> 140</tr> 141<!-- Footer --> 142<tr> 143 144<td align="center" style="font-size:11px; line-height:1.4; padding:40px 0; background:#ebebeb;"> 145<!-- 146--> 147</td> 148</tr> 149</table> 150<!-- /container --> 151 152</center> 153</td> 154</tr> 155</table> 156 157</div> 158 159</body> 160</html>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

scsi

2018/07/09 13:32

前に同じ質問してクライアント依存って回答されてませんでしたっけ?
sakura-shi

2018/07/09 14:46

少しでも、HTMLやCSSの書き方で、機種やメーラによる差異を埋めたいので質問をしています。お願いします。
macaron_xxx

2018/07/10 00:17

おそらく、誰も”一番多く"のメーラーで対応できる方法を知らないです。私は、テーブルセルを画像サイズにきってしまって、100%表示させる方法をとっていますが、それがベストかもわかっていません。
sakura-shi

2018/07/10 01:07

前の質問時に、少しでも問題の少ないcssやHTMLの調整で、という回答をいただいたのでこの質問を投稿しました。コードの掲載も求められましたので掲載しています。コードを見て、ここを調整したら?という箇所があれば、どんどん、ご指摘いいただきたいです。
macaron_xxx

2018/07/10 01:17

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

2018/07/10 01:58

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

2018/07/10 02:19

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

回答1

0

ベストアンサー

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

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

HTML

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

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

投稿2018/07/11 11:24

編集2018/07/11 11:28
yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sakura-shi

2018/07/11 11:30

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

2018/07/11 11:38

imgの「width属性、height属性」は優先度が低いので、styleを設定した場合は「上書き」される形になりますので、本来は不要です。 ただ、SEOとしてみた場合に記入する事が多いかと思いますので、そのままで良いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問