カウントダウンターゲットの設定方法
const setting = new Date("Dec 24, 2025 18:00:00"); // ターゲット日時設定
の部分を Jul 07,2026 00:00:00 (2026年7月7日午前0時0分0秒)などと設定します
書体の変更方法(Googleフォントの使い方)は、ページ下にあります
サイズの変更はドラッグするだけです(レスポンシブ対応です)
背景画像や書体はお好みに合わせお使いください
NO.1(書体は一括指定)
NO.2(書体は個別指定)
NO.3(背景画像なし・書体は個別指定)
NO.4(背景画像なし・書体は個別指定)
https://fonts.google.com/ よりGoogle Fontsへ
お好みのフォントをクリック
Get font
Get embed code
青枠のようにいくつかのフォントが family になっています
Embed code in the <head> of your htmlの Copy code(赤枠)
目的のフォント(青枠)の font-family 部分(黄色枠)だけををコピー
Copy code(赤枠)でコピーしたものをコード1番上の <!-- 書体指定 --> 部分にペースト
<!-- 書体指定 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
<div class="image">
<p class="ttl">Countdown to Christmas</p>
黄色枠でコピーしたfont-family を下記部分にペースト
.ttl {
font-family: "Dancing Script", cursive;
font-weight: bold;
font-style: normal; /* italicは斜体 */
margin: 0.5em 0px;
この例の場合6つのフォントが family になっていますので、<!-- 書体指定 --> の記述は1箇所だけで6種類のフォントの使い分けができます
例えば、タイトル(.ttl)・ターゲット日時(.ttl2)・残り時間表示(.time)
をそれぞれ別の書体で表現できます