98.css - Windows 98風の見た目を再現するCSSライブラリ

S 20200423 113826

Microsoftが1998年に発売したPC用のオペレーティングシステム「Windows 98」。

Windows 95のアップデート版として人気を集めたOSで、当時の流行だった立体的なUIが特長となっています。
本日紹介する「98.css」はそのWindows 98風のUIをWebページで構築することができるオープンソースのCSSライブラリです。

開発者Jordan Scales氏によって作成されMITライセンスの元配布されています。

以下使用方法を説明します。

98.cssの使用方法

98.cssはCDNサービスを使用し、ローカルにダウンロードする事なく使うことができます(ダウンロードして使うこともできます。その方法は公式サイトでご確認ください。)。

例えば以下のようなソースコードを記述します。

<!DOCTYPE html>
<html>
  <head>
    <title>98.css example</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="https://unpkg.com/98.css" />
  </head>

  <body>
    <div class="window" style="margin: 32px; width: 250px">
      <div class="title-bar">
        <div class="title-bar-text">
          My First VB4 Program
        </div>
      </div>
      <div class="window-body">
        <p>Hello, world!</p>
        <p>ハローワールド</p>
        <button>OK</button>
        <button>Cancel</button>
      </div>
    </div>
  </body>
</html>

すると次のように表示されます。

S 20200423 114142

▲Windows 98風のウィンドウ、ボタンが表示される事がわかります。

98.css公式サイトにはその他のコンポーネントの使用例が掲載されています。

S 20200423 113904

▲ボタンコンポーネントです。押し込んだ状態や無効状態も表現可能です。

S 20200423 114008

▲チェックボックスです。

S 20200423 114042

▲タイトルバーです。

S 20200423 114115

▲ツリービューです。

他にもさまざまなWindows 98風コンポーネントが使用可能です。

まとめ

98.cssはWindows 98風の見た目を再現するCSSライブラリです。当時を知る方も、知らなくて逆に新鮮に感じる方も試してみてはいかがでしょうか。