html

生成されたHTMLメールコードとプレビュー

以下のコードをHTMLメールとして使用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ああああ</title>
<style>
    /* ユーザー指定のスタイルを反映 */
    body {
        margin: 0;
        padding: 0;
        background-color: #e0e0e0;
    }
    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
    img {
        display: block;
        max-width: 100%; 
        height: auto;
    }
    .container {
        width: 100%;
        max-width: 700px; /* ユーザー指定の700pxに変更 */
        margin: 0 auto;
        background-color: #ffffff;
    }
    /* ボタンのスタイル (インライン化されるが、念のため残す) */
    .cta-button {
        display: block;
        width: 90%;
        max-width: 280px;
        padding: 16px;
        margin: 0 auto;
        background-color: #FF0000;
        color: #ffffff;
        text-decoration: none;
        border-radius: 4px;
        font-size: 20px;
        font-family: Arial, sans-serif;
        text-align: center;
    }
    .content-padding {
        background: #fff;
    }
    /* レスポンシブ対応 (コンテナ幅 700px に合わせる) */
    @media only screen and (max-width: 700px) {
        .container { /* .responsive-wrapper から .container にクラス名を修正 */
            width: 100% !important;
            max-width: 100% !important;
        }
        .content-padding {
            padding: 20px 10px !important; /* パディングを調整 */
        }
    }
</style>
</head>
<body style="margin: 0; padding: 0; background-color: #e0e0e0;">
<center>
    <table width="100%" bgcolor="#e0e0e0" style="margin: 0; padding: 0;">
        <tr>
            <td align="center">
                <!-- .container / max-width: 700px -->
                <table class="container" width="100%" style="max-width: 700px; margin: 0 auto; background-color: #ffffff;" bgcolor="#ffffff">
                    
                    <!-- 固定: 正しく表示されない場合はこちら -->
                    <tr>
                        <td align="center" style="padding: 10px 0 20px 0; font-size: 12px; /* 100%だと大きすぎるため調整 */ border-bottom: 1px solid #333333; font-family: Arial, sans-serif; color: #333;">
                            このメールはHTMLメールで配信しています。<br>
                        </td>
                    </tr>
                    
                    <!-- 固定: ヘッダーロゴ -->
                    <tr>
                        <td align="center" style="padding: 20px 0 10px; background: #282a27;">
                        </td>
                    </tr>

                    <!-- ▼▼▼ 柔軟なコンテンツエリア ▼▼▼ -->

                    <!-- ▲▲▲ 柔軟なコンテンツエリア ▲▲▲ -->

                    <!-- 固定: フッター -->
                    <tr>
                        <td align="center" style="padding:20px 10px; font-size: 12px; /* 100%は大きすぎるため調整 */ color:#888888; border-top:1px solid #dddddd; font-family:Arial, sans-serif;">
                            
                            <p style="margin:10px 0; line-height: 1.6;">
                                株式会社〇〇<br />
〒123-4567 東京都〇〇区〇〇555<br />
TEL: 03-1234-5678
                            </p>
                            
                            <p style="margin:0;">
                                Copyright © Your Company All Rights Reserved.
                            </p>
                        </td>
                    </tr>

                </table>
                <!-- /.container -->
            </td>
        </tr>
    </table>
</center>
</body>
</html>
ライブプレビュー: