2018-11-04

HTMLメールを作りました

coding Adobe XD design

HTMLメールのデザイン、HTML/CSSコーディングが終わりました！

１、２年前に自分でコーディングしてHTMLメールを作成したことがあるのですが、それ以外はメール配信サービスを使ってHTMLメールをカンタンにつくる作業ばかりしていたので、今回調べて勉強になったことを作業の流れと合わせてまとめてみました。

（配信設定などのプログラムはエンジニアさんにお願いしており、対応していません。）

0. HTMLメールの作り方

まず作り方について。

「テーブルレイアウトにする」「CSSはインライン形式にする」という２点は覚えていたのですが、根本的なHTMLメールの理論や最新事情が知りたかったので、調べてみました。

学んだこと

CSSは埋め込み形式でも良いが、メールクライアントによってはサポートされていないことがあるので、インライン形式がカタい。
幅は600pxがベスト。
titleはメールの件名に反映される。
画像は重くならないように善処しましょう。

参考

willcloud.jp

qiita.com

1. デザインのリサーチ

HTMLメールのデザインを調べたもののなかなか見つけられず困っていたのですが、こちらの記事がとても参考になりました。

blog.codecamp.jp

特によかったのがこの２つのサイト。

CakeMail
コードをダウンロードできます。
その上プレビュー画面で色の変更が簡単にできる！
http://templates.cakemail.com/

envato market
有料テンプレートを販売しているサイト。
購入せずともデザインを見ることができるので、勉強になります。「mail template」で検索するとたくさん出てきます。
https://themeforest.net/

2. デザインを考える

AdobeXDで作成しました。

最初は横幅600pxのアートボードを作ってその上でデザインを作っていたのですが、body（600px外の背景部分）に色をつけられることを思い出し、PCの画面サイズのアートボードに横幅600pxの長方形を重ねて、そこでデザインを作りました。

f:id:wakeup_y:20181101125324p:plain

関係ないですが、今回のように余白に番号を振ってWEBで共有すると、他の人に意見をききやすいのでありだな！と思いました。

3. コーディング

決定したデザインに従ってコーディングをしました。
前述したとおりテーブルレイアウトになります。

新たに学んだこと

tableの中にさらにtableを入れたい場合、２つ目のtableをdivで囲むとイケる。
メールクライアントによっては、画像の拡張子SVGにサポートしていない場合があるので他の拡張子にするのがベスト。
メールアドレスはaタグで囲んで装飾を行うこと。何もしてないとメールクライアントがよしなにリンク表示してくれて、そこだけ青字になってしまうので注意。

以上です。

個人的には、デザイン通りにコーディングできてよかったです。

あと今回のように情報をまとめるレイアウトデザインは、わかりやすく伝えることが大事だし、かつデザイン性も担保することが難しくていい経験になりました。とても楽しかったです。

引き続きこれからも頑張ります！

2018-10-26

【background】スマホで見た時にCSSで指定した背景画像が反映されない原因など

coding

backgroundプロパティとは

backgroundは、背景に関する指定を行うプロパティです。

背景に、色をつけて透過した画像も中央に１つだけ表示して固定表示にしたいなあ。というとき、

background-color: #000;
background-image: url(bg.png);
bakcgounr-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

と記載しても良いのですが、1つずつ指定しなくてもbackgroundでまとめて指定することができます。

background: #000 url(bg.png) center no-repeat fixed;

下記の順番で指定すればOKです。

①background-colorの値
②background-image値
③background-positionの値
④background-repeatの値
⑤background-attachmentの値

記載を省くとデフォルト値で指定されます。

background: #000 url(bg.png) center fixed;

これだとbackground-repiatの記載がないため、デフォルト値である「repeat」が適用されます。

参考

背景に関する設定をまとめて指定する：スタイルシート（CSS）辞典 - HTMLタグボード

まとめ

backgroundにまとめることで、コードが長くならず、他の人が手を加えるときにもわかりやすいんじゃないかと思いました。

スマホでbackground-attachment:fixedが効かない・・だと！？

ローカル環境で、ChromeやSafariの開発者モードにしてレスポンシブでの見え方を確認した時は、特に問題なかったのですが、デザイン環境を作ってもらい実際にスマホからアクセスすると背景画像が表示されていない事件が発生していました。

調べてみると2014年ぐらいからモバイル環境でbackground-attachment:fixedが無効となるようで、backgroundにfixedを含めて指定するとurlで指定した画像そのものが表示されないようです。

これだったらfixedを使っていないので表示される！

background: #000 url(bg.png) center no-repeat scroll;

これはNG！画像すらも表示されません！

background: #000 url(bg.png) center no-repeat fixed;

スマホの時だけスクロールにすることも考えたのですが、調べたところ::beforeを使うと解消できるとのことで、下記を参考に対応しました。

taroken.org

背景画像を表示したいのは一部のsectionだけだったのですが、position:fixedを使うと、他のsectionで取ったマージンに背景画像がひょっこり表示されてしまったりしたので、余白の少ないスマホで見たときだけ修正するようにしようと思い、スマホサイズでのみ、position:fixedを使うようにしました。（逆にめんどくさい？）


.bg {
    background: none;
  }

.bg::before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;　/*幅を持たせる*/
    height: 100vh; /*高さを出す*/
    background: #000 url(bg.png) 50% 60% no-repeat fixed; /*PCの場合はこれで固定される*/
    background-size: 70%;
    z-index: -1; /*重なり順を変えないと、前面に出てしまう*/
}

@media screen and (max-width: 767px) {
  .bg::before {
    background: #000 url(bg.png) 50% 60% no-repeat;
    background-size: 90%;　/*サイズを変えたかった*/
    position: fixed; /*スマホの場合はこれで固定される！*/
  }
}

iphoneXとか画面が大きいので、横向きにした場合も考えるとメディアクエリの幅は812pxがいいのかもしれません。考え出したらきりがないのでやめました。

前述した通り、全体の後面に背景画像が表示されるようになるので、他のsectionの背景に、画像がひょっこり表示される場合があります。他のsectionにbackground-colorを指定したり、余白の取り方をmarginではなくpaddingで設定するといい感じでした。