ããããããã€ã¹ã§å®ç§ã«è¡šç€ºãããã¬ã¹ãã³ã·ããªã¡ãŒã«ãã³ãã¬ãŒãã®æ§ç¯æ¹æ³ãåŠã³ãŸãããã广çãªã¡ãŒã«ããŒã±ãã£ã³ã°ã§äžçäžã®ãªãŒãã£ãšã³ã¹ã«ãªãŒãããŸãã
ã¡ãŒã«ãã³ãã¬ãŒãéçºïŒã°ããŒãã«ãªãŒãã£ãšã³ã¹ã®ããã®ã¬ã¹ãã³ã·ããã¶ã€ã³ã極ãã
仿¥ã®çžäºã«æ¥ç¶ãããäžçã«ãããŠãã¡ãŒã«ããŒã±ãã£ã³ã°ã¯æœåšé¡§å®¢ã«ãªãŒãããæ¢åã®é¢ä¿ãè²ãããã®åŒ·åãªããŒã«ã§ããç¶ããŠããŸããããããäžçäžã§å€æ§ãªããã€ã¹ãã¡ãŒã«ã¯ã©ã€ã¢ã³ãã䜿çšãããŠããããããã¹ãŠã®ãã©ãããã©ãŒã ã§å®ç§ã«è¡šç€ºãããã¡ãŒã«ãã³ãã¬ãŒããäœæããããšã¯éèŠãªèª²é¡ã§ãããã®å æ¬çãªã¬ã€ãã§ã¯ãã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ã®ååãšãã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããèªè ã®å Žæãããã€ã¹ã«é¢ä¿ãªãã广çã«ãªãŒãã£ãšã³ã¹ãšã€ãªããããšãå¯èœã«ããŸãã
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ãéèŠãªçç±
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ã¯ãã¡ãŒã«ãé²èЧãããããã€ã¹ã®ç»é¢ãµã€ãºã«ã·ãŒã ã¬ã¹ã«é©å¿ããããšãä¿èšŒããŸããããã¯ããã€ãã®çç±ããäžå¯æ¬ ã§ãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäž: ã¢ãã€ã«ããã€ã¹ã§èªã¿ããããæäœããããã¡ãŒã«ã¯ãããè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããšã³ã²ãŒãžã¡ã³ããšã³ã³ããŒãžã§ã³çã®åäžã«ã€ãªãããŸãã
- éå°çã®åäž: ã¡ãŒã«ãã¢ãã€ã«ããã€ã¹ã§æ£ãã衚瀺ãããªãå Žåãåä¿¡è ã¯ãããèªãŸãã«åé€ããŠããŸãå¯èœæ§ãé«ããªããŸãã
- ãã©ã³ãã€ã¡ãŒãžã®åäž: ãããã¶ã€ã³ãããã¬ã¹ãã³ã·ããªã¡ãŒã«ãã³ãã¬ãŒãã¯ããããã§ãã·ã§ãã«ã§ä¿¡é Œæ§ã®ããã€ã¡ãŒãžãäŒãããã©ã³ãã®ä¿¡é Œæ§ã匷åããŸãã
- ã°ããŒãã«ãªãŒã: å°åã«ãã£ãŠããã€ã¹ã®å¥œã¿ã¯ç°ãªããŸããã¬ã¹ãã³ã·ããã¶ã€ã³ã¯ãæè¡ã«é¢ä¿ãªããããªãã®ã¡ãã»ãŒãžããã¹ãŠã®äººã«å¹æçã«å±ãããšãä¿èšŒããŸããäŸãã°ãå€ãã®çºå±éäžåœã§ã¯ã¢ãã€ã«å©çšçãç¹ã«é«ãã§ãã
- ã¢ã¯ã»ã·ããªãã£æšæºãžã®æºæ : ã¬ã¹ãã³ã·ããã¶ã€ã³ã¯ãã°ãã°ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ã«æ²¿ã£ãŠãããé害ãæã€äººã ãå«ãããåºç¯ãªãªãŒãã£ãšã³ã¹ãããªãã®ã¡ãŒã«ãå©çšã§ããããã«ããŸãã
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ã®æ žãšãªãåå
广çãªã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ãæ¯ããããã€ãã®æ žãšãªãååããããŸãïŒ
1. æµåçãªã¬ã€ã¢ãŠã
æµåçãªã¬ã€ã¢ãŠãã¯ãèŠçŽ ã®ãµã€ãºãå®çŸ©ããããã«åºå®ãã¯ã»ã«å¹ ã®ä»£ããã«ããŒã»ã³ããŒãžã䜿çšããŸããããã«ãããã¬ã€ã¢ãŠãã¯ç°ãªãç»é¢ãµã€ãºã«é©å¿ã§ããŸããäŸãã°ãããŒãã«ã®å¹ ã600pxã«èšå®ãã代ããã«ã100%ã«èšå®ããŸãã
äŸ:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
2. æè»ãªç»å
æµåçãªã¬ã€ã¢ãŠããšåæ§ã«ãæè»ãªç»åã¯å©çšå¯èœãªã¹ããŒã¹ã«åãããŠæ¯äŸçã«ãµã€ãºã倿ŽããŸããããã«ãããå°ããªç»é¢ã§ç»åãã³ã³ããããæº¢ãåºãã®ãé²ããŸãã
äŸ:
ç»åã¿ã°ã«ä»¥äžã®CSSã远å ããŸãïŒ
<img src="your-image.jpg" style="max-width: 100%; height: auto;">
3. ã¡ãã£ã¢ã¯ãšãª
ã¡ãã£ã¢ã¯ãšãªã¯ãç»é¢å¹ ãªã©ã®ããã€ã¹ã®ç¹æ§ã«åºã¥ããŠç°ãªãã¹ã¿ã€ã«ãé©çšããCSSã«ãŒã«ã§ããããã«ãããç°ãªãç»é¢ãµã€ãºã«å¯ŸããŠç°ãªãã¬ã€ã¢ãŠããäœæã§ããŸãã
äŸ:
ãã®ã¡ãã£ã¢ã¯ãšãªã¯ãæå€§å¹ ã600ãã¯ã»ã«ã®ç»é¢ãã¿ãŒã²ããã«ããããŒãã«ã®å¹ ã100%ã«å€æŽããŸãïŒ
@media screen and (max-width: 600px) {
table {
width: 100% !important;
}
}
!important
宣èšã¯ãã¯ãã¹ãã©ãããã©ãŒã äºææ§ã®ããã«ã¡ãŒã«ãã³ãã¬ãŒãã§äžè¬çã«äœ¿çšãããã€ã³ã©ã€ã³ã¹ã¿ã€ã«ãäžæžãããããã«ããã°ãã°å¿
èŠã§ãã
4. ã¢ãã€ã«ãã¡ãŒã¹ãã®ã¢ãããŒã
ã¢ãã€ã«ãã¡ãŒã¹ãã®ã¢ãããŒãã§ã¯ããŸãã¢ãã€ã«ããã€ã¹åãã«ãã¶ã€ã³ãããã®åŸã¡ãã£ã¢ã¯ãšãªã䜿çšããŠå€§ããªç»é¢åãã®ã¹ã¿ã€ã«ã远å ããŸããããã«ãããã¡ãŒã«ãæãäžè¬çãªé²èЧãšã¯ã¹ããªãšã³ã¹ã«æé©åãããŸãã
5. ã¿ãããã¬ã³ããªãŒãªãã¶ã€ã³
ãã¿ã³ãšãªã³ã¯ããã¿ããã¹ã¯ãªãŒã³ã§ç°¡åã«ã¿ããã§ããããã«ãååã«å€§ãããååãªééã空ããŠããããšã確èªããŠãã ãããæå°ã¿ããã¿ãŒã²ãããµã€ãºãšããŠ44x44ãã¯ã»ã«ã䜿çšããããšãæ€èšããŠãã ããã
ã¡ãŒã«ãã³ãã¬ãŒãéçºã®ããã®æè¡çèæ ®äºé
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã³ãã¬ãŒããéçºããã«ã¯ãæè¡çãªè©³çްã«çްå¿ã®æ³šæãæãå¿ èŠããããŸãïŒ
1. HTMLæ§é
ç°ãªãã¡ãŒã«ã¯ã©ã€ã¢ã³ãéã§ã®äžè²«ãã衚瀺ã®ããã«ãããŒãã«ããŒã¹ã®ã¬ã€ã¢ãŠãã䜿çšããŠãã ãããHTML5ãšCSS3ã¯ãŠã§ããã©ãŠã¶ã§åºããµããŒããããŠããŸãããã¡ãŒã«ã¯ã©ã€ã¢ã³ãã¯æ°ãããã¯ãããžãŒãžã®ãµããŒããéãããŠããããšããããããŸãã
äŸ:
åºæ¬çãªããŒãã«æ§é ïŒ
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Content goes here -->
</td>
</tr>
</table>
2. CSSã€ã³ã©ã€ã³å
å€ãã®ã¡ãŒã«ã¯ã©ã€ã¢ã³ãã¯ãã¡ãŒã«ã®<head>
ã»ã¯ã·ã§ã³ã«ããCSSãåé€ãããç¡èŠãããããŸããäžè²«ããã¹ã¿ã€ãªã³ã°ã確ä¿ããããã«ã¯ãCSSã¹ã¿ã€ã«ãHTMLèŠçŽ ã«çŽæ¥ã€ã³ã©ã€ã³åããããšãæšå¥šãããŸãã
äŸ:
代ããã«ïŒ
<style>
p {
color: #333333;
font-family: Arial, sans-serif;
}
</style>
<p>This is a paragraph of text.</p>
䜿çšïŒ
<p style="color: #333333; font-family: Arial, sans-serif;">ããã¯ããã¹ãã®æ®µèœã§ãã</p>
CSSã®ã€ã³ã©ã€ã³åããã»ã¹ãèªååã§ãããªã³ã©ã€ã³ããŒã«ããããŸãã
3. ã¯ãã¹ãã©ãããã©ãŒã äºææ§
ç°ãªãã¡ãŒã«ã¯ã©ã€ã¢ã³ãïŒäŸïŒGmailãOutlookãApple MailïŒã¯ãHTMLãšCSSã®ã¬ã³ããªã³ã°æ¹æ³ãç°ãªããŸããã¡ãŒã«ãã³ãã¬ãŒããæ£ãã衚瀺ãããããšã確èªããããã«ãããŸããŸãªã¯ã©ã€ã¢ã³ãã§ãã¹ãããããšãäžå¯æ¬ ã§ããLitmusãEmail on Acidãªã©ã®ããŒã«ã䜿çšããŠãããŸããŸãªããã€ã¹ãã¡ãŒã«ã¯ã©ã€ã¢ã³ãã§ã¡ãŒã«ããã¬ãã¥ãŒããŠãã ããã
äžè¬çãªã¯ã©ã€ã¢ã³ãã®ç:
- Outlook: Outlookã¯Microsoft Wordã®ã¬ã³ããªã³ã°ãšã³ãžã³ã«å€§ããäŸåããŠãããã¢ãã³ãªCSSã®ãµããŒããéãããŠããŸããããŒãã«ããŒã¹ã®ã¬ã€ã¢ãŠãã䜿çšããè€éãªCSSã»ã¬ã¯ã¿ã¯é¿ããŠãã ããã
- Gmail: Gmailã¯
<head>
å ã®<style>
ã¿ã°ãåé€ãããã¹ãŠã®CSSããããã£ããµããŒãããªãå ŽåããããŸããCSSãã€ã³ã©ã€ã³åãã培åºçã«ãã¹ãããŠãã ããã - Apple Mail: Apple Mailã¯éåžžãHTMLãšCSSããããµããŒãããŠããŸãããç¹å®ã®ç»å圢åŒã§åé¡ãçºçããå ŽåããããŸãã
4. ç»åã®æé©å
ãã¡ã€ã«ãµã€ãºãåæžããèªã¿èŸŒã¿æéãæ¹åããããã«ããŠã§ãçšã«ç»åãæé©åããŸããç»è³ªãç ç²ã«ããããšãªããã¡ã€ã«ãµã€ãºãåæžããããã«ãç»åå§çž®ããŒã«ã䜿çšããŠãã ãããç»åã®çš®é¡ã«å¿ããŠãç°ãªãç»å圢åŒïŒäŸïŒJPEGãPNGãGIFïŒã®äœ¿çšãæ€èšããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹:
- åçãè€éãªè²ãå«ãç»åã«ã¯JPEGã䜿çšããŸãã
- éæåºŠãé®®æãªç·ãæã€ç»åã«ã¯PNGã䜿çšããŸãã
- ã¢ãã¡ãŒã·ã§ã³ç»åã«ã¯GIFã䜿çšããŸãã
5. ã¢ã¯ã»ã·ããªãã£
ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ã«åŸããé害ãæã€ãŠãŒã¶ãŒãã¡ãŒã«ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸãïŒ
- 代æ¿ããã¹ãïŒAlt TextïŒ: ãã¹ãŠã®ç»åã«ä»£æ¿ããã¹ãã远å ããç»åãèŠãããšãã§ããªããŠãŒã¶ãŒã«èª¬æãæäŸããŸãã
- ååãªã³ã³ãã©ã¹ã: ããã¹ããšèæ¯è²ã®éã«ååãªã³ã³ãã©ã¹ããããããšã確èªããããã¹ããèªã¿ãããããŸãã
- æç¢ºãªæ§é : èŠåºããšãªã¹ãã䜿çšããŠã³ã³ãã³ããæ§é åããããã²ãŒãããããããŸãã
- ã»ãã³ãã£ãã¯HTML: é©åãªå Žæã§ã»ãã³ãã£ãã¯HTMLèŠçŽ ïŒäŸïŒ
<header>
ã<nav>
ã<article>
ïŒã䜿çšããŸãã
ã¡ãŒã«ãã¶ã€ã³ã«ãããã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãŒãã£ãšã³ã¹åãã®ã¡ãŒã«ãã³ãã¬ãŒãããã¶ã€ã³ããéã«ã¯ãæåçããã³èšèªçéããèæ ®ããããšãéèŠã§ãïŒ
1. èšèªãµããŒã
ã¡ãŒã«ãã³ãã¬ãŒããç°ãªãèšèªãšæåã»ããããµããŒãããŠããããšã確èªããŠãã ãããåºç¯ãªæåã«å¯Ÿå¿ããããã«UTF-8ãšã³ã³ãŒãã£ã³ã°ã䜿çšããŠãã ãããå°åããšã«ã¡ãŒã«ã³ã³ãã³ãã®ç¿»èš³ãæäŸããŠãã ããã
2. æ¥ä»ãšæå»ã®åœ¢åŒ
åä¿¡è ã®å°åã«é©ããæ¥ä»ãšæå»ã®åœ¢åŒã䜿çšããŠãã ããããŠãŒã¶ãŒã®ãã±ãŒã«ã«åŸã£ãŠæ¥ä»ãšæå»ããã©ãŒãããããããã®ã©ã€ãã©ãªãŸãã¯é¢æ°ã䜿çšããããšãæ€èšããŠãã ãããäŸãã°ãç±³åœã§ã¯æ¥ä»åœ¢åŒã¯éåžžMM/DD/YYYYã§ããããšãŒãããã§ã¯DD/MM/YYYYã§ãã
3. é貚èšå·
ç°ãªãå°åã«æ£ããé貚èšå·ã䜿çšããŠãã ãããå¯èœãªå Žåã¯ãåä¿¡è ã®çŸå°é貚ã§é貚é¡ã衚瀺ããŠãã ãããéé¡ãç°ãªãé貚ã«å€æããããã«é貚æç®APIã®äœ¿çšãæ€èšããŠãã ããã
4. æåçãªé æ ®
ã¡ãŒã«ãã³ãã¬ãŒãããã¶ã€ã³ããéã«ã¯ãæåçãªéãã«æ³šæããŠãã ãããç¹å®ã®æåã§äžå¿«ãŸãã¯äžé©åãšã¿ãªãããå¯èœæ§ã®ããç»åãã³ã³ãã³ãã®äœ¿çšã¯é¿ããŠãã ãããã¡ãŒã«ãã£ã³ããŒã³ãéå§ããåã«ãã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã®æåçèŠç¯ãšäŸ¡å€èгã調æ»ããŠãã ãããäŸãã°ãç¹å®ã®è²ã¯ç°ãªãæåã§ç°ãªãæå³ãæã€å ŽåããããŸãã
5. å³ããå·Šãžã®èšèªïŒRTLïŒ
å³ããå·Šãžã®èšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒã䜿çšãããªãŒãã£ãšã³ã¹ãã¿ãŒã²ããã«ããå Žåã¯ãã¡ãŒã«ãã³ãã¬ãŒããRTLã®ããã¹ãæ¹åããµããŒãããããã«èšèšãããŠããããšã確èªããŠãã ãããããã¹ãæ¹åãšã¬ã€ã¢ãŠããå転ãããããã«ãdirection: rtl;
ã®ãããªCSSããããã£ã䜿çšããŠãã ããã
ã¡ãŒã«ãã³ãã¬ãŒãéçºã®ããã®ããŒã«ãšãªãœãŒã¹
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã³ãã¬ãŒããäœæããã®ã«åœ¹ç«ã€ããã€ãã®ããŒã«ãšãªãœãŒã¹ããããŸãïŒ
- ã¡ãŒã«ãã³ãã¬ãŒããã«ããŒ: BEE Free, Stripo, Mailjet's Email Builder
- ã¡ãŒã«ãã¹ãããŒã«: Litmus, Email on Acid
- CSSã€ã³ã©ã€ã³åããŒã«: Premailer, Mailchimp's CSS Inliner
- ãã¬ãŒã ã¯ãŒã¯: MJML, Foundation for Emails
- ãªã³ã©ã€ã³ãªãœãŒã¹: Campaign Monitor's CSS Support Guide, HTML Email Boilerplate
ã¡ãŒã«é ä¿¡çã®ããã®ãã¹ããã©ã¯ãã£ã¹
ããšãæé«ã®ãã¶ã€ã³ã®ã¡ãŒã«ãã³ãã¬ãŒãã§ãã£ãŠããåä¿¡è ã®åä¿¡ç®±ã«å±ããªããã°å¹æã¯ãããŸãããã¡ãŒã«ã®é ä¿¡çãåäžãããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããïŒ
- ä¿¡é Œã§ããã¡ãŒã«ãµãŒãã¹ãããã€ããŒïŒESPïŒã䜿çšãã: è©å€ãè¯ããé ä¿¡çã®é«ãESPïŒäŸïŒMailchimpãSendGridãConstant ContactïŒãéžæããŠãã ããã
- ã¡ãŒã«ãèªèšŒãã: SPFãDKIMãDMARCãå®è£ ããŠãã¡ãŒã«ãæ£åœãªãã®ã§ããããšã確èªããŸãã
- ã¯ãªãŒã³ãªã¡ãŒã«ãªã¹ããç¶æãã: ç¡å¹ãŸãã¯éã¢ã¯ãã£ããªã¡ãŒã«ã¢ãã¬ã¹ããªã¹ããã宿çã«åé€ããŸãã
- ã¹ãã ããªã¬ãŒã¯ãŒããé¿ãã: ã¹ãã ãšäžè¬çã«é¢é£ä»ããããŠããåèªïŒäŸïŒãç¡æãããä¿èšŒãããç·æ¥ãïŒã®äœ¿çšã¯é¿ããŠãã ããã
- é ä¿¡åæ¢ãªã³ã¯ãæäŸãã: åä¿¡è ãç°¡åã«ã¡ãŒã«ã®é ä¿¡ã忢ã§ããããã«ããŸãã
- éä¿¡è è©äŸ¡ãç£èŠãã: éä¿¡è ã®è©äŸ¡ã宿çã«ãã§ãã¯ããŠãé ä¿¡ã®åé¡ãç¹å®ã察åŠããŸãã
çµè«
ã¬ã¹ãã³ã·ããªã¡ãŒã«ãã¶ã€ã³ãç¿åŸããããšã¯ãã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã«ãªãŒãããã¡ãŒã«ããŒã±ãã£ã³ã°ã§æåãåããããã«äžå¯æ¬ ã§ãããã®ã¬ã€ãã§æŠèª¬ãããååãšãã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãããããããã€ã¹ã§çŽ æŽãããèŠããã¡ãŒã«ãã³ãã¬ãŒããäœæãããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããåäžããããã©ã³ãã€ã¡ãŒãžã匷åããããšãã§ããŸããã¡ãã»ãŒãžããã®å Žæãèæ¯ã«é¢ä¿ãªãããã¹ãŠã®äººã«å¹æçã«å±ãããã«ãã¢ã¯ã»ã·ããªãã£ãæåçãªé æ ®ãããã³ã¡ãŒã«ã®é ä¿¡çãåªå ããããšãå¿ããªãã§ãã ãããåžžã«ã¢ãããŒãããã¹ãããæŽç·ŽãããŠãæä»£ã®å ãè¡ããã¡ãŒã«ããŒã±ãã£ã³ã°ãã£ã³ããŒã³ãæå€§ã®åœ±é¿åã®ããã«æé©åããŠãã ãããç°ãªããã¶ã€ã³ãä»¶åãA/Bãã¹ãããŠãããã©ãŒãã³ã¹ãç¶ç¶çã«æ¹åããããšãæ€èšããŠãã ãããããŒã¿é§ååã®ã¢ãããŒããæ¡çšããããšã§ãã¡ãŒã«ãã¿ãŒã²ãããªãŒãã£ãšã³ã¹ã«é¿ããæå³ã®ããçµæãããããããšã確å®ã«ã§ããŸãã