98.css

概要

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）

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

チェックボックス（Checkbox）

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

ラジオボタン（OptionButton）

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

グループボックス（GroupBox）

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

テキストボックス（TextBox）

• や