こんにちは！今回は、**98.css** を使って、レトロなWindows 98風のウィンドウを作成する方法をご紹介します。98.cssは、Windows 98風のUIを簡単にウェブに再現できるCSSライブラリです。
～実装方法～
まずは、以下のコードをHTMLファイルに追加してみましょう。これで、Windows 98風のウィンドウを表示できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>98.css Window Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/98.css@0.1.20/dist/98.min.css">
<style>
body {
background-color: #008085; /* 背景色を#008085に変更 */
}
</style>
</head>
<body>
<div class="window" style="width: 300px">
<div class="title-bar">
<div class="title-bar-text">ようこそ</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>There's so much room for activities!</p> <!-- ウィンドウの中身 -->
</div>
</div>
</body>
</html>
以上です。
- 前ページ
- 次ページ