フロントエンド

【朗報】Windows 98風デザインになれるCSSライブラリ「98.css」、定期的にバズってしまう

投稿日時: 2026/07/24 07:30

■ 概要・編集部サマリー

【背景・デザイン】Windows 98のグレーなウィンドウ枠、立体ボタン、スクロールバー、ステータスバーを純粋なCSSのみで忠実再現したUIライブラリ「98.css」がWeb上で再注目。【焦点・技術】JavaScript依存ゼロ、画像ファイル使わずCSSの `box-shadow` や `border` の組み合わせのみで、ノスタルジックなグレーUIと高いアクセシビリティを実現している完成度。【評価・議論】ゴテゴテしたモダンフラットデザイン疲れと、90年代デスクトップUIの機能美。

1. 90年代後半のWindowsデスクトップ体験の完全再現

Windows 98特有のグレーのタイトルバー、凹凸のあるベベル境界線、クラシックなスクロールバーをCSSデザインシステムとして構築した。

ノーコード・ノースクリプトで、標準HTMLタグ（`

2. ピュアCSS（No JS）によるアクセシビリティとレトロデザイン

スクリーンリーダー対応やキーボードナビゲーションといった現代のWebアクセシビリティ標準を満たしている。

個人サイトやポートフォリオ、レトロゲームWeb移植プロジェクトのスタイルシートとして、定期的に開発者の間でバズを引き起こしている。

3. WebUIデザインの歴史的価値

懐かしさと実用性を兼ね備えた優れたCSSライブラリであり、フロントエンドのスタイリング技術の表現力を示している。

見ているだけでワクワクするデザインだ。

海外掲示板の反応・まとめ

編集部サマリー:

■ Windows 98風UIライブラリ『98.css』の紹介。JS・画像不要のPure CSS設計とノスタルジーが語られています。

フロントエンドデザイナー:

定期的にバズる『98.css』ホント好きw 画像もJSも一切使わずにCSSの `border` と `box-shadow` だけでWindows 98の灰色の立体ウィンドウ再現してるのエモーショナルすぎる。

90年代PCユーザー:

>>2 タイトルバーのグラデーションとか『閉じる（×）』ボタン凹む挙動が完璧なんだよね。押した瞬間にカチッと凹む立体感が最高。

CSSオタク:

>>3 JS不要でセマンティックなHTML（`

フラットデザイン疲れ:

>>4 現代のWebって『どれが押せるボタンでどれがただのテキストか分からない』無駄なフラットデザイン多すぎるから、98.cssの見た目でボタンって一目で分かる機能美見習ってほしいわ。

個人アプリ開発者:

自分の個人開発ツールの管理画面を98.cssにしたら、海外のRedditでバズってスター1000個増えたからノスタルジーの集客力ヤバい。

XP派ニキ:

同じ作者がXP風の `xp.css` とか7風の `7.css` も作ってるから、好みのレトロUIで遊べるの素晴らしいわ。