最近HTMLメールでメールを送ってくるサイトが増えていますが、読みやすく仕上がっているものと、読みづらく感じるものとがあります。 その原因のひとつは「横幅」でしょうか。コンテンツの横幅が固定されていない場合、ブラウザを最大化して表示するとメールの1行も横に長くなってしまい、流し読みしづらくなりますよね。 ではHTMLメールの横幅はどうするのが適切なのでしょう。そのあたりを調べていたら「HTMLメールのベストプラクティス」をまとめた海外の記事をいくつか見つけたので、ちょいとまとめておこうと思います。 なお、今回参考にした記事は以下の4つです。 » 20 Email Design Best Practices and Resources for Beginners | Nettuts+ » Best practices for coding HTML emails | CatsWhoCode.
Paste your cells from Excel, Google Docs or another spreadsheet here: Table Style Options
Practical CSS3 tables with rounded corners - RedTeamDesign CSS3でクールな角丸テーブルを作る例。 ヘッダーにグラデーションをかけつつ角丸なテーブルを作る例です。カーソルを乗せるとハイライトする機能もtransitionによって組み込んであって良い感じです。 HTMLとしては普通のテーブルなのでCSSでここまでカスタマイズできるというのはいいですね 背景をzebraにするデザインも紹介されています。素材として覚えておくと素早く綺麗なテーブルを構築できそうですね 関連エントリ CSS3で実装された画像スライドショーサンプル CSS3のアニメーションサンプル47 ピュアCSS3のコンテンツスライダー ピュアCSS3でタイピングアニメーションするデモ
モバイルサイトを作るのに、いまでもtableタグは使わない方がいいのでしょうか? どのあたりが対応していないなどを教えてください
テーブルは窓から投げ捨てろとtable要素をサイトのレイアウトや視覚的な目的に使う事は、table本来の使用目的とは違うため、やめるべきだと言う流れになっています。しかし、tableを使うなと言うことではなく、表のためにtable要素を使うことは全然構わないわけです。そこで、味気ない表よりは多少見栄えを良くするためにCSSで整えてみます。背景画像を用意して指定することにより、よりデザインチックな表に仕上げる事も出来ますが、画像を使用しなくてもある程度は見栄え良くできる方法だと思います。 サンプルとして以下のtableを使用します。borderやcellpaddingなどの属性は一切設定していません。sample01.html <table summary="表のサンプル"> <tr><th>サンプル1</th><td>もう今年も終わりですね。</td></tr> <tr><th>サンプル2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く