HTML & CSS: メールコーディングの概念

公開: 2017-08-10

コーディングの世界に飛び込むことは、これまで経験したことがない場合、困難に思えるかもしれません。特に、電子メールのコーディングには独自のルールがあります。コーディングに慣れていない場合は、電子メールの HTML と CSS に直接飛び込む前に考慮すべき点がいくつかあります。

メールをコード化する必要がありますか?

コーディングの経験がない場合、電子メールをゼロからコーディングすることは実際的な解決策ではない可能性があり、必須ではありません。 VerticalResponse は、モバイルフレンドリーなテンプレートの幅広い選択肢を提供し、使いやすいエディターを提供するため、すぐに使用できるテンプレートを独自のコンテンツでカスタマイズできます。

経験があり、HTML の使用または学習にある程度慣れている場合は、カスタムメールテンプレートをコーディングすることをお勧めします。 Web ページのコーディングと同様に、ブラウザーとデバイスの動作を考慮する必要があります。さらに、Gmail、Yahoo、Outlook などの多数の電子メールクライアントの独自のスタイルデフォルトを考慮してください。 HTML で Web ページをコーディングし、外部 CSS スタイルシートを適用することに慣れている場合は、これらのメールクライアントの既定値によってスタイルが上書きされないように、内部およびインラインで CSS を操作することに慣れる必要があります。

知っておきたい語彙

コーディングにまったく慣れていない場合は、HTML と CSS について知っておくべきことを次に示します。

HTMLは、コンテンツの構造化と記述に使用する言語です。 HTML はハイパーテキストマークアップランゲージの略です。 HTML でコーディングすると、Web ページに画像や単語などの情報を表示する方法を Web ブラウザに指示するタグでコンテンツをマークアップします。

CSSは、コンテンツの表示に影響を与える言語です。 CSS を使用すると、スタイルを HTML 要素に割り当てることができます。 CSSはCascading Style Sheetの略です。スタイル宣言またはルールは出現順に適用されるため、カスケードという言葉は重要です。同じ要素に対して 2 つの宣言を行った場合、前にあるものを上書きするため、後者が優先されます。

CSS を HTML に結び付ける方法は次のとおりです。

外部 CSS: HTML ファイル内で参照される外部スタイルシート (通常は style.css という名前のファイル) を使用します。 100 ページを超える 100 の共通要素がある場合、1 つの CSS 宣言でそれらを一度に変更できるため、これは Web サイトに最適です。

内部 CSS、別名埋め込み CSS: HTML ファイルの先頭にある <style> タグ内に CSS コードを含めます。メールをコーディングするとき、これは共通の要素に適用される一般的なスタイルを割り当てるのに最適です。ただし、この方法は常に電子メールでサポートされているわけではありません。

インライン CSS: CSS コードを HTML コード内の単一の HTML 要素に直接接続します。電子メールのコーディングでは、この方法により、特定のスタイルがブラウザおよび電子メールクライアントのデフォルトによって上書きされないようにします。

外部または内部で CSS を設定することに慣れている場合は、その方法で CSS を構築してから、PutsMail のこのようなインラインツールを使用して、スタイルをインライン CSS に変換できます。

HTMLとCSSの関係

HTML と CSS がどのように関連しているか、および CSS を HTML から分離することで HTML の表示がどのように解放されるかをよりよく理解するには、素晴らしく有名な Web サイト CSS Zen Garden にアクセスしてください。ここでは、同じ HTML マークアップを大幅に異なる CSS で表示できます。、著名なデザイナーによってコーディングされています。

メールコーディングへのアプローチ

メールを最初からコーディングするときは、できるだけシンプルにします。 TextWrangler、Notepad、Sublime などのプレーンテキストエディターを使用し、Dreamweaver などのビジュアルエディターはコードに不要な項目を追加する可能性があるため、使用しないでください。

レイアウトについては、モバイルファーストのアプローチを試してみてください。これは、小さな画面用に設計し、上に向かって作業することを意味します。モバイルでの表示が継続的に増加しているため、携帯電話やタブレットでメールが適切に表示されるようにすることは、これまで以上に重要になっています。デスクトップでしか見栄えのしない複雑なデザインを作成する理由はありません。メッセージとデザインを最小のデバイスに合わせてシンプルに保つことで、コーディングも容易になり、すべてのデバイスのユーザーがアクセスできるようになり、読者の注意を主要な行動を促すフレーズに集中させることができます。

レイアウトとコーディングが完了したら、Litmus や VerticalResponse の Inbox Preview for HTML エディターなどのツールを使用して、さまざまなブラウザーやメールクライアントでメールがどのように表示されるかをプレビューして、送信する前に問題をトラブルシューティングできるようにしてください。

どこから学び始めるか

電子メールのコーディング方法を詳しく実践的に学べるオンラインチュートリアルが多数あります。電子メールのコーディングに飛び込む良い方法の 1 つは、好きな単純なテンプレートを見つけて、コードを調べることです。最初に <body>、<head>、<div> などの主要なタグに慣れてから、タグが <div class=”half-column"> などの ID やクラスにさらに定義される場合があることに注目してください。品質の高い HTML テンプレートの命名は明確で論理的であるため、CSS に表示されたときに何が起こっているかを簡単に伝えることができます。

ステップバイステップのレッスンの準備ができている場合は、最近のチュートリアル (過去 1 年以内) を探してください。コーディングへのアプローチは常に再考されています。たとえば、ここ数年で人気を博しているモバイルフレンドリーな方法は、流動的/ハイブリッドなアプローチです。 Envato Tuts+ によるこの流体/ハイブリッドチュートリアルは、HTML についてある程度理解している人に最適です。初心者向けに、Lynda.com ではメールに特化したコーディングコースを多数提供しています。適切なコースでは、コーディングの演習を行い、リファレンスとして使用できるダウンロード可能なサンプルプロジェクトファイルを提供します。

より多くの顧客にリーチする時間を短縮

今すぐバーティカルレスポンスを試す

（それは無料です！）

編集者注: このブログ投稿は、2016 年 3 月に最初に公開されたもので、正確さと関連性を高めるために改訂および更新されています。