1.キーポイント
表レイアウトは、文字の組版に使用されます。 インラインスタイルのみを使用します。つまり、タグに直接適用します。 一部のクライアントはこれらのタグ内のすべてを削除するため、 headタグとbodyタグにCSSを記述することは禁止されています。
そのような構造は頭と体では機能しません：
<link rel="stylesheet" type="text/css" href="/base.css"> <style type="text/css"></style>
携帯電話やタブレットを含むすべてのデバイスの組版を行う場合、文字の幅は600pxを超えてはなりません。 この値より大きい幅を使用すると、文字の幅がメールクライアントに収まりません。
2. HTMLタグに必要なプロパティ
テーブルレイアウトのhtmlタグには、余分なインデントや境界線を無効にし、将来のバグを軽減するプロパティがあります。 これらはすべてのHTMLメッセージタグで常に使用する必要があります。
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
border = "0" -フレームの厚さ（ピクセル単位）。
cellpadding = "0" -フレームからセルのコンテンツへのインデント。
cellspacing = "0" -セル間の距離。
style = "マージン：0; padding：0 " -一部のメールクライアントが追加する内側と外側のマージンをゼロにします。
<a href="#" style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;" target="_blank"></a> <span style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;"></span>
色：＃333333; フォント：10px Arial、sans-serif-すべてのリンクとスパンに常にこれらのプロパティを使用します。そうでない場合、メールクライアントはこれらのプロパティに値を追加します。
line-height：30px-すべてのリンクとスパンにも使用します。そうでない場合、メールクライアントは値を設定します。 また、このプロパティを使用して、行要素とブロック要素の間で上下にインデントできます。
-webkit-text-size-adjust：none-すべての小文字要素に必要で、iPhone iOS 6-7 / iPadデバイスのフォントサイズの問題を修正するために使用されます。 これらのデバイスのデフォルトでは、最小フォントサイズは13pxです。このプロパティはこの問題を解決します。
display：block-ラインアイテムをブロックします：
<img src="#" alt="" border="0" width="100" style="display:block;"/>
alt = " "-常に使用する必要のある必須プロパティは空のままにできます。
border = "0" -ピクセル単位の境界線の太さ（px）。
width = "100 "-画像の幅。画像が静的で実際のサイズが使用されている場合、高さheight = "100"も設定できます。 画像サイズを実際よりも小さくする必要がある場合は、 width =“ 30”プロパティを使用してサイズを制御すると、高さと幅の両方が比例して変更されます。
ディスプレイ：ブロック; -display：blockを設定しない場合、Outlookをハックし、画像にインデントを追加します。
3.レイアウトで使用できるHTMLタグ
<table> <tr> <td><a href="#"></a></td> <td><span></span></td> <td><img src="" alt=""></td> </tr> </table>
4.背景オーバーレイ
プロパティbackground = "" bgcolor = ""はタグにのみ適用できます
<table>
Safariブラウザーを使用してメールにアクセスすると、Gmailはこれらのプロパティを他のタグで認識しないためです。
バックグラウンドブレンディングにCSSプロパティを使用しないでください。一部のメールクライアントでは無視されます。
background: background-image: background-position: background-size:
5.インデント
インデントには、指定された高さまたは幅の空のテーブルセルを使用できますが、この方法は大量のコードを必要とするため、すでに古くなっています。 インデントは、CSS paddingプロパティを使用して実行できます。 このプロパティはすべてのタグに使用できますが、スパンタグに適用した場合、デスクトップOutlook 2007/10/13 +はインデントされないことに注意してください。
marginプロパティも機能しますが、Outlook.comメールサーバーのWebバージョンでは完全にサポートされていません。
テーブルセルにパディングを適用することをお勧めします。
<td style="padding: 10px;"></td>
または、インデントされた空のテーブルセルを使用します。
7. Doctype（DOCTYPE）
HTMLドキュメントの場合、DOCTYPEを使用する必要があります。 ブラウザにHTMLマークアップを解釈する方法を示します。 構文が異なるHTMLとXHTMLの異なるバージョンがあります。
文字の場合、最も適切なdoctypeは次のとおりです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
8.テキストを操作する
テキスト内のフレーズまたは単語を強調するために、テキストの特定のセクションを視覚的に強調することができます。 これを行うには、 font-weight：boldスタイルを使用できます。 フォントスタイル：斜体。 またはタグ：
<b></b>
太字テキスト、フォントの太さに類似：太字スタイル。
<i></i>
フォントスタイルに似た斜体の傾斜テキスト：斜体。
<br />
改行。
9.カラー
文字のすべての色は、3組の16進数（HEX） #ddddddとして指定されます。 また、サイトレイアウトでは省略形のエントリが使用されることもわかっています。 たとえば、 #ffffffは#fffに短縮できます。 しかし、これはレターのレイアウトでは必要ありません。一部のメールクライアントはそのようなレコードを理解しません。 また、すべて大文字で16進数のカラーコードを記述する必要はありません。 すべてのメールクライアントが感謝するわけではありません。 たとえば、 ＃D4D4D4は＃d4d4d4のように記述する必要があります。
RGBカラー記録も適切に認識されません。 たとえば、そのようなRGBカラーエントリ（240,248,250 ）は機能しません。
10.写真
デフォルトでは画像を表示せず、特定のボタンをクリックした後にのみ画像が表示される電子メールクライアントがあります。 これにより、レターのレイアウトにいくつかの問題が発生します。 画像が表示されず、幅と高さが一緒に設定されていない場合、メールクライアントはこの画像の大きさと空き領域のレンダリング方法を知りません。 したがって、画像はすべての空き領域を占有します。 ひどいですね。 そのような問題を取り除くために、常に画像の幅と高さを書いてください。 これが不可能な場合は、画像の幅を指定すると、文字が引き裂かれることはありません。
<img src="#" alt="" border="0" width="150" height="150" style="display:block;"/>
11.問題解決
メーリングリストを使用する場合、標準的なバグはありません。 これは、さまざまな電子メールクライアントによる文字の表示の微妙な違いによるものです。 最も一般的なものを検討してください。
1. スパンまたはその他の小文字のタグを使用する場合、Gmailは電話番号と電子メールアドレスをリンクでラップし、青色のクラスを割り当てます。
この問題を解決するには、最初にリンクを折り返すために電子メールと電話が必要です。 リンクの目的のスタイルも指定する必要があります。
電話の場合：
<a href="tel:0 800 303 505" value="+380800303505" target="_blank" style="">0 800 303 505</a>
メールの場合：
<a href="mailto:exemple@gmail.com" target="_blank" style="">exemple@gmail.com</a>
2.文字の外側の背景を完全な幅と高さにするには、メインテーブルにwidth = "100％"を追加し、 tdに height = "100％"を設定する必要があります。 例：
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td height="100%">
テーブルの高さを「100％」に設定する必要はありません。メインテーブル内でセルを垂直に配置する際に問題があります。
3. WebバージョンのOutlookメールクライアントでは、デフォルトでメールクライアントが独自の行の高さの値を追加するため、小文字の要素を使用することはお勧めできません。
display：block; "-Outlookメールクライアントでline-heightプロパティを表示する問題を解決します。使用しない場合、メールクライアントはline-height値を無視し、そのline-height値を追加します：141％;。
12.フォント
メーリングリストでは、すべてのデバイスに存在する標準フォントセットのみが許可されます。 すべてのデバイスにある安全なフォントのリストをご紹介します。
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: Georgia, serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif;
したがって、これらのフォントは、恐れやリスクなしに郵送で使用できます。 それでも@ font-faceルールで完全に非標準のフォントを使用する場合は、注意してください。このルールはIOS、Googleメール、Android 4（Gmail）でのみ機能します。
13.アダプティブレイアウト
現時点では、膨大な数のアダプティブライティング組版方法がありますが、そのうちの1つに焦点を当てます。
この方法の本質は次のとおりです。デバイスの画面幅を変更すると、レターのサイズが自動的に調整されます。 十分なスペースがない場合、水平に配置された屋内ユニットは、お互いの下にジャンプします。そのため、欠落している文字のすべての要素が下がります。
レターを画面サイズに調整するシステムは、スタイルとレターのメインテーブルの直後にあるセンタータグを使用して実装されます。 すべてのコンテンツがセンタータグでラップされていることがわかります。
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> <tr> <td> <center style="max-width: 600px; width: 100%;"> </center> </td> </tr> </table>
水平方向に複数のブロックがあり、幅を変更するときにこれらのブロックが互いに下になる場合は、スタイル付きのspanタグでラップする必要があります。
<span style="display:inline-block; width:260px;"> </span>
一般的なレイアウト構造は次のようになります。
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <center style="max-width: 600px; width: 100%;"> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!-- 1 --> <span style="display:inline-block; width:300px;"> </span> <!-- 1 --> <!-- 2 --> <span style="display:inline-block; width:300px;"> </span> <!-- 2 → </td> </tr> </table> </center> </td> </tr> </table>
したがって、サイズが600pxで、それぞれ300pxの2つのブロック（300px + 300px = 600px）の内部テーブルがあります。 メインページのサイズがさらに1ピクセル小さくなると、ブロックに十分なスペースがなくなり、ブロック番号2がブロック番号1になります。
MS Outlookデスクトップでは構造全体が機能しないため、具体的に確認し、 centerタグとspanタグの代わりに通常のテーブルを使用します。
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td align="center"> <center style="max-width: 600px; width: 100%;"> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"><tr><td> <![endif]--> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"> <table border="0" cellpadding="0" cellspacing="0" width="300" align="center"><tr><td> <![endif]--> <!-- 1 --> <span style="display:inline-block; width:300px;"> </span> <!-- 1 --> <!--[if gte mso 9]> </td></tr></table> </td> <td align="center"> <table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td> <![endif]--> <!-- 2 --> <span style="display:inline-block; width:300px;"> </span> <!-- 2 --> <!--[if gte mso 9]> </td></tr></table> </td> </tr></table> <![endif]--> </td> </tr> </table> <!--[if gte mso 9]> </td></tr></table> <![endif]--> </center> </td> </tr> </table>
アダプティブレイアウトには（a）メディアルールを使用できますが、このプロパティのメールクライアントがサポートされていないため、この方法は廃止されました。
次の記事では、文字のレイアウトでのCSS 3プロパティの使用について説明します。 ニュースレターでCSSアニメーションについても説明します。