スタイルシート タイマー の説明
戻る


JavaScript を使わず，スタイルシートだけでキッチン タイマーのようなタイマーを作ってみます．
画面
（これはキャプチャ画像です．これで遊ぶことはできません．）
使い方と仕組みについて説明します．


使い方

カウント ダウンとカウント アップができます．

カウント ダウンを行うには，まずカウントする時間をセットします．
「10分」，「1分」，「10秒」のボタンでそれぞれ時間の 10 分，1 分，10 秒の桁の数値をセットします．ボタンを押す度に 0 → 1 → 2 → 3 … と数値が変わります．
1 秒の桁はセットできません．
「スタート ストップ」ボタンを押すとカウント ダウンを開始します．セットした時間が経過すると時間の表示が点滅します．
点滅を止めるには何れかのボタンを押します．「リセット」以外のボタンを押した場合は時間の表示が直前にセットした時間になり，再度「スタート ストップ」ボタンを押すと，同じ時間でカウント ダウンを開始します．

カウント アップを行うには，時間の表示が「00分00秒」の状態で「スタート ストップ」ボタンを押します．
時間の表示が「00分00秒」でないときやカウント ダウンを行って表示が点滅している状態のときは，「リセット」ボタンを押してから「スタート ストップ」ボタンを押してください．

カウント中に「スタート ストップ」ボタンを押すとカウントが一時的に停止します．
再度「スタート ストップ」ボタンを押すとカウントを再開します．

どの状態のときでも「リセット」ボタンを押すと初期状態に戻ります．一時停止中の状態や点滅中の状態は解除され，時間の表示は「00分00秒」になります．


時間のセット

10 分，1 分，10 秒の各桁の時間のセット値を保持するために，各桁について 0 〜 9（10 分，1 分の場合）または 0 〜 5（10 秒の場合）の数値に対応するラジオ ボタンを用意します．
012…9
10 分の桁●○○…○
1 分の桁●○○…○
10 秒の桁●○○…
たとえば，10 分の桁について数値 1 に対応するボタンがチェックされていたら 10 分の桁のセット値は 1（10 分）になります．
同様に 1 分の桁について数値 2 に対応するボタン，10 秒の桁について数値 3 に対応するボタンがチェックされていたら，合計で 12 分 30 秒 がセットされていることになります．
0123…
10 分の桁○●○○…
1 分の桁○○●○…
10 秒の桁○○○●…
ラジオ ボタンは非表示にしておき，各ラジオ ボタンに対してラベル（LABEL タグ）を関連付けます．ラベルにスタイル付けして「10分」などのボタンにしています．
各桁について 10 個または 6 個のラベルを同じ位置に重ねて配置し，ラベルの Z オーダーを変えて，現在セットされている数値の次の数値に対応するラベルが前面になるようにします．
たとえば，現在セットされている数値が 1 なら数値 2 に対応するラベルを前面にします．
ラベルの重ね順
この状態でラベルの位置をクリックすると数値 2 に対応するラベルがクリックされ，関連付けされているラジオ ボタンがチェックされるので，セットされている数値が 2 に変わります．

実際には，後述のように点滅を停止するラベルも重ねて配置しています．点滅状態のときはそのラベルを前面にします．


スタート／ストップとリセット

スタートとストップの動作をさせるため，以下のような動作に対応する 5 個のラジオ ボタンを使います．
  • カウント ダウン開始／再開

  • カウント ダウン一時停止

  • カウント アップ開始／再開

  • カウント アップ一時停止

  • 点滅停止
時間セット用のボタンと同様，ラジオ ボタンは非表示にしておき，各ラジオ ボタンに対してラベルを関連付けて「スタート ストップ」のボタンにしています．
時間のセットの処理と同じような考え方で，次に行う動作に対応するラベルが前面になるようにします．
たとえば，カウント ダウン中のときはカウント ダウン一時停止のラベルを前面にします．

点滅の停止は時間セット用のボタンでもできるようにしてあります．
点滅停止に対応するラジオ ボタンにラベルを関連付けて「10分」などのボタンにしています．それを時間セット用のラベルに重ねて配置し，点滅状態のときは点滅停止のラベルを前面にします．

フォームのリセット ボタン（TYPE 属性 RESET の INPUT タグ）に対してラベルを関連付けて「リセット」のボタンにしています．
ラベルをクリックするとフォームがリセットされるので，各ラジオ ボタンのチェック状態が初期状態に戻ります．


時間の表示

時間の表示には CSS カウンタを使っています．CSS カウンタの一般的な使い方は，counter-reset／counter-set で値を設定して counter-increment で値を増減させるというものだと思いますが，このプログラム（？）では counter-reset で値を設定しているだけです．
時間のセット値またはカウント中の時間の各桁の数値を counter-reset でカウンタに設定して，counter() を使って表示しています．つまり，CSS カウンタは単に数値を文字列に変換する機能として使っています．


カスタム プロパティの定義

このプログラムでは，いくつかのカスタム プロパティを @ルールの @property で定義しています．
@property の定義は，たとえばこのように書きます．
@property --a {
  syntax:'<integer>';
  inherits:true;
  initial-value:0;
}
このプログラムでは，カスタム プロパティにアニメーションを使っているところがあります．カスタム プロパティに計算値によるアニメーションを使うためには，プロパティのデータ型を定義する必要があります．
@property で syntax に <integer> を指定することで，そのプロパティを計算値によるアニメーション可能にしています．

また，計算結果の小数を整数に丸めるためにも @property を使っています．整数のプロパティを定義して，計算結果をそのプロパティに設定することで，整数への丸めを行っています．
ただし，整数プロパティに小数値を設定した場合の丸めは四捨五入です．また，負の数で小数部が 0.5 の場合は負の無限大方向に丸められます（少なくとも Opera 71 では）．切り捨てのために整数プロパティを使う場合は，その点を考慮して使用する必要があります．


このおもちゃは Firefox 128 以上および Opera 71 以上用に作っていますが，Google Chrome 107 で動くことが確認できています．Google Chrome の他のバージョンでの動作は未確認です．


戻る