atwiki-logo
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
  • ページ一覧
    • ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ(更新順)
  • RSS
    • このウィキの更新情報RSS
    • このウィキ新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡(不具合、障害など)
意匠部@wiki BETA
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
意匠部@wiki BETA
  • 操作ガイド
  • 新規作成
  • 編集する
  • 全ページ一覧
  • 登録/ログイン
ページ一覧
意匠部@wiki BETA
  • 新規作成
  • 編集する
  • 登録/ログイン
  • 管理メニュー
管理メニュー
  • 新規作成
    • 新規ページ作成
    • 新規ページ作成(その他)
      • このページをコピーして新規ページ作成
      • このウィキ内の別ページをコピーして新規ページ作成
      • このページの子ページを作成
    • 新規ウィキ作成
  • 編集
    • ページ編集
    • ページ編集(簡易版)
    • ページ名変更
    • メニュー非表示でページ編集
    • ページの閲覧/編集権限変更
    • ページの編集モード変更
    • このページにファイルをアップロード
    • メニューを編集
    • 右メニューを編集
  • バージョン管理
    • 最新版変更点(差分)
    • 編集履歴(バックアップ)
    • アップロードファイル履歴
  • ページ一覧
    • このウィキの全ページ一覧
    • このウィキのタグ一覧
    • このウィキのタグ一覧(更新順)
  • RSS
    • このwikiの更新情報RSS
    • このwikiの新着ページRSS
  • ヘルプ
    • ご利用ガイド
    • Wiki初心者向けガイド(基本操作)
    • このウィキの管理者に連絡
    • 運営会社に連絡する(不具合、障害など)
  • atwiki
  • 意匠部@wiki BETA
  • CSS・XHTML
  • コーディングルール
  • メールマガジンを作る際に気をつけること

意匠部@wiki BETA

CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること

最終更新:2010年04月15日 17:31

nekomeg

- view
メンバー限定 登録/ログイン

コーディングについて


  1.旧式のHTMLを使用する
     CSSレイアウトは使用しないで、安全で旧式のテーブルレイアウトを使用する。
※float、positionなどは非対応、widthやmarginの解釈が間違ってるクライアントが多い

  2. スタイルは、インラインで指定する
     head部分のスタイル指定を無視するメーラーがあるので、CSSはインラインで指定する。
※もちろん外部スタイルシートも危険

  3. 背景画像に頼ったデザインにしない
     &bold(){背景画像が表示されない場合がある}ので、表示されなくても破綻しないデザインにする。
  4. 画像は表示されないものと考える
     &bold(){画像が表示されない場合でも、情報が伝わるようにデザインする。}
  5. 画像には、altを設定する
     画像が表示されない場合、altに記述したテキストで情報を伝えられます。
  6. パス指定は、絶対パスを使用する
     画像のパスは、http://から記述します。
※もちろんURLも。最後にローカルで開いてもすべて表示されることを確認する癖をつけること

背景はtable要素のbackground/bgcolorで指定するのが無難
ただしOutlook2007では背景画像いっさい使えません!
http://itpro.nikkeibp.co.jp/article/COLUMN/20061031/252271/

  7. ファイルの容量は、小さくする
     容量が大きいとスパムメールになる場合があるため、可能な限り小さい容量にする。
※ソース中の改行やスペースを取るなど小さな努力が必要。

  8. フラッシュやフォームは、避ける
     フラッシュやアニメーションGIFは、ファイル容量を大きくします。
     フォームはセキュリティフラグを出すか、動作しません。
※Flashは表示できないクライアントがほとんど。Outlook2007ではかなりのhtmlタグ・属性が使えなくなっている

  9. より小さいスペースでもよいデザイン
     デザインの幅は、少なくとも800px、できれば750px以内を目安に設計します。
※実質的には幅650pxくらいまでがいいのではないかと思われる(ノートPCで2カラムのメーラを使う環境を想定するとその辺がギリ)

引用部分:HTMLメールの制作時に気をつけたい9つのポイント(コリス)
http://coliss.com/articles/build-websites/operation/work/879.html

  • 日本語の場合、文字コード、改行コードは配信システムに依存するので要確認。手動で配信する場合はiso-2022-jp(JIS)、改行コードはCR/LF
  • DTDはHTML4.01で。XHTMLは正しく解釈されないことがある
  • 国内主要メーラで必ず表示確認すること。OutlookExpress,Thunderbird,Becky!あたりは必須。

テキストパートも用意する

  • multipart/alternative方式で配信すれば、htmlメールを受信しない設定にしている人にはテキストパートが表示される。

意外と厄介なのがWEBメール

参考:CSS support in email clients
http://www.campaignmonitor.com/css/
  • 上記の表を見るとわかるように、特にGmailは外部CSSの読み込み、headへの記述共に使えない。でも最近は使ってる人多いし、対応したい。
  • backgroundなど重要なプロパティも一切使えない。背景画像で装飾したい場合はtableのbackground属性を使う
  • スペーシングはsp.gif(名前は任意。透明で1px*1pxのgif画像)を使うのが一番安全。
  • width,height,margin,padding,border辺り無視されることがあるので注意
  • valid志向の人は発狂しそうになるけど、グッとこらえること。
  • WEBメールに対応する場合、tableレイアウトかつCSSはすべて(aタグも含め)インラインで記述する

  • gmailで隙間が空く問題
背景画像を指定しているセル、画像だけが入っているセルで隙間があく。
font-size:0;
line-height:0;
vertical-align-bottom;
を指定し、ソースの改行やスペースをとると解消される。

アクセス解析も忘れずに

  • imgタグで計測
  • クリック数を計測する場合はリンクをすべて計測用URLに置き換える

検証

自分で検証する場合

  1. ブラウザで表示させたhtmlを全選択
  2. gmailでhtmlメール編集画面に貼り付け
  3. 送信
LINE
シェア
Tweet
意匠部@wiki BETA
記事メニュー

主なメニュー

  • トップページ
  • デザイン
  • CSS・XHTML
  • Flash
  • MT
  • 携帯
  • その他意匠部の常識
  • ツール
  • お役立ちリンク
  • 研修
  • このwikiの編集ルール



wikiの使い方

  • @wiki
  • @wikiご利用ガイド
    • @wikiの基本操作
    • 用途別のオススメ機能紹介
    • @wikiプラグイン
    • @wiki便利ツール
    • @wiki構文



メニュー1を編集


記事メニュー2

更新履歴

取得中です。


メニュー2を編集
最近更新されたページ
  • 4459日前

    CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること
  • 4801日前

    CSS・XHTML/tips/1pxのSWFは絶対配置で見える位置に置く
  • 4809日前

    ツール/非PG向けローカル開発環境
  • 4816日前

    MT/インストール/ローカル(Mac)
  • 4818日前

    ツール/いれたほうがいい
  • 4860日前

    携帯
  • 4860日前

    携帯/キャリア別コーディング
  • 4962日前

    MT/entryBodyの中のリンクを自動的に別ウインドウで開く
  • 4978日前

    CSS・XHTML/コーディングをはじめよう
  • 4978日前

    CSS・XHTML
もっと見る
最近更新されたページ
  • 4459日前

    CSS・XHTML/コーディングルール/メールマガジンを作る際に気をつけること
  • 4801日前

    CSS・XHTML/tips/1pxのSWFは絶対配置で見える位置に置く
  • 4809日前

    ツール/非PG向けローカル開発環境
  • 4816日前

    MT/インストール/ローカル(Mac)
  • 4818日前

    ツール/いれたほうがいい
  • 4860日前

    携帯
  • 4860日前

    携帯/キャリア別コーディング
  • 4962日前

    MT/entryBodyの中のリンクを自動的に別ウインドウで開く
  • 4978日前

    CSS・XHTML/コーディングをはじめよう
  • 4978日前

    CSS・XHTML
もっと見る
人気Wikiランキング

atwikiでよく見られているWikiのランキングです。新しい情報を発見してみよう!

  1. アニヲタWiki(仮)
  2. ゲームカタログ@Wiki ~名作からクソゲーまで~
  3. 初音ミク Wiki
  4. 検索してはいけない言葉 Wiki
  5. Grand Theft Auto V(グランドセフトオート5)GTA5攻略wiki
  6. みんなで決めるゲーム音楽ベスト100まとめwiki
  7. 機動戦士ガンダム バトルオペレーション2攻略Wiki 3rd Season
  8. 機動戦士ガンダム EXTREME VS.2 XBOOST wiki
  9. グラソツーリスモ
  10. ニコニコMUGENwiki
新規Wikiランキング

最近作成されたWikiのアクセスランキングです。見るだけでなく加筆してみよう!

  1. ヘブンバーンズレッドwiki
  2. ポンボール攻略まとめwiki
  3. V Rising日本語攻略@wiki
  4. ブレイド育成 攻略 ウィキ
  5. ブルリフ(淫夢)語録まとめwiki
  6. ザ・アンツ攻略wiki @ 221鯖
  7. 魔物娘と不思議な冒険2~2人の王と紡がれし約束~ @ ウィキ
  8. ウイニングポスト9 2022 系統確立特化@wiki
  9. このみのあ まとめ@wiki
  10. 百花繚乱パッションワールド @wiki
  • このWikiのTOPへ
  • 全ページ一覧
  • アットウィキTOP
  • 利用規約
  • プライバシーポリシー

2019 AtWiki, Inc.