Microsoftが1998年に発売した「Windows 98」のデザインをウェブサイトで利用できるCSS「98.css」をエンジニアのJordan Scales氏が開発し、GitHub上で公開しています。

98.css - A design system for building faithful recreations of old UIs

https://jdan.github.io/98.css/



98.cssを使うと、ウェブサイトにWindows 98ライクなデザインを適用することができます。ボタンのデザインはこんな感じ。



チェックボックスや……



ラジオボタン。



ウィンドウの要素もあります。



98.cssを手軽に利用するには、HTMLのlinkタグを用いて98.cssをインポートします。試しに98.cssをインポートしたHTMLを記述してみます。

<!DOCTYPE html>
<html>
<head>
<title>98.css テスト</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://unpkg.com/98.css" />
</head>
<body>
<div class="window" style="margin: 32px; width: 200px">
<div class="title-bar">
<div class="title-bar-text">98.css 使ってみた</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="window-body">
<p>こんにちは！　今日の気分は？</p>
<div class="field-row">
<input id="radio1" type="radio" name="option-1">
<label for="radio1">最高！</label>
</div>
<div class="field-row">
<input id="radio2" type="radio" name="option-2">
<label for="radio2">ふつう</label>
</div>
<div class="field-row">
<input id="radio3" type="radio" name="option-3">
<label for="radio3">悪い</label>
</div>
</div>
</div>
</body>
</html>


記述したHTMLをウェブブラウザ上で表示するとこんな感じ。



JavaScriptライブラリのReactを使ったコードサンプルも公開されています。

objective-chandrasekhar-t5t6h - CodeSandbox

https://codesandbox.io/s/objective-chandrasekhar-t5t6h?file=/src/index.js



この98.cssを使って、フロントエンドエンジニアのPadraig氏がウェブブラウザでWindows 98を再現しており、下記URLにアクセスすると実際に試すことができます。

Windows 98 -- Packard Belle

https://packard-belle.netlify.app/

ウェブサイトにアクセスすると、BIOSのブート画面を模した表示が出現。当時のパッカードベルのPCを忠実に再現しているようです。



しばらくするとWindows 98が起動。



デスクトップが表示されました。画像では確認できませんが、なんとブラウン管画面のちらつきまで再現されています。



フォントもWindows 98のものが使われているとのこと。



「Windows 98 - Virtual x86」に比べると動作するソフトウェアは少ないですが、メモ帳に文字を入力することは可能でした。