• ベストアンサー

HTMLメールの書き方について

HTMLメールを送信したいのですが 受取人が何のメーラーを使用しているか分かりません。 ブラウザでメールを見ているかも知れません。 幅を指定する場合 例) Style属性に <img style="width:100%" ・・・ という書き方と <img width="100%" ・・・ という書き方があると思います。 どちらで書く方がよりメールが崩れないのでしょうか?

  • WDY
  • お礼率85% (188/219)

質問者が選んだベストアンサー

  • ベストアンサー
  • tyr134
  • ベストアンサー率51% (851/1656)
回答No.2

両方とも同じように表示になります。 ただ,意味合いが異なってきます。 Style属性の場合、デザインとしての大きさをCSSをタグに直打ちに指定してることになります。 もう一方はimg要素の width属性で指定していることになります。 img要素にはなるべく幅(Width)と高さ(height)、そして画像の説明(alt)属性を指定することが推奨されています。 なので,img要素に関しては後者の書き方が望ましいと思われます。 因みに,ビジネスメールのシェアについて一般社団法人日本ビジネスメール協会という団体がメールクライアントのシェアを発表しました。 それによると, Gmail(G Suiteを含む)(38.36%) Outlook(35.07%) iPhone(iPad)のメールソフト(10.56%) Yahoo!メール(10.11%) Office 365(7.64%) となっていました。 詳しくは参考URL先に置いてあるPDFをご確認ください。 Gmail、Outlook 、iPadでの表示が崩れていなければ大丈夫でしょう。 一端,自分宛に送ってみてこれらのメーラーで確認すると誤爆は減るとおもいます。

参考URL:
http://businessmail.or.jp/archives/2018/06/05/8777
WDY
質問者

お礼

ご回答ありがとうございます。 推奨している書き方をして一般的に使用しているメールクライアントにて確認してみます。 それで崩れていなければ何%の人は崩れませんと言えそうですね

その他の回答 (2)

  • dragon-man
  • ベストアンサー率19% (2701/13655)
回答No.3

HTMLメールを書けるメーラーを使えばいいです。たとえばThunderbird。自分でHTMLで書いてもメーラーは受け付けませんよ。

WDY
質問者

お礼

ご回答ありがとうございます。 ThunderbirdはHTMLを直接書いても HTMLをデコードして<body>区に書かれてしまう為メーラーは受け付けないんだと思います。

  • aokii
  • ベストアンサー率23% (5210/22062)
回答No.1

書くデータによります。

WDY
質問者

お礼

例として上げたのは画像の貼り付けで書かせて頂いたのですが 書くデータによるのであれば どの様なStyleの書き方であれば崩れず表示されるのでしょうか? 基本フレームの追記をお願いします。 また、その書き方に対応したブラウザ、メーラーは何になるのでしょうか?

関連するQ&A

  • [HTML][CSS] 画像の高さを揃えるには?

    HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例: <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと:  要件1. <div>内の写真の数によって幅を固定させたい。   例:写真が3枚なら、1枚あたりの幅は3/画面幅。  要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。   例:写真1の高さ200px、写真2の高さ250px、写真3の高さ100px     →写真1~3の高さを100pxとしたい。  要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。    →幅をベースとして高さを動的にトリミングしたい。     読み込んだポストによって幅や高さが変わるので、     css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。     (<div style="xxxxx">とか<img style="yyyy">とか。) clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか?

    • ベストアンサー
    • HTML
  • HTMLメールの作り方を教えてください!

    メーラーで作るのではなく、 メール一括送信ソフトから送ります。 HTMLで記述して、メール内容のボックスにコピーしても、タグ入りそのままがメールで送信されてきます。 メール一括送信ソフトで送るためのHTMLメールってどうやって作るのですか? 画像を入れて送信したいので、よろしくお願いいたします! ものすごく急いでいます。

  • HTMLチェックでこんな警告が出ます。

    (1) <tr> <td bgcolor="#DA4600"> <table summary="0" width="743" height="26" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <TABLE> に Mozilla または MSIE 用の属性 `HEIGHT` が指定されています。 (2) <td width="19" class="back1"><img src="img/common/spacer.gif" width="19" height="1"></td> <td width="741" valign="top" bgcolor="#FFFFFF"> <IMG> には ALT 属性が必要です。 HTMLチェッカーで文法をチェックするとこんな警告が出ます。 どのように修正すれば良いでしょうか。よろしくお願いします。

  • HTML、floatでのscrolバーの出現の有無

    HTMLについて質問させていただきます。 <body> <div id="oowaku"> <div id="main"> <div id="a" style="float:left; width:500px;"> <div id="b" style="float:right; width:200px;"> </div> </div> </body> (スペルミス等があった場合無視してください。) (この時、aとbの間には隙間が仮に300pxあるとします。(ブラウザの幅1000px)) (mainのwidthを指定しない場合widthは100%指定に自動でなっていると思います。) ここで、ブラウザの右端を左に向かって縮めると、 mainのwidthを ・px指定した時は、「aとbは位置固定」で、px指定したところまで縮み、pxより短くなるとスクロールバーに変わります。 ・%指定の時は、aとbの間の距離はブラウザーの横幅に合わせて、詰めてくれます。 しかし、%指定の時、aとbの合わせたwidthより、ブラウザの幅が短くなると、bはaの下に改行?されてしまいます。そしてaのpxより短くなって初めてスクロールバーに変わります。 後者の%指定(aとbの距離をブラウザの幅で詰めてくれる)でかつ、aとbの距離が無くなった時に改行?されることなく、スクロールバーにする方法はないでしょうか。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • HTML(画像の幅や高さの設定について)

    HTMLで画像の幅(width)や高さ(height)を設定する際、 次のようにピクセル「px」は省略してもよろしいのでしょうか? 【例】<img src="images/logo.gif" width="200" height="300">

  • PHP HTMLメールの送信

    下記のスクリプトにおいて、$message のHTML文を 送信先のメーラーに送信すると、HTML文がそのまま書かれている状態で、 メーラーの受信メールのなかで、コンテンツが表示されません。 どうすれば、メーラーの中で、HTMLのコンテンツそのものを 表示できるのでしょうか。 ご指導よろしくお願い致します。 「html_mail_test.php」 <?php // 新規ユーザーにメール送信 $to = "~@nifty.com"; // 送信先メールアドレス(新規ユーザー宛て) $subject = "HTMLメールテスト"; // 題名 $from = "~@co.jp"; $password = rand(1, 99999999); // 本文(個人情報+アンケート内容) $message = " <!doctype html> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-2022-jp\"> <style type=\"text/css\"> .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} .tg .tg-yw4l{vertical-align:top} </style> </head> <body> <table class=\"tg\"> <tr> <th class=\"tg-yw4l\"></th> </tr> <tr><td><img src=\"http://5247423.raindrop.jp/html_mail/image/.png\"></td></tr> </table> </body> </html> "; $to = mb_convert_encoding($to, "UTF-8", "auto"); // $toは、自動的にエンコードされない。 $subject = mb_convert_encoding($subject, "UTF-8", "auto"); $message = mb_convert_encoding($message, "UTF-8", "auto"); // EUCにエンコード mb_send_mail($to, $subject, $message, $from); // メール送信 ?>

    • ベストアンサー
    • PHP
  • HTMLメールで添付ファイルがついてしまう

    Win2000のOutlookExpressでHTMLメールを作成しました。 画像はダイレクトアドレスで指定しています。 ところが送信すると画像ファイルが添付されてしまいます。 作り方としてはエディターで作成し、ソースをアウトルックのHTMLメール作成でリッチテキスト形式で下のソースタブをクリックしてそこに貼り付けています。 自分宛に送信したら添付で画像ファイルがついてきてしまいました。ダイレクトに画像を指定しているのに何故添付がついてしまうのでしょうか? 添付をさせないようにはできますか? 受信したメールのソースを見て気が付いたのですが、自分は指定していない変なソースがくっついていました。 ■自分が指定したもの <img src="http://●●●.com/●●●.gif" > ■受信メールのソース <IMG src="mhtml:mid://00000580/!http://●●●●.com/●●●.gif" > 【mhtml:mid://00000580/!】が見覚えのないソースなのですが、これは自動てついてしまうのでしょうか? また、添付にしたくない場合は、その都度【】内のソースを削除してから送信しなければいけないのでしょうか? ご存知の方いらっしゃいましたら教えてください。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • HTMLメールについて・・・

    教えてください。HTML形式でメールをおくった場合、受信側で表示できるメーラーは? もしくは受信しても開けないメーラーがあれば教えてください。  顧客会員様にメルマガを送りたいのですがHTML形式で送ると表示できない場合があると聞いたので・・・。 ほとんどで開けるならHTML形式で送りますが、ダメな場合TEXT形式で送らなければいけませんよねぇ 現段階ではどんなメーラーもしくは環境で受信するのかは分かりません??? 是非ご回答よろしくお願いいたします _(._.)_ 

  • HTMLメールを送信する方法

    GmailやBecky!等のメーラーから、HTMLソースで記述したHTMLメールを送信する方法はありますか?Becky!でHTML設定にすると、HTMLメールは作れますが、HTMLソースではないので。

  • HTMLのwidthについて

    パソコンの画面幅より大きいwidthを指定した場合でも ブラウザ下の横スクロールバーを表示して、スクロールできるようにしたいのですが できるのでしょうか?

    • ベストアンサー
    • HTML