HTMLメール用のCSSリセットとテンプレート、主要なメールクライアントのバグにも対応 -normalize.email.css
WebブラウザがFlexboxやCSS Gridをサポートしていく中、HTMLメールではXHTMLとtableレイアウトがまだまだ主流です。 HTMLメールを作成する時のベースになる、HTMLのテンプレートと有用なデフォルトのスタイルを提供するCSSリセットを紹介します。 normalize.email.css -GitHub normalize.email.cssの特徴 normalize.email.cssの構成 HTMLメールを作成する時のテンプレート normalize.email.cssの中身 normalize.email.cssの特徴 ほとんどの電子メールクライアントに有用なデフォルトのスタイルを提供。 ネイティブプラットフォームのフォントスタイルを作成。 HTMLメールの一般的なバグに対応。 コメントを使用したスタイルの説明。 normalize.email.cssの構成
Gmail HTML Email Development: Why Your CSS Is Not Working
Blog / Gmail HTML Email Development: Why Your CSS Is Not Working (and More) In the ever-changing world of email marketing, understanding the ins and outs of Gmail is paramount. We probably don't have to tell you that a lot of people use Gmail... but we will. According to Sinch Mailjet's new report, The path to email engagement 2024, 71% of consumers in its global survey said they have a Gmail acco
作って分かるHTMLメールの基本と使えるタグ／CSSまとめ (1/2)
Emailology - The Science of Looking Good in the Inbox HTMLの冒頭 実際にメールのHTMLを作成しましょう。HTMLの冒頭の文章型宣言は「XHTML 1.0 Transitional」を指定し、HTMLページの始まりを宣言しています。 head要素では、文字コード、ページタイトル、viewportを設定しています。HTMLの文字コードは「UTF-8」、Webページのタイトルを表すtitle要素は、空（から）です。viewportの設定は横幅をデバイス幅に、初期拡大率は1.0の等倍です。 ■HTML冒頭 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
【備忘録】レスポンシブなメルマガの作成方法
作成するメルマガのレイアウト サンプル Zipファイルをダウンロード 作成したメルマガのレイアウトはシンプルに1カラムのレイアウトです。レスポンシブとは言ってもメルマガのコーディングなので、tableタグでガチガチに固めたレイアウトにしています。なのでブレークポイントでの大きなレイアウト変更は出来ません。 コンテンツと画像幅を640pxにし、ウィンドウサイズを659px以下に縮めていくことで画像も一緒に縮小して幅100%になるようなレイアウトを作成していきます。 ▼PC（Gmail）スクリーンショット ▼スマホ（Gmail）スクリーンショット 画像のスライス 画像を書き出します。スマホで見た時に画像の比率がおかしくなってしまう可能性があるため、縦横どちらも2で割り切れる数で書き出します。 コーディングしてみる（ソース全体） 画像のスライスが終わったらコーディングしていきます。メルマガコーデ
HTMLメールのレスポンシブ化。 | ネクストページブログ
HOMEブログウェブ制作HTMLメールのレスポンシブ化。 | ネクストページブログ こんにちは、藤中です。 最近、企業からの広告メールやメルマガは、ほとんどHTMLメールになりました。 パソコン用のHTMLメールをスマホで見ると、ちょっと見づらい。スマホサイトがここまで増えた今、HTMLメールもスマホ用の表示になってほしいものです。 最近、お客様からHTMLメールをレスポンシブ化して欲しいというご依頼がありました。調べてみると、HTMLメールのレスポンシブ化は一般的になりつつあり、情報もたくさん出ています。実際に制作していく中で、ネットで公開されている情報だけではうまくいかなかった箇所もあったので、まとめてみました。 今回は制作者向けの情報です。 HTMLメールのレスポンシブ化には、様々な制約があります。よく使われるメールソフトの制限を洗い出し、それを回避しながらコーディングしていきます。
Outlookに勝てるHTMLメールコーディング vol.1「table構成編」 - Qiita
メールコーディングをする上で重要なポイント <table>タグを組むときにcolspanやrowspanを使わないように組み立てる 半角スペースは極力削る(Gmailは文字数やファイルサイズが大きいと制限で切られてしまうため、なるべく無駄な空白は削ったほうが良い) 画像のパス指定は 'http://' から記述 スタイルはインラインに記述、レスポンシブ対応はヘッダのCSSに記述する Outlook対策 画像のサイズは必ずwidth="size" height="size"を指定する(これを書かないと、元の画像サイズで表示されてしまう。どちらかをautoにしたい時は、width="300" height="*"と書く。 pxは書かない 、 *はauto という意味になる。) 今回の記事で実機確認しているのは、以下の通り。 Mac Mail Gmail(Chrome/FF) Inbox(Chr
HTMLメールで画像の間に隙間ができる - knowledge base
画像をブロック要素に 先日、HTMLメールの制作をしていましたら、次のような現象に遭遇しました。 画像のあいだに余白ができてしまいました。 以前、似たような現象に対する記事を書かせて頂きましたが、それとはまったく異なる現象です。 実はこれ、Gmailでの表示です。 なので同じソースをIE6/7で表示してもまったく崩れません。 いわば、メーラーのみで起こる表示崩れの現象です。 そもそも画像をインライン要素として配置すると、ブラウザでは画像の上下にわずかな余白ができるのがブラウザにおけるデフォルトの挙動です（これを調整するのがfont-sizeであったりvertical-alignといったプロパティです）。 メーラー表示の際に発現する上記例についても、大半はvertical-alignで直すことができるのですが、一部の画像では何をしても余白が消えないときがあります。 インライン要素としてマーク
HTMLメールを制作するときに気をつけたいこととかメモ | できることからコツコツと
日本では何かと嫌われるHTMLメール。でもリッチなメールを実現するにはまだまだかかせないツールです。 そんなわけで最近HTMLメールを送る機会があったので、気をつけることとか、参考サイトとかのメモ。 HTMLメールを作るときの注意点 普通のHTMLを組むのと同じというわけにはいかないようなので、以下に注意点をまとめます。 HTMLメールが作成する側から嫌われる理由ともいえる。 基本的なこと HTML 4.01 Transitional、 文字コードはiso-2022-jpで制作する。 レイアウトはテーブルレイアウト…！ レイアウトはテーブルレイアウトで行います。 今時…と思うでしょうが、メールソフトによってcssの解釈が違うので、昔ながらのテーブルレイアウトで行うのが安全です。cellpaddingやcellspacing等を0にすることも忘れない。 また、メールのビュー部分の横幅が狭い傾
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
