98.css – Windows 98 UIを再現するCSSデザインシステム
(jdan.github.io)- 98.cssは、Windows 98のように見えるWebインターフェースをCSSだけで作成でき、古いデスクトップUIを忠実に再現できるようにする
- アクセシビリティはセマンティックHTMLに依存し、ボタン・ラベル・アイコンボタンのARIA属性を正しく使うことが前提となる
- JavaScriptを含まないため、フレームワークを問わずReact、素のJavaScript、一般的なHTMLプロジェクトに組み込める
- ボタン、チェックボックス、ラジオボタン、ウィンドウ、ツリービュー、タブ、テーブルビュー、プログレスバーなど、Windows 98風のコンポーネントを提供する
- npm、GitHub Releases、unpkgから利用でき、MITライセンスで公開されており、バグ報告やプルリクエストを受け付けている
CSSでWindows 98 UIを再現する方法
- 98.cssは、Windows 98のように見えるインターフェースを作るためのCSSライブラリ
- プロジェクトはGitHubで確認できる
- アクセシビリティは、別途スクリプトではなくセマンティックHTML構造に依存する
- ボタンには
<button>を使う必要がある - 入力要素には対応する
<label>が必要 - アイコンボタンは
aria-labelで意図を伝える
- ボタンには
- 基本の外観を保ちながら、一部の要素スタイルを上書きできる
- ボタンのパディングを増やしたり、入力ラベルに色を追加したりできる
インストールとフレームワーク統合
- 98.cssは、JavaScriptなしでCSSだけによりHTML要素へWindows 98スタイルを適用する
- フロントエンドフレームワークとは独立して利用できる
- 例として、Reactの使用例と素のJavaScriptの使用例が提供されている
- 最も手早い使い方は、unpkgからスタイルシートを読み込む方法
<link rel="stylesheet" href="https://unpkg.com/98.css">;
- インストールはGitHub releases pageまたはnpmから可能
npm install 98.css
基本フォームコントロール
-
Button
- 標準ボタンは幅75px、高さ23pxで、浮き上がった外側・内側の枠線と、標準の12px水平パディングを持つ
defaultクラスを追加すると、Windows 98でEnterキーにより実行されるデフォルト動作を視覚的に示せる- クリック状態では、浮き上がった枠線が押し込まれた形に変わる
- 無効化されたボタンは同じ浮き上がった枠線を維持するが、ラベルは薄く表示される
- フォーカスは、ボタン内容の内側4px位置にある点線の枠線で示される
-
Checkbox
- チェックボックスは、独立している、または相互排他的でない選択を表す
- 選択時には沈んだパネル内にチェックアイコンが表示され、その横に選択肢を示すラベルが付く
<input type="checkbox">の後に、for属性が入力のidを指す<label>を含める必要があるchecked、disabled属性を使用できる- 複数の入力をまとめる場合は、各入力を
field-rowクラス付きコンテナで囲んで間隔を揃える
-
Option Button
- ラジオボタンは、限られた選択肢の中から1つだけ選ぶコントロール
<input type="radio">として使い、同じname属性を与えるとグループ化される- チェックボックスと同様に、
field-rowで囲むことで入力間の間隔を一貫させられる checked、disabled属性をサポートする
-
Group Box
- グループボックスは、複数のコントロールを整理するための長方形フレーム
fieldsetで要素を囲んで使い、沈んだ外側の枠線と浮き上がった内側の枠線を提供するlegendをfieldset内に入れることでグループラベルを付けられる
テキスト入力、スライダー、ドロップダウン
-
TextBox
- テキストボックスは、ユーザーがテキストを入力または編集するための長方形コントロール
- 単一行入力は
<input type="text">としてレンダリングする - 対応する
<label>と正しいfor属性を用意し、両方をfield-rowコンテナで囲む構成が推奨される field-row-stackedクラスを使うと、ラベルを入力の横ではなく上に配置できる- 複数行入力には
textareaを使う disabled、valueなど標準HTML属性を使える
-
Slider
- スライダーは、調整範囲を示すバーと現在値を示すインジケーターで構成される
<input type="range">としてレンダリングするhas-box-indicatorクラスで、標準インジケーターをボックス型インジケーターに変更できるis-verticalを使うdivで囲むと、縦向きスライダーとして表示される- 縦向きスライダーの長さを変えるには、
inputのwidthとdivのheightを調整する必要がある
-
Dropdown
- ドロップダウンリストボックスは、一覧から1つの項目だけを選べるようにする
- 閉じた状態では現在の値を表示し、ユーザーがリストを開いて値を変更する
selectとoption要素でレンダリングする- デフォルト値は最初のオプションで、特定の
optionにselectedを付けると既定の選択を変更できる
Windows 98スタイルのウィンドウ構成
-
Title Bar
- タイトルバーはウィンドウ上端の内側にあり、ウィンドウの内容を識別する
title-bar、title-bar-text、title-bar-controlsクラスで構成する- 閉じるボタンは
aria-label="Close"を使い、支援技術に意図を伝える Minimize、Maximize、Restore、Helpなどのaria-labelも使用できる- 各
aria-labelには対応するスタイリングクラスがあり、aria-labelのテキストが別言語でもレンダリング・アクセシビリティ・ローカライズ上の問題が起きないようにできる - 最大化ボタンは
disabledで無効化できる inactiveクラスを追加すると、非アクティブなタイトルバーとして表示できる
-
Window contents
windowクラスは、タイトルバーを含むウィンドウコンテナを作成し、浮き上がった外側・内側の枠線とパディングを提供する- コンテナスタイルにwidthを指定して、ウィンドウサイズを自由に調整できる
- タイトルバー下の内容は
window-bodyクラスで描画できる
-
Status Bar
- ステータスバーは通常ウィンドウ下部にあり、現在の状態や文脈情報を表示する
status-barクラスでステータスバーをレンダリングする- 各テキスト要素には
status-bar-fieldクラスを使う - 例には
Press F1 for help、Slide 1、CPU Usage: 14%のようなステータスフィールドが含まれる
リスト、タブ、テーブル、進行表示
-
TreeView
- ツリービューは、オブジェクト集合を論理的な階層関係に従ってインデント付きアウトライン形式で表示する特殊なリストボックス
ul要素にtree-viewクラスを付けてレンダリングする- 子の
li要素には任意のコンテンツを入れられる - ネストした
ulを入れると、点線の枠線とインデントでツリー構造を表現できる - 展開可能なセクションは、子リストを
details要素内に入れて作成できる
-
Tabs
- タブコントロールは、同じウィンドウ内で複数の論理ページや情報セクションを定義するのに使う
menu要素にrole="tablist"を付け、子のli要素にはrole="tab"を付ける- タブ管理はユーザー側のJavaScriptコードで処理する必要がある
- アクティブタブには
aria-selected="true"を追加すればよい - 複数行タブは、
menuタグにmultirowsクラスを追加して作成できる
-
TableView
- テーブルビューは
table要素でレンダリングする - 適切な枠線とoverflowコンテナを提供するには、
sunken-panelクラス付きのdivで囲む - 少しスクリプトを追加すれば、テーブルビューをインタラクティブにできる
interactiveクラスをtableに付けると、本文行のhover時にポインターカーソルを表示する- 行に
highlightedクラスを付けると、選択されたように見える
- テーブルビューは
-
Progress Indicator
- プログレスバーは、長時間の処理の完了率を表示するために使う
- デフォルトはsolidなプログレスバー
segmentedクラスを使うと、分割型のプログレスバーを宣言できるprogress-indicator-barのwidthスタイルで進捗率を表す
フィールド枠線とオープンソース参加
-
Field borders
- テキストボックス、チェックボックス、ドロップダウンリストボックス、スピンボックス、リストボックスはフィールド枠線スタイルを使用する
- ウィンドウ内の作業領域にも同じスタイルを使える
- フィールド枠線は沈んだ外側の枠線と沈んだ内側の枠線を使う
- ほとんどのコントロール内部はbutton highlight色を使う
- テキストボックスやコンボボックスのようなテキストフィールドが読み取り専用または無効状態のときは、内部にbutton face色を使う
- 汎用用途向けに
field-border、field-border-disabled、status-field-borderクラスが提供される - これらのクラスは枠線、背景色、最小限のパディングだけを定義するため、通常は追加パディングを自分で指定する必要がある
-
ライセンスと貢献
- 98.cssはMIT licensedのプロジェクト
- バグの確認と報告にはGitHub issues pageを使う
- プルリクエストを歓迎しており、特にオープンソース参加が初めての人にはコードレビューを提供するとしている
- プロジェクトは、楽しいオープンソース経験を積む場を目指している
1件のコメント
Hacker Newsの意見
3.11、95、2000、XP、CDE、Mac OS 9と、それぞれのデフォルトカラーパレットをすべて含めた似たようなものを作った: https://nielssp.github.io/classic-stylesheets/?theme=win9x&s...
焦点はピクセル単位での完全再現というより、高解像度モニターのような現代の環境でもうまく動作し、見栄えがよい形にすることだった
そのためアイコンとシンボルをすべて SVG で作り直し、XPとMac OS 9を追加したときにShow HNに投稿したが、大きな関心は得られなかった
個人的にはWindows 2000はUIデザインの頂点だった
さらに見たいのはデータテーブルのテーマで、リストやグリッドのように動作するインタラクティブなテーブルまであるとよい
https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
作った本人です。これがまた上がってきてうれしい
これは私のバーンアウト回復プロジェクトで、最近それに関する考えを書き留めた: https://notes.jordanscales.com/98-css-reflections
[0]: https://www.mathsheets.net/
昔のゲームやOSのようなレトロコンピューティングが慰めになり、さらには癒やしにもなり得るという点は興味深い
子どもの頃のGameboyやNintendoのゲームをエミュレーターで遊んだり、Macintosh System 9を動かしたりするときに似た感覚を覚えたし、Pico-8、SerenityOS、TempleOSも思い浮かぶ
ユーザーが完全に理解し制御できるレトロ風のコンピューティング環境という共通点があり、治療ツールとしての安全なサンドボックスのような、より深い心理的ダイナミクスもあるのだろう
最近の技術と社会には敵対的なダークパターンがあまりにも多いので、ユーザーの快適さのために設計された物理的・精神的空間を見つけることは大きな安心になる
Windows 2000とWindows XP向けのものもあるとよい
集めておいたもの:
The Sims https://thesimscss.inbn.dev/
Windows 98 https://jdan.github.io/98.css/
Windows XP https://botoxparty.github.io/XP.css/
Windows 7 https://khang-nd.github.io/7.css/
Edward Tufte https://edwardtufte.github.io/tufte-css/
98.cssは正当な理由で HNクラシック になった
以前の議論:
https://news.ycombinator.com/item?id=33310554 - 2022年10月、コメント179件
https://news.ycombinator.com/item?id=22940564 - 2020年4月、コメント211件
併せて見る価値があるものとして、HyperCard SimulatorとDeckerもある
https://hn.algolia.com/?q=hypercard
90年代後半、MicrosoftにはWindowsデスクトップのテーマや色に合わせられる CSS組み込み色名 があったと記憶している
今でも動作するのかは分からないし、IDEでは全部赤色で表示されるので動作しないように見える
windowtext、appworkspace、menutext、threedlightshadow、threedshadow、threedfaceのような値を使って、ユーザーのデスクトップのルック＆フィールに合ったWeb UIを作ることができた1998年にブラウザベースのイントラネットアプリでそう使っていて、おかげでよりネイティブらしく見えた
https://drafts.csswg.org/css-color/#css-system-colors
以前の色はすべて非推奨扱いになっている:
https://drafts.csswg.org/css-color/#deprecated-system-colors
このスタイルは非標準のDPIとは相性がよくない
たとえばモニターのスケーリングを150%に設定したとき、物理ピクセルに合わせて表示してみるには、ブラウザのコンソールで次のように実行できる:
with(document.documentElement.style){ transform = \scale(${ 1 / devicePixelRatio })`; transformOrigin = 'top left'; }`倍率に整数を掛けるとくっきり拡大された感じになり、100%完璧ではなくても意図されたレンダリングにかなり近く見える
withをこう使っているのは怖くもあり、同時にとても新鮮でもある好きだけど嫌い
crowdwaveでこれを少し使っているように見える: https://www.crowdwave.com
あわせて見るとよさそうなもの: https://botoxparty.github.io/XP.css と https://khang-nd.github.io/7.css
最近はラジオボタングループの選択肢同士の間のように、息をするための空間が必要だというのがほとんど呪文のようになっているが、昔のUIの狭い間隔のほうが率直で、エンドユーザーをより尊重していて、情報密度が高く感じられる
革新をすべて捨てたいわけではないが、古いUIがよく恋しくなる
Windows 7のウィンドウ装飾は好きではなかったが、それ以外はElectronアプリに使っても悪くなさそう
Windows XP UIはすべてのWindows UIの中で最高で、洗練されていると感じられる程度には現代的でありながら、コントラストがあって見やすく、読みやすく、理解しやすかった
Windows 7 UIは派手すぎて可読性より見た目を優先していたし、Windows 98は古すぎて灰色一色で、コントラスト不足もあった
https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
https://world-playground-deceit.net/
こういうものを見ると、最後までやり切ってみたくなる
見た目だけでも、Windows 95とWindows 98でレンダリングされていたMS Sans Serifではないように思える
https://web.archive.org/web/20230603234837/https://vistaserv...
別のコメントでリンクされているXPスタイルシート[1]は、テキストと図形を高解像度で描くことで制約を減らしつつ、UIの雰囲気を維持している
98のようなUIが好きな理由は低解像度ではなく、明確さと単純さにある
[1] https://news.ycombinator.com/item?id=42056921
何年ものUX/UI「研究」と「改善」の末に出てきたものより、こちらのほうがずっと良いと思う
1998年には1歳だったので、古い世代だからというわけでもない
ボタンに見えないボタン、タブに見えないタブ、押してみて初めて編集可能だと分かるテキストフィールドが嫌いなだけ
AppleはMacOSXのためにある程度研究しただろうが、この20年、特にモバイルでは、発見しやすさや一貫性という概念なしに機能がただ放り込まれているように感じた
何より、企業が「一貫したブランディング」や「独自の外観」を欲しがったことが、多くの問題の原因に見える
それにそのWebサイトには、普通のテキストのように偽装した「show code」ボタンもある