html電子メール：基本レイアウトを実装する方法

-1

私はhtml電子メールテンプレートの基本レイアウトを設計しようとしています。私が見たほとんどの例では、メインラッパーテーブルを使用しています。私の代わりにこの書いた：あなたが見ることができるようhtml電子メール：基本レイアウトを実装する方法

<body> 
<center> 
    <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
    <tr> 
     <td> 
     <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
      <tr> 
      <td> 
       <img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" /> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
    </table> 
    <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center"> 
    <tr> 
     <td width="50%"> 
     <table align="center"> 
      <tr> 
      <td> 
       <p>content</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
     <td width="50%"> 
     <table align="center"> 
      <tr> 
      <td style="text-align:center"> 
       <p>content</p> 
      </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 


    </table> 
</center>

は、画像バナーに、拳テーブルがあり、その後、代わりに第二列、別の独立したテーブルがあります。アプローチとして正しいですか？私はセクションタグを使ってウェブサイトを分けたようにしました。

出典

2017-09-25 Lime In The Coconut

''私の提案は 'width：100％;'を取り除くことです。 'width =" 600 "'はOutlookにとってうまくいくはずです。 'max-width：600px;は600より幅広い何も宣言していないのに、ウィンドウの100％に展開するメールクライアントもあります。 – gwally

あなたの答えはどれですか？ – Syfer

私はあなたのコードをとり、若干変更して、@ gwallyが示唆しているものに追加しました。以下のコードは、メディアクエリ（Gmail Appを含む）をサポートするすべてのデバイスで動作します。どのように動作するかを確認するには、コードをスピン（実行コード、フルスクリーンにしてからブラウザのサイズを変更する）にしてください。

より小さいデバイスをターゲットにする場合は、メディアクエリを480pxに変更できます。

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Lime in the coconut</title> 
 
\t <style type="text/css"> 
 
\t \t .container{width:600px;} 
 
\t \t @media only screen and (max-width:601px) { 
 
\t \t \t .container{width:100% !important;} 
 
\t \t \t .banner img{width:100% !important; height:auto !important;} 
 
\t \t } 
 
\t </style> 
 
</head> 
 

 
<body> 
 
<center> 
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto"> 
 
    <tr> 
 
     <td> 
 
     <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;margin: 0 auto"> 
 
      <tr> 
 
      <td class="banner"> 
 
       <img src="https://i.stack.imgur.com/AKVzJ.png" alt="" style="max-width:600px;height:auto" width="600" /> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto"> 
 
    <tr> 
 
     <td width="50%"> 
 
     <table border="0" align="center" cellpadding="5" cellspacing="0"> 
 
      <tr> 
 
      <td> 
 
       <p>content</p> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
     <td width="50%"> 
 
     <table border="0" align="center" cellpadding="5" cellspacing="0"> 
 
      <tr> 
 
      <td style="text-align:center"> 
 
       <p>content</p> 
 
      </td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 

 

 
    </table> 
 
</center>

私はあなたが何をしてみましょう。

出典

2017-09-25 23:42:18 Syfer

はい、これは完全に実行可能なアプローチです。

出典

2017-09-25 19:13:01 Amorandron

html電子メール：基本レイアウトを実装する方法

答えて

関連する問題