#

Size: px

Start display at page:

Download "#"

ひろみたもん
4 years ago
Views:

1 #

2 1 1: 2 2 Examples 2 HTML 2 4 CSS 5 7 2: CSS / HTML Examples : HTMLOutlook 11 Examples Outlookmso-table-lspacemso-table-rsp : HTML Examples 17 CSS 17

3 You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: It is an unofficial and free ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official . The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to 1

4 1: メールをいめる HTML メールは HTML CSS のサブセットをしてグラフィックステーブルのおよびリンクをして Web ページのようなメールメッセージをフォーマットしますにつリンク HTMLメールテンプレートのとコーディングについてんだことメールのコーディングメールデザインガイド MailChimpのリソースプロフェッショナルメールデザイン Examples HTML とプレーンテキスト HTMLメールは HTML CSSのサブセットをしてグラフィックステーブルのおよびリンクをしてWebページのようなメールメッセージをフォーマットしますメールをするにはプレーンテキストとHTMLのをすることがですメールをマルチパートMIME としてすることでこれをいますほとんどのメールサービスプロバイダにはにMIMEをするツールがあります HTMLバージョンにづいてプレーンテキストバージョンをするものもあればサードパーティツールもありますテキストのみのメールの # TITLE GOES HERE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst. Learn more: ## Subheader goes here Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi commodo elit sed quam auctor, ut facilisis odio aliquam. In hac habitasse platea dictumst. Learn more: Footer and Sender information Unsubscribe here: 2

5 3

6 は Apple Watch およびこの MIME タイプをサポートするそののクライアントにのみされますメールクライアントとレンダリングエンジンメールクライアントはさまざまなレンダリングエンジンをして HTML メールをレンダリングします Apple Mail MacOutlook Androidメール ios MailでWebKitをする Outlook 2000/02/03でInternet Explorer 6をする Outlook 2007/10/13はMicrosoft Wordをします Webクライアントはブラウザのそれぞれのエンジンをしますたとえば SafariはWebKitをし Chrome は Blink をしますのクライアントはのスタイルをのにしますGmailはすべての <td> フォントをfont-family: arial,sans-serif; メールのレンダリングにをえるがあります 2016はすべてのGmailで <link> タグ <style> タグのすべてのCSS およびインラインされていないのCSSはされていました 2016にGmailはほとんどので <style> タグとメディアクエリをサポートしめましたのアップデートをします 4

7 5

8 メールクライアントはやフレックスボックスのようなものをサポートしていないかあるいはさまざまなでそれをしています <div> はさまざまなクライアントに Outlook でのとボックスモデルのもあります <div> のみをしてメールをコードするはいくつかありますがレイアウトのためにテーブルをるがです <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello!</title> </head> <body> <table cellspacing="0" cellpadding="0" border="0" width= 600 role= presentation > <td width="200"> <h1>hello World!</h1> <td width="400"> <p>this is a simple paragraph.</p> </body> </html> インラインCSS スタイルをインラインでするとスタイルよりもれたスタイルWebメールクライアントスタイルなどよりもされますまた CSSをやのCSSファイルからりくメールクライアントのりにもしますインラインCSSはすべてのメールクライアントでのあるをするのです <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello!</title> </head> <body style="background: #000000;"> <table cellspacing="0" cellpadding="0" border="0" width= 600 role= presentation style="margin: auto; background: #ffffff;"> <td width="200" style="padding: 20px; background-color: #eeeeee;"> <h1 style="font-weight: bold; color: #444444; font-family: Georgia, serif;">hello World!</h1> <td width="400" style="padding: 20px;"> <p style="color: #444444; font-family: arial, sans-serif; margin: 0;">This is a simple paragraph.</p> </body> </html> CSS をインラインするためのオプションがいくつかあります 6

9 CSSインラインでくエディタでローカルスニペットをするこのような WebベースのCSSインライナーをするこのようなプログラマティックな CSSインライナをするこのようなビルドプロセスやテンプレートをするメールサービスプロバイダがあなたのためにインラインをできるようにしますサポートしているすべてのメールクライアントのメールのコーディングされたコーディングハイブリッド / スポンジ div のメールですることはできませんにされています div をにレンダリングできるメールクライアント Outlook とはなりますがありますのは Gmail アプリまだされていないアップデートサムスンのデバイスおよびメディアクエリをみまないのメールクライアントでするメールのコーディングをしています Outlook のの Outlook のはメールのレンダリングまたは Outlook のフォールバックなどののものをするににです <!--[if (gte mso 9) (IE)]> のコードは Microsoft Outlook 9 または IE Outlook Version 9 Outlook Version 10 Outlook Version 11 Outlook Version 12 Outlook Version 14 Outlook Version 15 のバージョンがリストされていますハイブリッドメールテンプレートのステップはな HTML をつがしやすいようにされていますにラッパーテーブルからめますこのラッパーテーブルはにわたってそしてクラスのコンテナをしています <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <td>[content GOES HERE] </tbody> 7

10 そのをみれないヘッダーの CSS をみるメールクライアントのメディアクエリをしますメディアクエリはすべてのをとしコンテナーを 700 only screen and (max-width : 700px) {.container{width:700px;} } にクラスコンテナきを 700 ピクセルにつための outlook をします <!--[if (gte mso 9) (IE)]> <table width="700" align="center" cellpadding="0" cellspacing="0" border="0"> <td align="left" valign="top" width="700"> <table class="container" width="100%" border="0" cellspacing="0" cellpadding="0" style="width: 100%; max-width: 700px;"> <tbody> <td valign="top" bgcolor="#ffffff" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px;">[CONTENT GOES HERE] </tbody> <!--[if (gte mso 9) (IE)]> のコードはテンプレートのしを 700px にするはずですすぐのためにのコードではテンプレートに 350px の 2 つのしいがされます <!--[if (gte mso 9) (IE)]> <table width="700" align="center" cellpadding="0" cellspacing="0" border="0"> <td align="left" valign="top" width="350"> <div style="width: 350px; display: inline-block; vertical-align: top;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <td>[column CONTENT HERE] </tbody> </div> <!--[if (gte mso 9) (IE)]> <td align="left" valign="top" width="300"> 8

11 <div style="width: 350px; display: inline-block; vertical-align: top;"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <td>[column CONTENT HERE] </tbody> </div> <!--[if (gte mso 9) (IE)]> このあなたのやデザイナーにがありますがしたらワイヤーフレーミングにすることがですがコーディングにったらきはありませんにはそのスタイルではなくレベルでされたがです <img src = "" width = ""... インラインCSSをすることもできますしすべてのクライアントがCSSをでサポートしているにのみで CSS をすることもできますオンラインでメールをいめるをむメールをいめる 9

12 2: CSS / HTML サポートきすべての CSS プロパティまたは HTML タグがすべてのメールクライアントでサポートされているわけではありませんここではそののあるをできます Examples ビジュアルデコレーションビジュアルデコレーションをするがサポートされていないCSSプロパティはイメージタグできえることができます border-radiusはyahoo! ではサポートされていませんメール Outlook 2007/10/13 + Outlook 03 / Express / Mail Android 4Gmail+ このをするにはボーダーのあるつまりのボタンをとしてすることができます <td><img src="img-border-left.png"><td> <td style="background: #000; color: #fff">button Text <td><img src="img-border-right.png"><td> ここではけてイメージとしてわりにするべきプロパティのリストをします border-radius text-shadow box-shadow text-fill-color text-fill-color text-fill-stroke オンラインで CSS / HTML サポートをむサポート 10

13 3: HTML メールのと Outlook のさ Examples テーブルセル <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"> <td bgcolor="#dddddd" style="backgroundimage:url(' background=" width="100%" height="300"> <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=" color="#ffffff" /> </v:rect> <td bgcolor="#33cc99"> <table border="0" cellpadding="5" cellspacing="0"><td height="5"><table border="0" cellpadding="0" cellspacing="0"><td> <td bgcolor="#ffff99" style="backgroundimage:url(' background=" width="100%" height="300"> <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=" color="#ffffff" /> </v:rect> </center> </body> </html> OSX でWindows 7のVMWareをってOutlook 2010でテストみ 11

タイルりのテーブルのセルの <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%"> <td

14 タイルりのテーブルのセルの <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%"> <td bgcolor="#dddddd" style="backgroundimage:url(' background=" width="100%" height="300"> <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=" color="#ffffff" /> </v:rect> 12

15 </center> </body> </html> OSX でWindows 7のVMWareをってOutlook 2010でテストみされたののセルのイメージ 13

16 ここでは 2 のをしますのには 3 つのしたイメージをつ 3 つのがあり 2 つのは 1 つのイメージとしてされます <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <td style="width: 300px; height: 80px; background-image: url(' <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=" /> <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> <table width="300" border="0" cellspacing="0" cellpadding="0" style="bordercollapse: collapse;"> <td height="80" align="center" valign="top" style="color:#ffffff;fontsize:20px;"> <span>text</span> </div> </v:shape> <td style="width: 100px; height: 80px; background-image: url(' <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=" /> <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> <table width="80" border="0" cellspacing="0" cellpadding="0" style="bordercollapse: collapse;"> <td height="80" align="center" valign="top"> <span>text</span> </div> </v:shape> <td style="width: 200px; height: 80px; background-image: url(' 14

17 <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=" /> <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> <table width="200" border="0" cellspacing="0" cellpadding="0" style="bordercollapse: collapse;"> <td height="80" align="center" valign="top" style="color:#ffffff;fontsize:20px;"> <span>text</span> </div> </v:shape> <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <td style="width: 600px; height: 150px; background-image: url(' <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=" /> <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> <table width="600" border="0" cellspacing="0" cellpadding="0" style="bordercollapse: collapse;"> <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;"> <span>text</span> </div> </v:shape> OSX でWindows 7のVMWareをってOutlook 2010でテストみ 15

スペーサのディメンションやパディングがあってもコンテンツをたないメールクライアント Windows デスクトップ Outlook などのではテーブルがりたたまれますこれらのクライアントがスペーサーテーブルをりまないようにするにはのコンテンツとしてのをたすの font-size と line-height ゼロにして <table> のにをえないようにし

18 スペーサのディメンションやパディングがあってもコンテンツをたないメールクライアント Windows デスクトップ Outlook などのではテーブルがりたたまれますこれらのクライアントがスペーサーテーブルをりまないようにするにはのコンテンツとしてのをたすの font-size と line-height ゼロにして <table> のにをえないようにし <table> スペーサーのにをえるのはさまたはだけです <table border="0" cellpadding="0" cellspacing="0" role="presentation"> <td height="40" style="font-size: 0; line-height: 0;"> 16

19 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; } オンラインで HTML メールのと Outlook のさをむメールのと outlook のさ 4: HTML メールリセットきウェブとにいくつかのリセットCSSをメールにするとよいでしょう WebページをするときとじようにメールにCSSリセットをするとのメールクライアントにコードがどのようにレンダリングされるのかをするのにちますそれぞれのスタイルとコードのがあります Examples メールの CSS をリセットする 17

20 の 18

cocos2d-x #cocos2d-x

cocos2d-x #cocos2d-x 1 1: cocos2d-x 2 2 Examples 2 Mac OS X 2 2 2 2 Windows 3 3 3 4 8 You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: cocos2d-x It