ソフトウェア

Windows 98のデザインをウェブサイトに適用できるCSS「98.css」、ウェブ上でOSを再現する猛者も


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」に比べると動作するソフトウェアは少ないですが、メモ帳に文字を入力することは可能でした。

この記事のタイトルとURLをコピーする

・関連記事
あのWindows98がブラウザで動かせる「Windows 98 - Virtual x86」 - GIGAZINE

Windows 98マシンは2017年現在でもまだ現役で使うことはできるのか? - GIGAZINE

MS-DOS 6.22からWindows 8 Proまで順にアップグレードしていくとどうなるのか? - GIGAZINE

20年経っても色あせないWindows 98のアイコンを無料でダウンロード可能な「Windows 98 Icon Viewer」 - GIGAZINE

Windows 98が動くスマートウォッチをRaspberry Piで作成した猛者が登場 - GIGAZINE

Windows 10に至るまで「スタートメニュー」はどのように進化してきたのか? - GIGAZINE

in ソフトウェア, Posted by log1n_yi

You can read the machine translated English article here.