実際、郵送用のhtmlレイアウトでは、前世紀の90年代に精神的に移行し、当時の一般的なトリックをすべて大胆に使用する必要があります。
(私がそうであったように)それらに慣れていない人のために-私は思い出します:
1)レイアウト
もう一度- テーブル上のレイアウト (cssを使用した配置 、フロート、クリアなどを使用しない)、さらに、 mail.ruはすべてのtdに非常に印象的なパディングを自動的に追加します。これも考慮する必要があります
2)css
それでもスタイルが理解されている場合-もう1つの制限があります : すべてのスタイルはインラインである必要があります (つまり、 スタイル属性にある必要があります):
< div style ="..." > ... </ div >
3)左詰め、右詰め
理論的には、水平インデントは、追加のテーブルセルの助けを借りて昔に行われました...! 通常のWebサービス( gmail 、 yandex 、 ramblerなど)は、過去に多くの人に愛されている設計を理解しません。
< table cellpadding ="0" cellspacing ="0" border ="0" width ="100%" >
< tr >
< td width ="10" nowrap ></ td >
< td width ="100%" ></ td >
< td width ="10" nowrap ></ td >
</ tr >
</ table >
中央のセルは100%に拡大し( nowrapにもかかわらず)、左右のセルは消えます(つまり、幅はゼロになります)。したがって、 css (および「 mail.ru 」の組み合わせの場合) +ラバーデザイン "、明らかに、オプションはありません-すべてのセルの固定サイズのみ);
左のデフォルトのインデントで対応するタグを使用して、純粋なhtmlを使用して左のインデントを作成するというアイデアがありました-dd ...! Microsoft Office Word(!)のエンジンの助けを借りてhtmlページをレンダリングするoutlook 2007は怖くなり始めたため、オプションは表示されなくなりました。
4)パディングトップ、パディングボトム
使用する必要がある垂直インデントを作成するには、奇妙なことに- 写真 (!)、つまり、実際には「空の」画像を作成します(1×1ではなく、少なくとも10×10にして、フォルダに突然文字が表示されないようにします)スパム)そして、それに対応するインデントを形成するために希望の高さを設定することによって(もちろん、画像をdivに入れます、もちろん、なぜだと思いますか):
< div >< img src ="padding.png" alt ="" border ="0" height ="10" ></ div >
測定単位( px )は属性値に示されていないことに注意してください- 標準 (thanks、 alemiks )に従って。
5)フォント
ヘッドセット/フォントサイズ/色を変更するには、古風なフォントタグを使用して、毎回これらすべてのパラメーターを設定する必要があります(通常は、ブロックタグ内のすべてのテキストに対して)。
< font face ="tahoma,sans-serif" color ="#000000" size ="2" > </ font >
リンクの色を変更する必要がある場合、 フォントタグは;内にあります。
6)リンク
それでもリンクによって- ターゲット属性(はい、無効)に値_blankを追加することを忘れないでください(サイトがメールクライアントのウィンドウで直接開かないようにするため)。また、格子の空のリンクに「とりあえず」置くことに慣れている場合)、 Gmailやyandexがそのようなリンクをリンクとしてカウントしないことに驚かないでください。つまり、すぐに実際のアドレスを設定する方が良いでしょう。
7)色
背景色で塗りつぶされたテキストで長方形のブロックを作成するには、テーブル、行、セル、セルを作成する必要があります-bgcolor属性には、オプションはありません...さらに、16進形式で色を設定する場合、短縮レコードを使用します(たとえば、 #FFFFFFの代わりに#FFF )-この方法で設定された色は自動的に黒に変換されます。
8)テキスト内の写真
同じ素晴らしい時代のHTMLチュートリアルでは、画像の周りにテキストをラップする方法(CSSなし) -imgタグの属性、すなわちalign 、 vspace 、 hspaceを使用する方法を教えられましたが、これも使用できません:)一部のメールクライアント(およびその中のbatなど )はこれらの属性を無視しますが、 float:leftも曲がりくねって動作します(またはまったく動作しません)-結論:再びテーブルを保存します。
9)デザインの写真
なぜなら 実際、写真のアドレスを書き込むことはできません。imgタグを使用してすべてのデザインパターンを含める必要があります。また、同じバットで不要な(理解できない)インデントを防ぐために行間隔をリセットすることをお勧めします。
< div style ="line-height:0;" >< img src ="border.png" alt ="" ></ div >
透明なコウモリの画像(gifでさえも) がコウモリを黒で塗りつぶしていることを知っています。
10)プログラムとツール
...より正確には、その不在-ニュースレターをテストするために、残念ながら(そして驚くべきことに)、 Outlook Expressよりも良いものは見つかりませんでした-テンプレートに基づいてhtml文字を簡単に作成できます(メッセージ→作成→フォームの選択...)私はこの部分についてのアドバイスをhabrasocietyに感謝します...そして実際すべてについて:)
私の記事が最初です。 つまり Habrahabrに関する私の最初の記事ですが、もちろん、この分野の最初の研究ではなく、有用なリンクです-ここに:
- RunetメールシステムでのCSSサポート (ただし、 ランブラーなどのデータは古くなっています)。
- 電子メールでのCSSサポートのガイド:2007 Edition
- HTML形式のレターの作成方法 (翻訳済み)
そして、私が書いたものは研究のふりではありませんが、すべては個人的な経験によって裏付けられています。 私が言ったように、意見や追加は大歓迎です。
PS :誰かが個々の電子メールクライアントとWebサービスの正確な(そして最新の)データに興味があるなら、私はさらなる出版物を続けることができます。