博士

やっほー、ロボ子！今日のニュースは、Windows 7風のUIをCSSだけで再現できるフレームワーク「7.css」じゃ！

ロボ子

博士、こんにちは！Windows 7風UIですか、懐かしいですね。CSSだけで再現できるのはすごいですね。

博士

そうじゃろ？GUIバックボーン上に構築されてて、XP.cssとか98.cssを拡張してるらしいぞ。セマンティックHTMLに依存してて、JavaScriptは使わないらしい。

ロボ子

セマンティックHTMLですか。`<button>`要素や`role="tab"`属性などを活用しているんですね。CSSだけでどこまでできるのか、興味深いです。

博士

しかも、カスタマイズもできるらしいぞ！スタイルを上書きできるって書いてある。

ロボ子

unpkgやnpmでインストールできるんですね。`npm install 7.css`でインストールして、`import "7.css/dist/7.css";`でインポートするんですね。

博士

スコープも設定できるみたいじゃな。`7.scoped.css`を使えば、スタイルを`.win7`クラス内に限定できるらしいぞ。

ロボ子

Tree-shakingにも対応しているんですね。個別のコンポーネントをインポートできるのは便利ですね。例えば、`import "7.css/dist/gui/buttons.css"`でボタンだけインポートできるんですね。

博士

コンポーネントも色々あるみたいじゃ。Balloonは`role="tooltip"`属性でツールチップを作成できるし、CheckBoxは`<label>`要素と`for`属性が必須らしい。

ロボ子

Collapseは`<details>`と`<summary>`要素を使うんですね。`open`属性でデフォルト展開できるのは便利ですね。

博士

Comboboxは`input`、`button`、`ul`、`li`要素を組み合わせて、`role`属性と`aria-owns`属性でアクセシビリティを確保してるらしいぞ。

ロボ子

GroupBoxは`<fieldset>`タグで要素を囲んで、`<legend>`要素でラベル付けするんですね。ListBoxは`<select multiple>`要素か`ul`/`li`要素を使うんですね。

博士

ListView (table)は`<table>`要素をスタイリングして、`has-shadow`クラスで影を追加できるみたいじゃ。`up`クラスでソート順を示すこともできるらしい。

ロボ子

NavigationはMenuとMenuBarがあるんですね。`role="menu"`や`role="menuitem"`属性を使うんですね。`aria-haspopup="true"`でサブメニューを表示できるんですね。

博士

ProgressBarは`role="progressbar"`属性を使って、`paused`、`error`、`animate`クラスで状態を表現するみたいじゃ。`marquee`クラスで不定状態表示もできるらしいぞ。

ロボ子

Sliderは`type="range"`属性を使うんですね。`has-box-indicator`クラスでボックス型インジケータを表示できるんですね。縦型表示もできるんですね。

博士

Tabsは`role="tablist"`、`role="tab"`、`role="tabpanel"`属性を使うみたいじゃ。`justified`クラスで均等配置もできるらしい。

ロボ子

WindowはTitle Bar、Window body、Status Barがあるんですね。`glass`クラスでガラス風フレームにできるんですね。Dialog BoxはURLフラグメントと`id`属性でトリガーするんですね。

博士

MITライセンスで、XP.cssを元に開発されたみたいじゃな。GitHubでIssue報告やスター付けを推奨してるらしいぞ。

ロボ子

Windows 7風のUIを再現したい人には、とても便利なフレームワークですね。私も試してみようかしら。

博士

そうじゃな！ちなみに、このフレームワークで作ったサイトを公開したら、みんなに「懐かしい！」って言われること間違いなしじゃ！まるでタイムマシンに乗ったみたいじゃな！

ロボ子

確かにそうですね！でも、もしかしたら「これ、本当にWindows 7？」って聞かれるかもしれませんね。画面が綺麗すぎて。

博士

あはは！それもそうじゃな！まあ、それもご愛嬌じゃ！