98.css – 古いユーザーインターフェースを忠実に再現するデザインシステム

 (jdan.github.io)
3 ポイント 投稿者 GN⁺ 2024-11-07 | 1件のコメント | WhatsAppで共有

  • Intro

    • 98.css は、Windows 98 スタイルのインターフェースを構築するための CSS ライブラリ。
    • このライブラリはアクセシビリティを主要な目標とし、HTML のセマンティックな使用を推奨している。
    • JavaScript なしで HTML をスタイリングし、さまざまなフロントエンドフレームワークと互換性がある。

  • Components

    • Button
      • コマンドボタンは、ユーザーがクリックしたときにアプリケーションが特定の操作を実行するようにするコントロール。
      • デフォルトで幅 75px、高さ 23px を持ち、クリック時には境界線が押し込まれた状態に変わる。
    • Checkbox
      • チェックボックスは、独立した選択または非排他的な選択を表す。
      • チェックボックスとラベルを一緒に使用して、アクセシビリティを高める。
    • OptionButton
      • オプションボタンは、限られた選択肢の中から 1 つを選べるラジオボタン。
      • 同じグループのオプションボタンは、同一の name 属性を共有してグループ化する。
    • GroupBox
      • グループボックスは、コントロールのセットを整理するために使われる長方形のフレーム。
      • fieldset タグを使って実装し、ラベルを追加できる。
    • TextBox
      • テキストボックスは、ユーザーがテキストを入力または編集できる長方形のコントロール。
      • 複数行をサポートするには textarea 要素を使う。
    • Slider
      • スライダーは、調整範囲を定義するバーと現在の値を示すインジケーターで構成される。
      • 垂直スライダーを作るには is-vertical クラスを使う。
    • Dropdown
      • ドロップダウンリストボックスは、一覧から単一の項目を選択できるようにする。
      • select と option 要素を使って実装する。

  • Window

    • Title Bar
      • タイトルバーはウィンドウの上端に位置し、ウィンドウの内容を識別する。
      • title-bar、title-bar-text、title-bar-controls クラスを使って実装する。
    • Window contents
      • ウィンドウの境界を定義する window クラスを使ってウィンドウを構成する。
      • window-body クラスを使ってウィンドウの内容を描画する。
    • Status Bar
      • ステータスバーはウィンドウの下部に位置し、現在の状態やその他の情報を表示する。
      • status-bar クラスを使って実装する。
    • TreeView
      • ツリービューコントロールは、オブジェクトを階層関係に応じてインデントされたアウトラインとして表示する。
      • ul 要素と tree-view クラスを使って実装する。
    • Tabs
      • タブコントロールは、ファイルキャビネットやノートブックの仕切りに似ている。
      • menu 要素と [role=tablist] 属性を使って実装する。
    • TableView
      • テーブルビューは table 要素を使ってレンダリングする。
      • sunken-panel クラスで境界線とオーバーフロー用コンテナを提供する。

  • Issues, Contributing, etc.

    • 98.css は MIT ライセンスに従う。
    • GitHub の Issues ページでバグを報告したり、新しい不具合を投稿したりできる。
    • オープンソースへの貢献を歓迎しており、コードレビューも提供している。

関連記事

1件のコメント

 
GN⁺ 2024-11-07
Hacker Newsのコメント

  • あるユーザーは、さまざまなOSの標準カラーテーマを含むプロジェクトを作成し、現代のシステムでもうまく動作し美しく見えるように、アイコンやシンボルをSVGで再構築していた

    • このプロジェクトをShow HNに投稿したが、大きな注目は集められなかった
    • プロジェクト名にあまり魅力がない可能性があると考えている

  • 別のユーザーは、このプロジェクトがバーンアウトからの回復プロジェクトであり、最近それについての考えを書き残していた

  • さまざまなOSに関連するCSSスタイルを収集しているユーザーがいる

    • The Sims、Windows 98、Windows XP、Windows 7、Edward Tufteスタイルを含む

  • 98.cssはHacker Newsで古典的存在と見なされており、何度も議論されてきた

    • HyperCard SimulatorとDeckerも参考になる

  • ネイティブではないDPI設定ではスタイルがうまく動作しない可能性があり、ブラウザーのコンソールで特定のコードを実行して物理ピクセルに合わせることができる

  • あるユーザーは、Windows 95とWindows 98ではMS Sans Serifではないようだと述べている

  • 別のユーザーは、botoxparty.github.io/XP.css と khang-nd.github.io/7.css は確認する価値があると述べている

  • 90年代後半、MicrosoftはWindowsデスクトップのテーマや色に合わせたCSSカラーを提供しており、それによってWeb UIをユーザーのデスクトップに一致させることができた

  • あるユーザーは、現在のUX/UIの研究や改善よりも過去のスタイルのほうが優れていると主張している

    • ボタン、タブ、テキストフィールドが明確に見えることを好んでいる

  • Obsidianテーマを98.cssのソースを使って作成したが、現在は中止された状態になっている