HTMLメールで機能するCSSの最大幅に相当するものはありますか?


114

広く使用されているすべての電子メールクライアントで適切に表示されるHTML電子メールを作成しようとしています。メール全体を表で囲みます。幅は使用可能な幅の最大98%ですが、800ピクセル以下にする必要があります。このような: <table style="width:98%; max-width:800px;">

しかし、この Outlook 2007によると、CSSのwidthプロパティはサポートされていないため、そのようにはしていません。

代わりに、私はこれをやっています: <table width="98%">

CSSに依存せずに最大幅を設定する方法はありますか?


1
@MarkNugentからの回答への受け入れられた回答を更新しました。それは、それがコンセンサスを集めたように思われるためです-それは4年が遅すぎて私にとって役に立たなかったとしても。:)
Tim Goodman

回答:


224

はい、max-widthテーブルを使用してエミュレートする方法があるため、レスポンシブでOutlookに適したレイアウトを実現できます。さらに、このソリューションは条件付きコメントを必要としません。

あなたが中心の同等たいとdivしてmax-widthのを350px。テーブルを作成し、幅をに設定し100%ます。テーブルの行には3つのセルがあります。中央の幅TD350widthCSSではなくHTML 属性を使用して)に設定すれば、完了です。

コンテンツを中央揃えではなく左揃えにする場合は、最初の空のセルを省略します。

例:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table> 

jsfiddleでテーブルに境界線を付けて、何が起こっているのかを確認できるようにしますが、実際には必要ありません。

http://jsfiddle.net/YcwM7/


18
これがここでの最良の答えです^^^。受け入れられた回答と条件付き回答を無視します。
Nick Manning

4
誰かを時間を節約するために、空の<td>要素の少なくとも1つが必要です。そうしないと、コンテンツを含む<td>が<tr>全体に拡大されます。しかし、これは間違いなく提供されているソリューションの中で最高のソリューションです。
Chris Strickland

2
:@PhyllisサザーランドあなたはインラインIMGサイズを削除してそれを交換してみてくださいstyle="max-width: 100%; height: auto; width: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;"
morespace54

5
内側の幅に単位を追加しないように注意してください。そうしないと機能しません。つまり、width = "
350px

3
:@PhyllisSutherland画像の修正見つかっ <img src="file.jpg" "width="350" alt="" style="display:block;width:100%" /> litmus.com/community/discussions/...
cbron

34

条件付きhtmlコメントを使用してOutlook 2007にできるトリックがあります。
以下のコードは、Outlookのテーブルが最大幅ではなく800ピクセルの幅であることを確認しますが、ウィンドウ全体にテーブルを広げるよりもうまく機能します。

<!--[if gte mso 9]>
<style>
#tableForOutlook {
  width:800px;
}
</style>
<![endif]-->

<table style="width:98%;max-width:800px">
<!--[if gte mso 9]>
  <table id="tableForOutlook"><tr><td>
<![endif]-->
    <tr><td>
    [Your Content Goes Here]
    </td></tr>
<!--[if gte mso 9]>
  </td></tr></table>
<![endif]-->
<table>

6
すばらしい提案ですが、これはクラスではなくIDセレクターであるため、テーブル要素の幅
属性

これは素晴らしい。1つの問題を除いて、幅を設定することにより、Outlookは電子メールを指定されたサイズよりも小さくしません。幅を設定しないと、メールは画面全体に拡大されます。毒を選んでください:)
コーディネーター14

13

短い答え:いいえ。

長い答え:

固定形式はHTML電子メールでより適切に機能します。私の経験では、HTMLメールに関しては1999年のふりをするのが一番です。CSS(style = "width:650px")ではなく、テーブル定義で可能な限りHTML属性(width = "650")を明示的に使用してください。パーセンテージではなく、固定幅を使用します。幅650ピクセルのテーブル幅は安全な賭けです。インラインCSSを使用してテキストプロパティを設定します。

「HTMLメール」で何が機能するかではなく、HTMLをレンダリングするための大量のメールクライアントとその限られた(Gmail、Hotmailなどの場合は意図的にそうした)機能の問題です。


ええ、それは私が期待していたことのようなものですが、私は尋ねると思いました。
Tim Goodman

35
固定幅を650に設定すると、モバイルメールクライアントでメールがひどく見えます。
DrewB

6
-1:実世界ではモバイルデバイスのサイズが比較的小さいため、見た目はひどいです。これは、ズームやパンを行わないと、デザイン内のテキストが読めないほど小さくなることを意味します。キャンペーンモニターガイドのレスポンシブメールデザインをご覧ください。
Karl Horky 2013

1
-1もモバイルクライアントでこれに対処しただけで、幅が固定されていることが問題でした。
ブライアンフィッツジェラルド2013年

7
年は2015年です。モバイルデバイスはどこにでもあります。あなたは愚かな見通しのためにモバイルデバイスを忘れることを言っているのですか?私は言う、見通しを忘れます。そしてマイクロソフトからの他のすべてのくだらない製品。
refaelio 2015

5

パーティーに少し遅れますが、これはそれを成し遂げるでしょう。ほとんどの人が使用するので、例は600のままにしました。

Shayの例と同様ですが、サポートされている残りのクライアントで動作するmax-widthと、Outlook '11に必要な拡張(メディアクエリ)を防ぐための2番目の方法も含まれています。

頭の中で:

  <style type="text/css">
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>

体内で:

<!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<div class="maxW" style="max-width:600px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>
main content here
    </td>
  </tr>
</table>

</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->

これを使用した別の例を次に示します。モバイルデバイス用の応答性の高い注文確認メール?


0

これは私のために働いたソリューションです

https://gist.github.com/elidickinson/5525752#gistcomment-1649300、おかげ@フィリップ- klinz

<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
     <tr>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
        <td style="padding:0px;margin:0px;" width="560"><!-- max width goes here -->

             <!-- PLACE CONTENT HERE -->

        </td>
        <td style="padding:0px;margin:0px;">&nbsp;</td>
    </tr>
    <tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20">&nbsp;</td></tr>
</table>

もっと簡潔な例を
教え

@EdLアイデアは、それメールフレンドリーにする最も簡潔な方法であるということmax-widthです。このすべてが置き換えられ<div style="max-width: ...px">...</div>ます。私は、この主旨を見つけたとき、これが作られたものは、Outlook 2010、2013年に右見て、2016年という唯一のソリューションだったに取り組んでいた電子メールのために
ヘンリー

@henry私はすべてのセルパディングのfont-size属性などを参照していました。属性としてwidth = "500"を指定しない限り、画像はトリッキーなものです。500はピクセル単位の幅で、outlookは画像をフルサイズにします( wrt。画像ファイル)これは一般的に固定幅になります。
EdL 2017年

これは私のコードではないのでそのままにしておきます—私は要旨から引用するだけです—しかし、私はそれをコミュニティーwikiにしました。私は信じている明示的に指定するために必要な0px paddingのをしてmarginねなど0 cellpaddingcellspacing。指定line-heightが尊重されていないfont-size時間を埋めるための代わりとして機能する可能性heightがあります(すべてtrのsでテストしてから、すべてのsでテストして、td必要な場所を正確に確認したいと思います)。@EdLあなたがより軽い解決策をうまく機能させることができるなら、これは素晴らしいでしょう-こことそのリンクされた要旨でそれを投稿してください
ヘンリー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.