どうのこうの

確認したWebメールとメーラー

メーラー

• Apple Mail
• Thunerbird 2
• Thunerbird 3
• Outlook Express

Webメール

• Gmail
• Yahoo!メール
• Hotmail
• hetemlのWebメール

対応したときのメモ

• 基本的なレイアウトはテーブルコーディング
• でも、ボーダーとかのCSSは使える
• 「HTML 4.01 で」っていう情報もあったけど「XHTML 1.0 Transitional」でOK
• CSSは基本、その要素に書く（Yahooメール、hotmailはhead内のスタイルも反映される。Gmailは反映されない。）
• 画像はフルパス（http://〜）で書く
• Gmailは独自のフォーマット（フォントサイズやリンク色）で表示される（hetemlのWebメールも）
  Hotmailも独自フォーマットだけど、Gmailほど規制が厳しくない。
  Gmailの独自フォーマットは調整がむずかしい。僕にはできなかった。（pは上下にマージン、等）
  だから、Gmailのフォーマットに添ったコーディング、見た目にしなければならない。
• cssのbackgroundプロパティは使えない（Gmail、hotmailが未対応。Yahooメールは対応している。）
• 画像をリンクする場合は、img要素にborder=”0″を追加する（追加しないと、Gmailでボーダーが表示される。）
• Gmailでクリッカブルマップが動作しない（Yahooメール、hotmailは対応している。）

動作確認した環境

Mac

• Mail
• Thunderbird 3
• Firefox 3（単純な表示を確認）
• Firefox 3 + Gmail
• Firefox 3 + Yahoo!メール
• Firefox 3 + Hotmail
• Firefox 3 + heteml Webメール
• Safari 4（単純な表示を確認）
• Safari 4 + Gmail
• Safari 4 + Yahoo!メール
• Safari 4 + Hotmail
• Safari 4 + heteml Webメール

Windows

• XP + Outlook Express
• XP + Thunderbird 2
• XP + Thunderbird 3
• XP + IE6（単純な表示を確認）
• XP + IE6 + Gmail
• XP + IE6 + Yahoo!メール
• XP + IE6 + Hotmail
• XP + IE7（単純な表示を確認）
• XP + IE7 + Gmail
• XP + IE7 + Yahoo!メール
• XP + IE7 + Hotmail
• 7 + Windows Live メール
• 7 + Thunderbird 3
• 7 + IE8（単純な表示を確認）
• 7 + IE8 + Yahoo!メール
• 7 + IE8 + Hotmail

動作確認する環境が多すぎる。
これでもだいぶ端折った。
（「WinXP + IE8」とか「Opera」とか）

もっといろんな環境があると思うけど、
すべてを確認するのは現実的に難しいと思う。

OS と メーラ or ブラウザ + Webメール のパターン多すぎ。

上記動作確認環境で、
Win7 + IE8 + Gmailも確認したんだけど、
なぜか画像がまったく表示されなかった。

ほかのHTMLメールなメルマガも画像が表示されなかったから、
回線の問題なのかもしれない。

原因不明。

「Webメールはどのブラウザで見ても同じでしょ？」っというわけにいかないので注意。

「IE6 + Gmail」や「IE7 + Gmail」が微妙に崩れることがあった。

Firefox、Safari、OperaはOSやバージョン毎に確認しなくても、
まぁ大丈夫でしょう。

多分。
きっと。

例えば、下記の様なコードはIE6で動作しない。

$("#aaa").click(function(){
  $("#bbb").submit(();
});

理由はよくわからない。

「ある画像ボタンをクリックしたらsubmit」みたいなことがしたかったけどな。

ボタン画像をformのsubmitにする場合は、
buttonを使うのがよいかも。

僕はbuttonに対して画像置換を使った。

HTML

<button name="submit" type="submit">
<span>送信</span>
</button>

CSS

.button {
  width: 100px;
  height: 25px;
  background: url(../img/bg.gif) no-repeat;
}
.button span {
  display: none;
}

ちょっと離れたところにネットワークを引きたくて、
無線間の通信を導入しました。

「AirMac Extream」をベースに「AirMac Extream」でネットワークを拡張する形で成功。

「AirMac Express」をベースに「AirMac Extream」でネットワークを拡張はできなかった。

あと、
「AirMac Extream」をベースに「AirMac Express」でネットワークを拡張して、
「AirMac Express」のLANポートつかって有線ネットワーク作ろうと思ったら、
「AirMac Express」のLANポートはWANでしかないのかね。

「AirMac Extream」 → [無線] → 「AirMac Express」 → [有線] → LANハブ

ってのはうまくいかなかった。

関係ないけど、
「AirMac Express」で無線LAN使いながら、
AirTunesが使えない。

iTunesでスピーカー選択すると、
エラーが発生する

不便で仕方がない。

「AirMac Extream」で無線LAN使いながら、
AirTunesは使えるけど、ネットワークがすごく不安定。

なんでだろう。。。

タイトルの通りだけど、
CSSで複数のセレクタを区切るカンマの位置は、
左端の1列目がいいと思う。

Read the rest of this entry