HTML Academy · レッスン

テーブルベースのレイアウト手法

Q: 「テーブルベースのレイアウト手法」で何を学びますか？

HTMLメールでdivではなくテーブルを使う理由を理解します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTMLメールでdivではなくテーブルを使う理由を理解します

「テーブルベースのレイアウト手法」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

メールにテーブルを使う理由

メールクライアント、特にMicrosoft Wordのレンダリングエンジンを使用するWindows版Outlookは、flexbox、grid、さらには信頼性の高いブロックレベルレイアウトにも対応していません。すべての主要なメールクライアントで一貫して表示できる構造要素は、テーブルだけです。

単一の外側テーブル

レスポンシブメールはすべて、メール本文の役割を果たす幅100%の外側の<table>から始まり、その内側に実際のコンテンツを格納する固定幅のテーブル（一般的には600px）を配置します。この2階層パターンは、ほぼすべての実運用テンプレートの基盤です。

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content goes here</td></tr>
      </table>
    </td>
  </tr>
</table>

必須のテーブル属性

すべてのテーブルに必ずcellpadding="0" cellspacing="0" border="0"を指定してください。これらがないと、Outlookが予期しない隙間を挿入します。role="presentation"を追加すると、レイアウト用テーブルはデータテーブルではないため、スクリーンリーダーにテーブルの意味を読み上げないよう指示できます。

列にはネストしたテーブルを使う

複数の列を作成するには、コンテンツ行の中に2つの<td>セルを持つテーブルをネストします。各セルが1つの列を保持します。div+floatは避けてください。Outlookはfloatを無視し、列を縦方向に積み重ねるため、デザインが崩れます。

標準の幅は600px

デスクトップのプレビュー領域は、事実上およそ600px幅が標準です。この幅を基準に設計すると、Outlook、Gmailデスクトップ版、Apple Mail、Yahoo、Thunderbirdで、横スクロールなしにメールを快適に表示できます。

メディアクエリによるモバイルでの積み重ね

小さな画面では、メディアクエリで内側のテーブルセルを対象にし、widthを100%、displayをblockに設定すると、列が縦方向に積み重なります。iOS MailとGmail Androidはメディアクエリに対応していますが、Outlook 365デスクトップ版は無視し、600pxのデスクトップレイアウトを維持します。

@media (max-width: 600px) {
  .col {
    display: block !important;
    width: 100% !important;
  }
}

セル単位の背景

背景色や背景画像はdivではなく<td>セルに適用してください。Outlookはtdのbgcolor属性を確実にサポートしますが、divのCSS background-colorは、クライアントによって削除されたり完全に無視されたりする場合があります。

Outlookの背景にVMLを使う

Outlookで背景画像を表示するにはVector Markup Language（VML）が必要です。最新のCSS background-imageを条件付きのコメントで囲み、インラインのv:rectフォールバックを追加してください。これにより、Outlookでは画像が表示され、それ以外のクライアントではCSSが使用されます。

内部の間隔にはcellpaddingを使う

内部の余白にはcellpadding（属性）と、paddingを設定した単一の<td>を使用してください。テーブルセルのマージンはOutlookでは信頼できませんが、tdのpaddingはどのクライアントでも使用できます。同じtdにbgcolorとpaddingを組み合わせれば、divを使わずに「カード」コンポーネントを作成できます。

アクセシビリティ

すべてのレイアウト用テーブルにrole="presentation"を追加し、スクリーンリーダーが「行、2列中の1列目」のように読み上げないようにしてください。また、すべての画像にaltテキストを設定し、コンテンツには画像ではなく実際のテキストを使用し、見出しの階層を明確にしてください。

理解度チェック

メールのレイアウトには、CSS flexboxを使ったdivではなく、なぜテーブルを使うのでしょうか。

まとめ

HTMLメールのレイアウトには、cellpadding/cellspacing/borderを0にしたネストテーブルとrole="presentation"を使用します。幅100%の外側テーブルで600pxの内側テーブルを中央揃えし、ネストしたtdセルで列を構成します。メディアクエリを使えばモバイルで列を積み重ねられます。flexbox/gridは避け、tdにはbgcolorを使用し、Outlookの背景にはVMLフォールバックを追加してください。

よくある質問