概要

98.css は、Windows 98風の UI を再現できる CSSライブラリ。 アクセシビリティ と セマンティックHTML の重視。 JavaScript不要 で、どんなフロントエンドフレームワークにも対応。 カスタマイズ が簡単で、外観を保ちながらスタイル調整が可能。 インストール方法 や 主要コンポーネント の使い方を解説。

98.css：Windows 98風UIデザインシステム

• 98.css は、Windows 98の クラシックなUI を再現するための CSSライブラリ。
• GitHub で公開されており、 unpkg や npm から簡単に導入可能。
• JavaScriptを含まず、HTML要素にCSSのみを適用。
• React や Vanilla JavaScript など、主要なフロントエンドフレームワークと互換性。
• セマンティックHTML の利用が推奨され、アクセシビリティを重視。

導入方法

• 最速導入は unpkg からのインポート。
  • 例：<link rel="stylesheet" href="https://unpkg.com/98.css">
• npm でのインストールも可能。
  • コマンド：npm install 98.css
• GitHubリリースページ からのダウンロードも対応。

基本方針・カスタマイズ

• ボタン や 入力フィールド など、HTML要素の外観を98風に変換。
• padding や 色 などのスタイルは、外観を保ったまま自由に上書き可能。
• アクセシビリティ のため、ラベルやaria属性の適切な付与が必須。

主要コンポーネントの使い方

ボタン（Button）

• <button>、 <input type="submit">、 <input type="reset"> で利用。
• デフォルトで 75px×23px、12pxの横padding、立体的なボーダー。
• defaultクラス で「Enterキーで実行されるデフォルトアクション」表現。
• クリック時はボーダーが沈み込み、 disabled はラベルが淡色化。
• フォーカス時 は点線の内側ボーダーで強調。

チェックボックス（Checkbox）

• <input type="checkbox"> と <label> をセットで使用。
• ラベルの for属性 とinputの id を必ず対応させる。
• checked / disabled 属性で状態を制御。
• field-rowクラス で複数の入力要素を一列に整列。

ラジオボタン（OptionButton）

• <input type="radio"> と <label> をセットで使用。
• name属性 を共通にしてグループ化、1つのみ選択可能。
• checked / disabled 属性で状態管理。
• field-rowクラス で整列。

グループボックス（GroupBox）

• <fieldset> で囲み、 legend でラベルを追加可能。
• field-rowクラス で内部の要素を整列。

テキストボックス（TextBox）

• <input type="text"> や <textarea> で利用。
• <label> とセット、 for属性 で対応。
• field-row や field-row-stackedクラス で横並び・縦並びを選択。
• disabled や value属性 で状態・デフォルト値を設定。

スライダー（Slider）

• <input type="range"> で実装、 min/max/value で範囲指定。
• has-box-indicatorクラス でインジケーターを四角形に変更可能。
• is-verticalクラス で縦型スライダーも実現。

ドロップダウン（Dropdown）

• <select> と <option> で実装。
• selected属性 で初期選択項目を指定。

ウィンドウ（Window）

• title-bar、 title-bar-text、 title-bar-controls の3クラスでタイトルバーを構成。
• aria-label でボタンの役割（Close/Minimize/Maximize/Restore/Help）を明示。
• ボタンのスタイリングクラスで多言語対応・アクセシビリティ確保。

アクセシビリティとセマンティックHTMLの推奨

• 全てのインタラクティブ要素 に ラベル や aria属性 を付与。
• 補助技術 との互換性を重視。
• キーボード操作 や ラベルクリック での操作性向上。

カスタマイズ性と拡張性

• padding や 色 など、個別要素のカスタマイズが容易。
• CSSのみ で完結しているため、導入・拡張がシンプル。
• 他のCSSフレームワーク との併用も可能。

---

98.css は、レトロなWindows 98風UIを現代のWebアプリで手軽に再現したい開発者に最適なツール。 アクセシブルでセマンティックなHTMLを推奨しつつ、カスタマイズ性も高いデザインシステム。