クリスマスな時計を作る！

はじめまして、くれあです！
シャンシャンシャン
もうすぐクリスマスですね～
――おっとこんな時間、それでは、時計を作ってみましょう笑

現在時刻を表示する

Webからカンタンになでしこ使えます

現在時刻を表示するには、
「今を表示する」
これだけです！

今を表示する

簡易エディタで実行すると、現在の時刻が
「12:03:48」
のように表示されます。

表示した時刻を更新させる

表示した時刻が動けば時計です。
時計を動かすために、なでしこのラベル機能を使います。
「秒毎」機能を使うと、指定した時間間隔で実行してくれます。
1秒毎だとカクつくので、1/60秒毎にしています。

時間ラベル＝今のラベル作成

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで

飾りつけ

とはいえ、「12:03:48」だけだと味気ない――。
もうすぐクリスマスなので、クリスマスっぽく飾り付けしよう！！

なでしこ3は、主にWebブラウザで使うことを目的とした日本語プログラミング言語。
Webブラウザ関連の機能はお得意なのです。

ネットに使えるフォントがないか探していると――

Google Fontsとは？
Webフォントとして無料で提供されている、プログラミングインタフェースとして利用可能なインタラクティブなディレクトリーサービス。
Google Fonts - Wikipedia

現在、1300種類を超えるフォントが使える様子。
クリスマスっぽいフォントを探してみると
「Leckerli One」
これにしてみました。いい感じです

GoogleフォントのリンクとなでしこのHTML設定機能を使います。
DOMスタイル一括設定機能を使って、ラベルの文字をクリスマスな味付けにします。
細かいことは、下の例文を参考にして下さい。
文字を中央に揃えたり、いろいろ整えます。

#フォントを設定する
DOM親要素に『
    <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=Leckerli+One&display=swap" rel="stylesheet">
    』をHTML設定

#時間を表示する
時間ラベル＝今のラベル作成

#時間ラベルを飾りつける
時間ラベルに｛
    文字サイズ： 「{1×80}px」、
    色：赤色、
    /*上の余白*/「padding-top」：「{2×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「行揃え」：「中央」、
    ｝をDOMスタイル一括設定

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで

設定項目については

日本語の設定項目名わかりやすい！
ここにないものも、CSSでの設定項目名が基本的にそのまま使えます。
（補足：例分で、文字サイズなどを 「{1×80}px」と表記しているのは、だいたい自分のPCで80pxで1cmになるからです。）

ついでに、日付機能を付けて、飾りつけをして、完成！

#クリスマスな時計
#2021/12/22

#日数を設定する
日数に今日の/*9文字目*/9から2文字抜き出して代入
/*05日を5日にするために*/日数に「{日数×1}」を代入

#フォントを設定する
DOM親要素に『
    <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=Leckerli+One&display=swap" rel="stylesheet">
    』をHTML設定

#時間、今日の日付、飾りつけを表示する
時間ラベル＝今のラベル作成して改行作成
日付ラベル＝「~ {今年}.{今月}.{日数} ~🎄」のラベル作成
飾りつけラベル＝「❄ Merry Christmas !! > 🦌🎅」のラベル作成

時間ラベルに｛
    文字サイズ：「{1.3×80}px」、
    色："crimson"、
    /*上の余白*/ 「padding-top」：「{1×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

日付ラベルに｛
    文字サイズ：「{0.4×80}px」、
    色："darkcyan"、
    /*上の余白*/ 「padding-top」：「{0.5×80}px」、
    /*下の余白*/ 「padding-bottom」：「{0.5×80}px」、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

飾りつけラベルに｛
    文字サイズ：「{0.4×80}px」、
    色："silver"、
    「font-family」：「'Leckerli One', cursive」、
    「display」:「block」、
    「text-align」:「中央」
    ｝をDOMスタイル一括設定

1/60秒毎には
    時間ラベルに今をテキスト設定
    ここまで

完成品がこちら

実行するとクリスマスな時計の完成です！
フォントや文字色など自分好みにデコって
オリジナリティーあふれる時計を作ってみてください！！
🦌🛷

参考

→ラベルの書き方や設定項目など参考になります。

→なでしこ3で使える機能の一覧です。