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>
すると次のように表示されます。
▲Windows 98風のウィンドウ、ボタンが表示される事がわかります。
98.css公式サイトにはその他のコンポーネントの使用例が掲載されています。
▲ボタンコンポーネントです。押し込んだ状態や無効状態も表現可能です。
▲チェックボックスです。
▲タイトルバーです。
▲ツリービューです。
他にもさまざまなWindows 98風コンポーネントが使用可能です。
まとめ
98.cssはWindows 98風の見た目を再現するCSSライブラリです。当時を知る方も、知らなくて逆に新鮮に感じる方も試してみてはいかがでしょうか。
