個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」をご紹介します。
レスポンシブ対応のHTMLメールは、スマホでも見やすくついついクリックしてしまいます。
見やすい反面、レスポンシブ対応のHTMLメールを制作するとなると、けっこう面倒だったり……。
そんなとき便利なのが、今回ご紹介するレスポンシブ対応のHTMLメール用フレームワーク集です。
サポートしているメールアプリ/サービスも40以上となっているので、安心して利用しています。
使い勝手よくまとめられているので、制作時間を短縮させたいという方や、これからHTMLメールを利用してみたいという方はぜひチェックしてみてくださいね。

レスポンシブ対応HTMLメールのフレームワークを集めた「Responsive HTML Email Framework」

「Responsive HTML Email Framework」は、レスポンシブ対応HTMLメールのフレームワーク集です。
HMTLコードがコレクションされており、コピー&ペーストで利用できます。
サポートしているメールアプリ/サービスも40以上。安心して利用しています。

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

使い方

ファイルをダウロードすることもできますが、サイトから必要なコードをコピペして利用するほうが簡単だと思います。

ベースとなるコードをコピペする

利用する際には、まずベースとなるHTMLコード「Boilerplate」あるいは「Responsive Grid」から、気に入ったコードをコピーします。

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

コンテンツ部分のコードをコピペする

続いて、コンテンツで利用するパーツ部分を「Typography」「Butons」「Images」か、それぞれのパーツから汎用性のある組み合わせになったコード「Modules」から、気に入ったコードをコピペして利用します。

レスポンシブ対応HTMLメールのフレームワーク集「Responsive HTML Email Framework」

CSSは自分で記述を

CSSについては、自分で記述する必要があります。
その際には、ベースとなるHTMLコードに記述されている「<link rel=”stylesheet” href=”mail.css” type=”text/css” />」を削除して、「<style type=”text/css”>〜 /* Paste CSS */ </style>」の間にスタイルを記述するようにしましょう。

Responsive HTML Email Framework

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

CSSアニメーションを使ったエフェクトライブラー9

CSSアニメーションを使ったエフェクトライブラリー9

CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい

記事を読む

スタイリッシュなポップアップ/モーダルウインドウ用jQueryプラグイン53選

スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25

jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。

記事を読む

タイポグラフィ/WEBフォントに関する作業を簡単にするツール14

WEBフォントがどんどん使われるようになるにつれ、関連するツールもたくさん出来てきています。 多い

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む

ファイルのウイルス感染を無料でチェックできるオンラインセキュリティー

ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9

ファイルのウイルスやマルウエアを無料でスキャンできるオンラインサービスセキュリティーサービスをご紹介

記事を読む

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法

JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む