個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

HTMLメールの無料テンプレートをお探しなら「無料で利用できるオープンソースなHTMLメールテンプレートコレクションサイト」

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。 美しいデザインのHTMLメール

記事を読む

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」

レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ

記事を読む

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像サービスを開始

便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始

商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。

記事を読む

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ

記事を読む

これは簡単!CSSだけで棒グラフが作成できてしまう「chart.css」

これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」

CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ

記事を読む

画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法

アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に

記事を読む