11月に入って1週間過ぎていきますが…

あと2ヶ月で2024年が終わります！

1年のカレンダーを見ると、2024年のカウントダウンを数えてしまう習慣化になってしまいました…

年末に向けて大忙しのシーズンが始まりますね。

どっかのお店もクリスマスシーズンが始まっているところも見かけるようになりました。

年末にバタバタにならないように余裕のあるスケジュールを組み立ててくださいね。

話を取り戻して…

メルマガ配信時のHTML構造

久々のメルマガ配信時に、HTML構造の中身を忘れたりしていました…

過去にどんなメルマガ配信したのか、データを探ったんですが…

消失…

Webサイトで、メルマガ配信時のメルマガの文章構造について再度勉強し直しました。

CSSの初期化設定は使えたかなとか…

色々考えながら…

最終的に思い出すこともできなかったので、自分のメルマガ配信で試行錯誤をしてきれいに表示できるかを試してみました。

CSSの初期化設定は適用されたんですね。

数年前は全く効かなかったんですが…

メールのシステムが進化したのでしょうかね？

先にCSSの初期化

*{
	/* フォント関連の初期化 */
	font-size:100%;
	font-weight:400;
	/* 行間の初期化 */
	line-height:1;
	/* 余白の初期化 */
	margin:0;
	padding:0;
}

/* Table 構造の設定 */
table{
	/* 余白の設定 */
	margin:0 auto;
	/* 横幅の設定 */
	width:600px;
}

この設定で進めました。

しかし、レスポンシブ対応ができると思ったら、Tableの文書構造がはみ出てしまいました。

メディアクエリを設定したら反応するか試してみました。

*{
	/* フォント関連の初期化 */
	font-size:100%;
	font-weight:400;
	/* 行間の初期化 */
	line-height:1;
	/* 余白の初期化 */
	margin:0;
	padding:0;
}

/* Table 構造の設定 */
table{
	/* 余白の設定 */
	margin:0 auto;
	/* 横幅の設定 */
	width:600px;
}

@media screen and (max-width: 768px) {
	table{
		/* 横幅の設定 */
		width:100%;
	}
}

次に、HTMLに設定を忘れずに、「Viewport」を設定。

何とかうまくいけました。

iPhone SE の本体機が持ってないので…

ブラウザに搭載されているデバイスを確認。

無事に横幅が100%に表示されました。

あとは内部の文章構造はどうなのかまた後日に教えますね。

ではまた！