email
HTMLメールの構成とOutlookの複雑さ

Android ASP.NET C# Language CSS HTML Java Language JavaScript PHP Python Language Ruby on Rails
サーチ…


背景画像

全幅テーブルセル背景画像

<html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style>
    v:* { behavior: url(#default#VML); display: inline-block; }
    </style>
    </head>
    <body>
        <center>
        <table width="100%" height="20">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                        <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                    </v:rect>
                <![endif]-->
                </td>
            </tr>
            <tr>
                <td bgcolor="#33cc99">
                    <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>
    </body>
</html>
  • OSX 10.9.2でWindows 7のVMWareを使ってOutlook 2010でテスト済み

ここに画像の説明を入力

タイル張りの全幅​​テーブルのセルの背景画像

    <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style>
                v:* { behavior: url(#default#VML); display: inline-block; }
            </style>
        </head>

        <body>

        <center>
        <table width="100%">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>

        </body>
    </html>
  • OSX 10.9.2でWindows 7のVMWareを使ってOutlook 2010でテスト済み

ここに画像の説明を入力

指定された幅の表のセルの背景イメージ

ここでは2行の例を示します。最初の行には3つの独立した背景イメージを持つ3つの列があり、2つ目の行は1つの背景イメージとして表示されます。 

    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
            <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
            <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
            <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>
    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
            <!--[if gte mso 9]>
                <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>
  • OSX 10.9.2でWindows 7のVMWareを使ってOutlook 2010でテスト済み

ここに画像の説明を入力

スペーサの作成

ディメンションやパディングがあっても、コンテンツを持たない電子メールクライアント（WindowsデスクトップOutlookなど）の一部では、テーブルが折りたたまれます。

これらのクライアントがスペーサーテーブルを折り畳まないようにするには、不可視の&nbsp;コンテンツとしての役割を果たす。文字のfont-sizeとline-heightゼロにして、 <table>の寸法に影響を与えないようにし<table> 。スペーサーの寸法に影響を与えるのは、高さ（または幅）属性だけです。 

<table border="0" cellpadding="0" cellspacing="0" role="presentation">
    <tr>
        <td height="40" style="font-size: 0; line-height: 0;">
            &nbsp;
        </td>
    </tr>
</table>

1x1の透明な.gifをスペーサーとして使用するのが一般的でしたが、このメソッドは推奨されていません。

要素の間隔

Outlookでは、レイアウトに関連する頭痛の原因となる要素の左右に少しの間隔を追加することがあります。ベンダ固有のmso-table-lspaceおよびmso-table-rspace CSSプロパティを使用することで、これらの領域を取り除き、Outlookによって引き起こされるその他の数百万の問題に取り組むことができます。 

table{
    mso-table-lspace:0pt;
    mso-table-rspace:0pt;
}

画像のサイズ変更

幅または高さのタグを使用してマークアップ内の画像のサイズを変更すると、Internet Explorerのブラウザで問題が発生する可能性があります。あなたの読者がブラウザ内の電子メールを閲覧していて、その電子メールに流体画像があると、サイズが変更されるとかなり醜いように見えます。 -ms-interpolation-modeを使用する：bicubic;あなたの画像が少し良く見えるようにします。 

img{
    -ms-interpolation-mode:bicubic;
}


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow