YujiFukami · June 29, 2025 21:56
diff --git a/日時カウントダウンタイマー b/日時カウントダウンタイマー
 <!DOCTYPE html>
 <html lang="ja">
 <head>
  <meta charset="UTF-8">
  <title>カウントダウンタイマー</title>
  <style>
    body {
      font-family: "Arial", sans-serif;
      text-align: center;
      padding-top: 40px; /* ページ上部の余白を指定（調整可能） */
      background-color: #f0f0f0; /* ページ全体の背景色 */
    }

    #countdown {
      font-size: 48px;           /* カウントダウン文字サイズ */
      font-weight: bold;         /* 太字指定 */
      color: #333;               /* カウントダウンの文字色（変更可） */
      background: #fff;          /* 背景色（変更可） */
      display: inline-block;
      padding: 30px 50px;        /* 上下・左右の内側余白（下側を広くするならここ） */
      margin-bottom: 40px;       /* 要素下部の外側余白（←追加） */
      border-radius: 15px;       /* 角の丸み */
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* 影のデザイン */
    }

    #target-label {
      font-size: 28px;           /* イベントタイトルの文字サイズ */
      margin-bottom: 5px;        /* 下の日時との間隔 */
      color: #222;               /* ラベル文字色 */
    }

    #target-date {
      font-size: 20px;           /* 日付テキストの文字サイズ */
      margin-bottom: 15px;       /* カウントダウンとの間隔 */
      color: #666;               /* 日付の文字色 */
    }
  </style>
 </head>
 <body>

  <!-- ▼ ターゲットの説明をここで指定 -->
  <script>
    // ▼ 表示ラベル（あと〇〇まで）と日時（ISO形式）を自由に変更してください
    const targetLabel = "今年の折り返しまで";
    const targetDateString = "2025-07-02T12:00:00"; // YYYY-MM-DDTHH:MM:SS
  </script>

  <div id="target-label"></div>
  <div id="target-date"></div>
  <div id="countdown">読み込み中...</div>

  <script>
    // ▼ 日時をDateオブジェクトに変換
    const targetDate = new Date(targetDateString);

    // ▼ 表示テキスト挿入
    document.getElementById("target-label").innerText = `あと ${targetLabel}`;
    const options = {
      year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit'
    };
    document.getElementById("target-date").innerText = `対象日時: ${targetDate.toLocaleString('ja-JP', options)}`;

    // ▼ カウントダウン更新処理（10ミリ秒間隔）
    function updateCountdown() {
      const now = new Date();
      const diff = targetDate - now;

      if (diff <= 0) {
        document.getElementById("countdown").innerText = "終了しました！";
        clearInterval(interval);
        return;
      }

      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((diff % (1000 * 60)) / 1000);
      const milliseconds = diff % 1000;

      document.getElementById("countdown").innerText =
        `あと ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒 ${milliseconds}`;
    }

    const interval = setInterval(updateCountdown, 10);
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>カウントダウンタイマー</title>
	<style>
	body {
	font-family: "Arial", sans-serif;
	text-align: center;
	padding-top: 40px; /* ページ上部の余白を指定（調整可能） */
	background-color: #f0f0f0; /* ページ全体の背景色 */
	}

	#countdown {
	font-size: 48px; /* カウントダウン文字サイズ */
	font-weight: bold; /* 太字指定 */
	color: #333; /* カウントダウンの文字色（変更可） */
	background: #fff; /* 背景色（変更可） */
	display: inline-block;
	padding: 30px 50px; /* 上下・左右の内側余白（下側を広くするならここ） */
	margin-bottom: 40px; /* 要素下部の外側余白（←追加） */
	border-radius: 15px; /* 角の丸み */
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* 影のデザイン */
	}

	#target-label {
	font-size: 28px; /* イベントタイトルの文字サイズ */
	margin-bottom: 5px; /* 下の日時との間隔 */
	color: #222; /* ラベル文字色 */
	}

	#target-date {
	font-size: 20px; /* 日付テキストの文字サイズ */
	margin-bottom: 15px; /* カウントダウンとの間隔 */
	color: #666; /* 日付の文字色 */
	}
	</style>
	</head>
	<body>

	<!-- ▼ ターゲットの説明をここで指定 -->
	<script>
	// ▼ 表示ラベル（あと〇〇まで）と日時（ISO形式）を自由に変更してください
	const targetLabel = "今年の折り返しまで";
	const targetDateString = "2025-07-02T12:00:00"; // YYYY-MM-DDTHH:MM:SS
	</script>

	<div id="target-label"></div>
	<div id="target-date"></div>
	<div id="countdown">読み込み中...</div>

	<script>
	// ▼ 日時をDateオブジェクトに変換
	const targetDate = new Date(targetDateString);

	// ▼ 表示テキスト挿入
	document.getElementById("target-label").innerText = `あと ${targetLabel}`;
	const options = {
	year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', hour: '2-digit', minute: '2-digit'
	};
	document.getElementById("target-date").innerText = `対象日時: ${targetDate.toLocaleString('ja-JP', options)}`;

	// ▼ カウントダウン更新処理（10ミリ秒間隔）
	function updateCountdown() {
	const now = new Date();
	const diff = targetDate - now;

	if (diff <= 0) {
	document.getElementById("countdown").innerText = "終了しました！";
	clearInterval(interval);
	return;
	}

	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
	const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((diff % (1000 * 60)) / 1000);
	const milliseconds = diff % 1000;

	document.getElementById("countdown").innerText =
	`あと ${days}日 ${hours}時間 ${minutes}分 ${seconds}秒 ${milliseconds}`;
	}

	const interval = setInterval(updateCountdown, 10);
	</script>
	</body>
	</html>