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

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

ただいまの
回答率

90.50%

  • HTML

    8982questions

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

HTMLメールの画像

解決済

回答 2

投稿 編集

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

kii-shi

score 26

やりたいこと

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

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

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

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

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

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

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

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

<!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>〇〇 2018年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/_var/header_logo.png" border="0" style="width:71px; height:50px; display:block;" alt="D">
</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/_var/2018/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/>
今回も、キャンペーンをご紹介!<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/>
 <s>第2回締切:201n年n月n日(土) 23:59まで</s><br/>
 第3回締切: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/_var/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/_var/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/_var/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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yoshinavi

    2018/07/07 05:16

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

    キャンセル

  • kii-shi

    2018/07/07 11:26

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

    キャンセル

  • kii-shi

    2018/07/10 00:32

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

    キャンセル

回答 2

+3

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/07 11:25

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

    キャンセル

  • 2018/07/07 11:32

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

    キャンセル

checkベストアンサー

+1

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


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML

    8982questions

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