HTMLメール制作

12600 ワード
HTMLメール gulp gulp テキストリンク

各メーラーの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日間）


また、コーディングを始める前にこちらのサイトを参考にして
作業対象となるメーラーを絞ってしまったほうが良い。

コーディングのポイント

  • 基本は安全を期して、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']);
});