【ITニュース解説】A CSS only time progress bar to use in markdown / GitHub Pages

Webページ上で時間の経過やタスクの進捗状況を視覚的に示す「プログレスバー」は、ユーザーに分かりやすく情報を提供する上で重要な要素である。通常、このような動的な表示はJavaScriptというプログラミング言語を用いて制御されることが多い。しかし、今回紹介するのは、CSS（カスケーディング・スタイル・シート）という、Webページの見た目を定義する言語だけで作られた時間経過プログレスバーの技術だ。この技術の最大の特徴は、ブログや技術情報共有サイトで広く使われているMarkdown形式のファイルに、手軽にプログレスバーを埋め込める点にある。特に、GitHubが提供するWebサイトホスティングサービス「GitHub Pages」のような、JavaScriptの利用に一定の制約がある環境でも簡単に導入できることが大きな利点となる。

このCSSのみで実装されたプログレスバーが開発された背景には、GitHub Pagesの仕組みが関係している。GitHub Pagesでは、Markdownファイルを使ってWebページを生成することが一般的だが、複雑なスクリプトを組み込むためには追加の設定が必要になることがある。そこで、CSSだけで完結するプログレスバーがあれば、特別な設定をせずとも、Markdownファイルに数行のコードを追加するだけで desired な機能を実現できる。これにより、開発者はコンテンツの作成に集中しやすくなる。

その技術的な仕組みは、HTMLの基本的な要素とCSSの高度な機能を巧みに組み合わせることで成り立っている。まず、HTMLの構造として、プログレスバー全体を一つの div 要素で囲み、その内部にユーザーの目には見えないように設定されたチェックボックス (<input type="checkbox">) と、ユーザーがクリックするためのテキストラベル (<label>) を配置する。ここで重要なのは、チェックボックスの id 属性とラベルの for 属性に同じ値を指定することだ。これにより、両者が関連付けられ、ユーザーがラベルをクリックすると、対応するチェックボックスがオンになるというHTMLの標準的な挙動が利用できる。

アニメーションの引き金となるのが、このチェックボックスの状態変化である。CSSには「擬似クラス」という特定の状態にある要素にスタイルを適用する機能があり、その一つである :checked は、チェックボックスがオンになった状態を指す。つまり、「ラベルがクリックされ、紐づいたチェックボックスがオンになったら」というイベントをCSS側で検知できるのだ。この :checked 擬似クラスをトリガーとして、プログレスバーの外観を変化させるアニメーションを起動させる。具体的には、バーを表す要素の幅を0%から100%へと徐々に変化させるようなスタイルを animation や transition といったCSSプロパティで定義する。

さらに、このプログレスバーは非常に柔軟な設計になっている。アニメーションの時間を自由に設定できるように、CSSカスタムプロパティ（CSS変数）が活用されている。HTML側で style="--duration: 2s;" のように変数を定義すると、CSS側でその値を受け取り、アニメーションの再生時間を動的に変更できる。この仕組みにより、同じCSSを使い回しながら、2秒で完了するバーや10秒かかるバーなど、用途に応じた複数のプログレスバーを一つのページ内に簡単に設置することが可能だ。

この技術は、GitHub Pagesで利用される静的サイトジェネレーター「Jekyll」の機能を使うことで、より簡単に組み込めるようになっている。{​% include ... %​} という構文を使い、あらかじめ用意された部品ファイルを呼び出すだけで、必要なHTMLとCSSが自動的にページに挿入される。もちろん、Jekyll環境でなくとも、基本的なHTMLとCSSのコードを記述すれば、どのようなWebサイトでもこのプログレスバーを実装することができる。

ただし、この手法には留意すべき点も存在する。開発者自身が述べているように、これは一種の「ハック」、つまり正攻法ではない応用的なテクニックである。最大の課題はアクセシビリティだ。このプログレスバーは、HTMLの構造上は単なるチェックボックスに過ぎないため、スクリーンリーダーのような支援技術を利用する視覚に障がいのあるユーザーには、これが「時間の経過」を示していることが伝わらない。本来、進捗状況を示すためには、その意味を明確に持つHTMLの <progress> 要素を使用するのが望ましい。<progress> 要素を使えば、ブラウザや支援技術がその役割を正しく解釈し、すべてのユーザーに適切な形で情報を提供できる。

この技術は、制約のある環境下でいかにして目的を達成するかという、エンジニアリングにおける工夫の一例を示している。CSSだけでインタラクティブな表現が可能であることの証明であり、チェックボックスの状態をトリガーにするテクニックは、プログレスバー以外にも様々なUIに応用できる強力な手法だ。システムエンジニアを目指す者にとって、このような実装から具体的なテクニックを学ぶと同時に、その利点と引き換えに何を犠牲にしているのか、つまりアクセシビリティのような技術選定におけるトレードオフを理解することが、より良いプロダクト開発に繋がる重要な視点となるだろう。