ZURB Foundation for Emailsによるレスポンシブメール作成 CSS編 その1

[ZURB](http://zurb.com/)はWEBのデザインなど手掛けきた企業で、[Foundation](http://foundation.zurb.com/)というフロントエンド向けのフレームワークを提供しています。「[Zurb Foundation 導入前の予備知識](http://qiita.com/kohki-shikata/items/bd6cfda580a54159232e)」辺りが詳しいです。

このFoundationには大きく次の2種類があり、Webサイト用とメール用があります。
- [Foundation for Sites](http://foundation.zurb.com/sites.html)
- [Foundation for Emails](http://foundation.zurb.com/emails.html)
メール用のフレームワークは元々Inkと呼ばれていたようです。[MOONGIFTさんで紹介されていました](http://www.moongift.jp/2013/11/ink-%E3%82%B9%E3%83%9E%E3%83%9B%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E5%AF%BE%E5%BF%9C%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96html%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%86/
)(ちなみに冒頭にある「ガラケーが主流だった日本においてはHTMLメールはあまり普及しませんでした」という一文はメールに関連する仕事をするようになって痛感する日々。2013年当時よりは変わってるとは思いますが)。

ここでは、メールの「[Foundation for Emails](http://foundation.zurb.com/emails.html)」について書きたいと思います。

# Foundation for Emails

http://foundation.zurb.com/emails.html
![2017-01-03_23h36_56.png](https://qiita-image-store.s3.amazonaws.com/0/47737/8b63626c-fcbc-c364-ae98-9499cdda7f90.png)

CSSとSassの2バージョンあります。今回、まずはCSSバージョンを試してみます。
「Download Starter Kit」を押してStarter Kitをダウンロードします。
![2017-01-05_18h03_16_.png](https://qiita-image-store.s3.amazonaws.com/0/47737/8b4aa86f-fe3d-6ab9-79c3-f50b139dcd9a.png)

foundation-email.zipがダウンロードされたら展開します。
![2017-01-05_18h06_52.png](https://qiita-image-store.s3.amazonaws.com/0/47737/25311e96-a972-59df-bb43-fef38f838ac5.png)

展開後のフォルダは下図のようになっています。[「__MACOSX」フォルダは無視してOK](http://news.mynavi.jp/column/osxhack/030/)です。
![2017-01-04_00h43_37.png](https://qiita-image-store.s3.amazonaws.com/0/47737/bfa5dc1c-08a0-08bd-038a-e37051e34bef.png)

templatesフォルダには11種類のhtmlファイルが入っています。
![2017-01-05_18h00_38.png](https://qiita-image-store.s3.amazonaws.com/0/47737/72431898-0c42-ed06-4c7b-fc9a7b67cdad.png)

フレームワークというか、サンプルのテンプレートと空テンプレートを固めたもの、って感じですね。

# テンプレート

11種類のメールテンプレートを並べてみます。せっかくなのでモバイルでの表示も載せていますが、通常＆モバイルともに実際スマホで確認したものではないです。単純にブラウザ表示したものとブラウザの開発者モードでモバイル表示したものとなります。

## basic.html

Basicという名前で、テンプレートの中で一番基本形のようですが、わりとカッコイイ感じです。
![2017-01-05_17h29_05.png](https://qiita-image-store.s3.amazonaws.com/0/47737/117547f2-a394-7fae-c694-78e669ec350a.png)

<img width="250px" alt="basic1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/1a79d380-b6a7-b414-603e-ce1ebe805085.png"><img width="250px" alt="basic2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/7d8a6e50-c5af-517a-58ea-04d3cd48b52f.png">

## drip.html

[drip](http://eow.alc.co.jp/search?q=drip&ref=sa)って滴る、ポタポタと落ちるという意味があるみたいですが、下のアイコンがそうなのかな。
![2017-01-05_17h29_20.png](https://qiita-image-store.s3.amazonaws.com/0/47737/9dbfe24c-090c-4d55-57f8-5693ebd2a696.png)

<img width="250px" alt="drip1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/322dca57-b284-08ac-a7e9-962da3681e7b.png"><img width="250px" alt="drip2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/d9201679-29ad-8254-80b9-f391dbd9dc0c.png">

## hero.html

個人的には標準テンプレートとして一番ベースにしやすい感じ。Twitterとかの部分はアイコンにしたいですが。
![2017-01-05_17h30_16.png](https://qiita-image-store.s3.amazonaws.com/0/47737/913997c9-8579-c472-2a8e-7973354da3a1.png)

<img width="250px" alt="hero1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/582928b7-1728-f22f-2925-7a1a1b44ac94.png"><img width="250px" alt="hero2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/db0d76fd-b3b1-a8b7-0f5f-391fbff092ed.png">

## marketing.html

名前からマーケティング用って所でしょうか。アイコン並べれば機能紹介とかで便利そうです。
![2017-01-05_17h30_32.png](https://qiita-image-store.s3.amazonaws.com/0/47737/276d1ae8-a39d-cee1-56da-c82dc6ceabdd.png)

<img width="250px" alt="marketing1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/e391e2a1-2a4e-d33f-c8d1-86c46faad4c1.png"><img width="250px" alt="marketing2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/216b590b-b002-41fc-def1-39c47af8fcee.png">

## newsletter.html

ニュースレター、これも使いやすそうですね。
![2017-01-05_17h30_37.png](https://qiita-image-store.s3.amazonaws.com/0/47737/5c97a6f7-b351-f7b2-3260-bae43076309b.png)

<img width="250px" alt="newsletter1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/040ac7a8-73a3-8413-9308-f3bd2dc4517d.png"><img width="250px" alt="newsletter2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/4f4f7f67-1af6-cdc2-35b1-dddb472b2b68.png">

## newsletter-2.html

こちらはニュースレターの2段組み版です。レスポンシブになるとちゃんと1段になってます。
![2017-01-05_17h30_41.png](https://qiita-image-store.s3.amazonaws.com/0/47737/0f389447-1aca-743d-f1d4-97f59bd590f4.png)

<img width="250px" alt="newsletter2-1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/0c25d279-6743-6a89-6633-b7332a754f9d.png"><img width="250px" alt="newsletter2-2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/670a5076-c343-e7a0-1c9f-6bde0eb57ce0.png">

## order.html

注文書とか見積のメールで使えそうなタイプですね。
![2017-01-05_17h30_45.png](https://qiita-image-store.s3.amazonaws.com/0/47737/c1c9a760-c2d0-1053-8f9a-f12282c73f33.png)

<img width="250px" alt="order1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/025eed02-2e71-d75a-83fd-a2d41061f9da.png"><img width="250px" alt="order2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/2bdcc3bc-c8c2-b081-d459-e2f76e6a8971.png">

## password.html

名前の通りパスワード。システムから自動送信系で使いやすそうです。
![2017-01-05_17h30_49.png](https://qiita-image-store.s3.amazonaws.com/0/47737/10f6bae9-9c2e-8380-85e6-0b7ddeea49a8.png)

<img width="250px" alt="password" src="https://qiita-image-store.s3.amazonaws.com/0/47737/e01fd311-d65a-fa3b-1b71-2d9d4ed910a1.png">

## sidebar.html

この辺はだいぶ凝った感じのメールテンプレートですね。右サイドにメニューチックにバーがついてます。レスポンシブでスマホ表示になったときでもみやすいですね。
![2017-01-05_17h30_59.png](https://qiita-image-store.s3.amazonaws.com/0/47737/b91e4ce8-5b4d-e0fb-9397-08189b4b68ac.png)

<img width="250px" alt="sidebar1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/51b42ebd-4ce9-f1e2-4072-8a250d2d8c8f.png"><img width="250px" alt="sidebar2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/525610d8-c9f6-4d1f-8cf1-bf5c67ecda67.png"><img width="250px" alt="sidebar3" src="https://qiita-image-store.s3.amazonaws.com/0/47737/e4bf2738-832c-cadf-895b-86afaa902a42.png">

## sidebar-hero.html

hero.htmlとsidebar.htmlを合わせた形です。
![2017-01-05_17h30_59.png](https://qiita-image-store.s3.amazonaws.com/0/47737/45afee31-3721-70a6-1742-ee50918821a1.png)

モバイル表示も綺麗です。
<img width="250px" alt="sidebar-hero1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/a0c85cf0-f138-428b-1810-8ce22f36b0df.png">
<img width="250px" alt="sidebar-hero2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/fa0a566a-b557-36ca-02e5-1994bdf37920.png">
<img width="250px" alt="sidebar-hero3" src="https://qiita-image-store.s3.amazonaws.com/0/47737/b61a43c5-467b-1cdf-bb56-9b24191fa5d6.png">
<img width="250px" alt="sidebar-hero4" src="https://qiita-image-store.s3.amazonaws.com/0/47737/f8bcc620-bc9a-51e3-ea94-5cbb9fb5f4b0.png">

## welcome.html

サービスの登録とか、ようこそ系の自動メールで使えるタイプです。パスワードと合わせて利用価値が高そうです。
![2017-01-05_17h31_27.png](https://qiita-image-store.s3.amazonaws.com/0/47737/9a04f13c-2470-9e5a-6221-0981d5d31dcb.png)

<img width="250px" alt="welcome1" src="https://qiita-image-store.s3.amazonaws.com/0/47737/f54133f9-deea-5e52-98ef-b2c39b3b68d7.png"><img width="250px" alt="welcome2" src="https://qiita-image-store.s3.amazonaws.com/0/47737/0fb0b125-ae2e-d2d6-e765-28f5c44bd035.png">

ということで今回はZURB Foundation for Emailsに含まれる標準テンプレートの紹介でした。次は空テンプレートから色々と自分で定義する方法を書きたい。