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

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

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

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

Q&A

解決済

2回答

1204閲覧

HTMLメールの画像

sakura-shi

総合スコア93

HTML

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

0グッド

0クリップ

投稿2018/07/06 15:19

編集2018/07/09 11:15

#やりたいこと

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

A)あるスマホで受信したメール本文の画像(横長のボタン)を見た場合
B)別の機種のスマホで受信したメール本文中の横長のボタン画像

見比べてみると、Aでは、ボタン画像は画面の幅いっぱいに近いくらい大きく見え、Bでは、ボタンの画像がすごく小さく見えてしまいます。

なお、メール配信時には、キャリアによってメール本文を書き換えるような
ことはしていません。

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

ちなみに、比較した2機種はどちらも、画面はFHDで解像度も同じでした。

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

コードを掲載します。
A,Bの2機種で違う見え方をした画像は、alt="詳しい応募方法" の画像です。
(このコードでは画像のパスを公開できないのですが、実際は、画像は確実にWEBサーバに存在しパスも間違っていません。)

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>〇〇 2018年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/_var/header_logo.png" border="0" style="width:71px; height:50px; display:block;" alt="D"> 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/_var/2018/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;">夏の訪れを感じる季節になりましたね。<br/> 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 <s>第2回締切:201n年n月n日(土) 23:59まで</s><br/> 97 第3回締切:201n年n月n日(火) 23:59まで<br/> 98◆当選人数:毎月10名様(合計30名様)<br/> 99◆当選賞品:〇〇<br/> 100</p> 101</td> 102</tr> 103<tr> 104<td align="center"> 105<a href="https://goo.goo/L" target="_blank"><img src="https://members.com/_var/images/button_new.png" width="240" height="42" alt="詳しい応募方法"></a> 106</td> 107</tr> 108<tr> 109<td style="padding:25px 0 0"> 110</td> 111</tr> 112</table> 113</td> 114</tr> 115 116<tr> 117<td><img src="https://members.com/_var/images/spacer.gif" style="display:block;" height="60" alt=""></td> 118</tr> 119<tr> 120<td class="common_padding" style="padding:0 15px"> 121 122<!-- Contents --> 123<table class="container" width="670" border="0" cellspacing="0" cellpadding="0"> 124<tr> 125<!-- 大見出し --> 126<td style="color:#fff; background:#003E7E; font-size:20px; font-weight:bold; line-height:1.4; padding:15px">お知らせ 127</td> 128</tr> 129<tr> 130<!-- 131<td style="padding:30px 0 0;"> 132</td> 133--> 134</tr> 135</table> 136<!-- /Contents --> 137</td> 138</tr> 139<tr> 140<td><img src="https://members.com/_var/spacer.gif" style="display:block;" height="60" alt=""></td> 141</tr> 142<!-- Footer --> 143<tr> 144 145<td align="center" style="font-size:11px; line-height:1.4; padding:40px 0; background:#ebebeb;"> 146<!-- 147--> 148</td> 149</tr> 150</table> 151<!-- /container --> 152 153</center> 154</td> 155</tr> 156</table> 157 158</div> 159 160</body> 161</html>

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

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

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

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

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

yoshinavi

2018/07/06 20:16

HTMLメールは、メーラーによる影響が大きいので、確認されたメーラーとHTML・CSSコードをご提示ください。
sakura-shi

2018/07/07 02:26

受信者のメーラを送信者が取得できるはずもないので、HTMLでできるだけの対策をとりたいと思っています。コードは少々お待ちください。
sakura-shi

2018/07/09 15:32

質問を再掲しました。機種やメーラの違いはどうにもできませんので、HTMLやCSSといった面から送信者の見た目を少しでも差が少なくなるようになるようにしたいです。ソース掲載しました。どうぞよろしくお願いいたします。
guest

回答2

0

どう見えるか、というのはメールソフトにより変わります
ですんで、メールソフトを同じにしない限り、同じように見えることを目指すのは無意味です

投稿2018/07/06 22:45

y_waiwai

総合スコア87719

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

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

sakura-shi

2018/07/07 02:25

ありがとうございます。 受信者のメーラを送信者が取得できるはずもないので、HTMLの書き方で少しでも機種により差がでないようにできればそれでよいです。
y_waiwai

2018/07/07 02:32

対象としている機種のありとあらゆるメーラを用意して表示チェックするしかないでしょうね
guest

0

ベストアンサー

なるだけ多くメーラーを用意できれば良いでしょうが、そういう訳にもいきませんからね。
問題の少ないスタイルをあてるしかないと思います。


参考:
作って分かるHTMLメールの基本と使えるタグ/CSSまとめ
2017年のHTMLメールを取り巻く環境とモダン開発

投稿2018/07/07 03:08

yoshinavi

総合スコア3521

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問