社内DMをHTMLメールでソフトを利用して配信する、ということで自作HTMLを作ってました。
結果的にHTMLを書くわけではなく画像を貼り合わせるだけで送信できるということが判明したのと自作HTMLはソフトと相性が悪くバグるため破棄するにいたりました。。
ひさびさにHTMLを書いたので引用した情報をまとめておきます。
HTMLページはゴリゴリコーディングするほうがはやい人で、スタイルシートには疎いレベルです。
（いにしえの2000年代にYahoo!のホームページビルダーをいじっていた口です。）
HTMLメールの学習
HTMLページとHTMLメールは違うらしいことを学習。
HTMLでtableタグで万全を期す文化らしい。
（ブラウザや端末、メーラーのバリエーションが多すぎてスタイルシートが効かない等あるとのこと）
区切り線のTipsも書かれている かんばらあい さん。記事をありがとうございます！
--
OutlookメールをHTMLファイルに保存すれば？などいろいろ調べましたが
Outlookでもらった時点で当初のHTML構造は失われる、といった情報があったのと、
VBAを使って云々といった手法は取らずに力業でいくことにしました。
--
HTML5で記憶が止まっているのでその後のいきさつをこちら確認
HTMLメールのデザイン・テンプレートを見てみる
Pinterestでおしゃれなデザインを眺めるというデザイナーの方のTipsがありますが、
ここでは素敵なデザインのメールテンプレートを眺めたりソースコードを眺めました。
背景色
単色のコンセプトカラーがある場合は色のHEXコードを取得します。
カラーピッカーはPowerToysに搭載されています。
ヘッダーの画像
####ヘッダーの画像をいいサイズにトリミングする
ボタンの画像
画像の素材
今回はMS365のサービスのアイコンが必要だったので、Fluent UIから取得しました。
ボタンの画像を作る
GIMPはどういじったらいいのか学習するのに時間がかかりそうなので
Canvaを利用しました（画像のサイズ変更は有料になります）
GIMP自体は太田さんのブログで知りました
ボタン画像を角丸にする
本文に区切り線を追加する
metaタグなどお約束の定義まわり
metaタグ
レスポンシブ対応