個人的に役立ったデザイン素材や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
  • 1
  • 3

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

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

ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」

CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav

記事を読む

Bootstrapの無料テーマを探すなら一箇所で全部探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま

記事を読む

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅

記事を読む

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

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

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail

記事を読む