Edited at

HTMLメール制作

More than 1 year has passed since last update.


各メーラーのCSS対応状況

CSS Support Guide for Email Clients | Campaign Monitor

https://www.campaignmonitor.com/css/


  • oulookにおいてはheightが効かない、marginも要素によっては効かない、疑似要素やposition、floatなどももちろん使えない、という状況なので、テーブルコーディングでの(場合によってはspacerを使ったり)レイアウト調整が必要

  • 制約が多めなことをあらかじめディレクターさん、デザイナーさんにわかってもらう必要あり


表示確認はlitmus.comを活用する

Litmus: Email Marketing, Email Design & Email Testing Tools

https://litmus.com/

こちらで様々なメーラーでの表示をエミュレートできる。(無料体験期間は7日間)

image.png

また、コーディングを始める前にこちらのサイトを参考にして

作業対象となるメーラーを絞ってしまったほうが良い。


コーディングのポイント


  • 基本は安全を期して、tableコーディング

  • CSSはインラインで書かないと読めないメーラーが多い


    • 実際のインライン化はgulpで自動化する



  • メディアクエリはhtmlの中のstyleタグ内に!important付きで記述


    • その他のスタイルはインラインで書かれているため




  • https://litmus.com/ で表示確認しながら作業をすすめる


Gulpタスク

import gulp from 'gulp';

import plumber from 'gulp-plumber';
import stylus from 'gulp-stylus';
import pug from 'gulp-pug';
import inlineCss from 'gulp-inline-css';
import runSequence from 'run-sequence';
import browserSync from 'browser-sync';
import rename from 'gulp-rename';
import autoprefixer from "autoprefixer";
import postcss from "gulp-postcss";
import paths from '../config';

gulp.task('server', () => {
browserSync({
server: {
baseDir: paths.dist_dir,
},
open: 'external',
online: true
})
});

gulp.task('pug', () => {
return gulp.src(paths.pug_src)
.pipe(plumber())
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest(paths.pug_dist));
});

gulp.task('stylus', () => {
return gulp.src(paths.stylus_src)
.pipe(plumber())
.pipe(stylus({
'include css': true
}
))
.pipe(postcss([
autoprefixer({
remove: false,
"browsers": ["last 4 versions"]
})
]))
.on('error', function(err) {
console.log(err.message);
})
.pipe(rename({
basename: 'style',
}))
.pipe(gulp.dest(paths.pug_dist));
});

gulp.task('inlineCss', () => {
return gulp.src(paths.html_src)
.pipe(plumber())
.pipe(inlineCss())
.pipe(gulp.dest(paths.html_dist))
.pipe(browserSync.stream());
});

gulp.task('htmlMailBuild', () => {
runSequence(['pug', 'stylus', 'inlineCss']);
});

gulp.task('default', ['htmlMailBuild', 'server'], () => {
gulp.watch(paths.pug_src, ['htmlMailBuild']);
gulp.watch(paths.stylus_src, ['htmlMailBuild']);
gulp.watch(paths.img, ['imagecopy']);
});