<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【ここにLPのタイトルを入力してください】</title>
<style>
/* CSSリセット */
body {
margin: 0;
padding: 0;
background-color: #ffffff;
}
/* ------------------------------------- */
/* 💡 共通設定：画像を非表示にする */
/* ------------------------------------- */
.lp-pc, .lp-sp {
display: none;
width: 100%;
height: auto;
}
/* ------------------------------------- */
/* 💡 PC表示の設定（画面幅が768pxより広い場合） */
/* ------------------------------------- */
/* 一般的にPCやタブレットを対象とする幅 */
@media (min-width: 768px) {
.lp-pc {
display: block; /* PC用画像を表示 */
}
}
/* ------------------------------------- */
/* 💡 スマホ表示の設定（画面幅が767px以下の場合） */
/* ------------------------------------- */
/* 一般的にスマートフォンを対象とする幅 */
@media (max-width: 767px) {
.lp-sp {
display: block; /* スマホ用画像を表示 */
}
}
</style>
</head>
<body>
<img src="lp-pc.jpg" alt="PC用LP画像" class="lp-pc">
<img src="lp-sp.jpg" alt="スマホ用LP画像" class="lp-sp">
</body>
</html>