1. ホーム
  2. html

[解決済み] CSSのmax-widthに相当する機能で、HTMLメールでも使えるものはありますか?

2022-06-19 15:09:52

質問

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

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

その代わりに、こうして <table width="98%">

CSSに頼らずにmax-widthも設定する方法はないでしょうか?

どのように解決するのですか?

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

と同じものを中央揃えで表示したいとします。 divmax-width350px . テーブルを作成し、幅を 100% . 表には3つのセルが並んでいます。中央の幅を設定する TD350 (HTMLの width 属性を使用)、これで完了です。

もしコンテンツを中央揃えではなく左揃えにしたい場合は、最初の空のセルを省けばよいのです。

<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/