Counter Strike 1.6 UIベースのCSSライブラリ cs16.css

 (cs16.samke.me)
1 ポイント 投稿者 GN⁺ 2025-01-25 | 1件のコメント | WhatsAppで共有
  • cs16.cssは、Counter Strike 1.6 のゲームUIの雰囲気をHTMLコンポーネントに適用するCSSライブラリで、クラスを付けるだけで素早くレトロスタイルを作成できる
  • インストールは、HTML の head に jsDelivr CDN の cs16.min.css スタイルシートリンクを追加する方式
  • ボタン、入力欄、セレクト、ラジオグループ、スライダー、ダイアログ、ツールチップ、プログレスバー、タブまで、基本的なUI例が幅広く含まれている
  • ダイアログは HTML の <dialog> と showModal() を使い、タブは radio input と label/panel 構造で動作する
  • プロジェクトは MIT License で公開されており、GitHub リポジトリと制作者 Samuel のページがあわせてリンクされている

Counter Strike 1.6スタイルのCSSライブラリ

  • cs16.cssは、Counter Strike 1.6 UI をベースにしたCSSライブラリ
  • プロジェクトページでは GitHub リポジトリと制作者関連リンクを提供している
  • インストールは、HTML の head タグに jsDelivr CDN のスタイルシートを追加すればよい
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ekmas/…;

提供されるUIコンポーネント

  • ボタンと基本フォーム要素

    • cs-btn クラスでボタンスタイルを適用し、disabled 状態の例も含まれている
    • cs-hr クラスで区切り線スタイルを作成できる
    • チェックボックスは cs-checkbox, cs-checkbox__label 構造を使用する
    • 入力欄は cs-input, cs-input__label クラスを使い、通常の入力値と disabled 入力値の例がある
    • セレクトは cs-select, cs-select__label クラスを使用し、例は Volvo, Saab, Opel, Audi のオプションで構成されている

  • 選択UIと値の調整

    • ラジオグループは cs-fieldset の中に radio input と label を配置する方式
    • ラジオの例では Elephant, Monkey, Cheetah, Giraffe の選択肢を使用している
    • スライダーは cs-slider 構造の中に range input を入れて構成する
    • スライダー例には Dark/Light の値と Brightness ラベルが含まれている

  • ダイアログ、ツールチップ、プログレスバー

    • ダイアログは cs-dialog クラスを適用した HTML の <dialog> を使用する
    • ボタンクリック時に document.querySelector('.cs-dialog').showModal(); でダイアログを開く例が含まれている
    • ダイアログ下部のボタンは OK, Cancel, Apply で構成されている
    • ツールチップは cs-tooltip と内部の span.text を使い、Right, Left, Top, Bottom の配置例がある
    • プログレスバーは cs-progress-bar の中に bars 要素を置き、width: 50% で進行状況を表現する

  • タブ構成

    • タブは cs-tabs の中に radio input、label、panel を配置する構造
    • Tab One, Tab Two, Tab Three の例と、各タブのコンテンツが含まれている

ライセンスと制作者

  • ライブラリは MIT License で公開されている
  • 制作者は Samuel と記載されている

関連記事

1件のコメント

 
GN⁺ 2025-01-25
Hacker News の意見

  • コレクションをさらに増やす機会を待っていた
    レトロ CSS テーマにはこういうものがある: https://alexbsoft.github.io/win95.css/ Windows 95、https://botoxparty.github.io/XP.css/ Windows XP、https://cs16.samke.me/ Counter-Strike 1.6、https://edwardtufte.github.io/tufte-css/ Edward Tufte、https://jdan.github.io/98.css/ Windows 98、https://khang-nd.github.io/7.css/ Windows 7、https://micah5.github.io/PSone.css/ PlayStation One、https://nostalgic-css.github.io/NES.css/ NES、https://sakofchit.github.io/system.css/ Apple System、https://thesimscss.inbn.dev/ The Sims

  • 最近、息子が Half-Life 2 をプレイしているのを見ていて、メニューなどがこういうスタイルで、本物のコンピューターシステムの UI のように見えると、ずっとリアルで没入感が増すのだと感じた
    古く見えることはあっても、工業的で本物っぽい感覚があり、それでいて使いやすい。逆に最近の多くのゲームは、花柄の装飾文字のような過度に様式化されたメニューが多く、非現実的で、体験も悪く、操作そのものが作業になってしまう

    • 最近の UI の流れが、平坦にして機能を隠すことで、ユーザー体験の核心である発見可能性を損なうのだとしたら、「古さ」は欠陥ではなく機能だと思う
    • 現代ゲームのメニュー UI の話は始めたくもない
      1年ほど前に PS5 向けの最新 CoD を買ったが、メニューでいったい何が起きているのか分からなかった。探索不可能なごちゃごちゃした構造で、気が狂いそうな感じだったし、単に自分が年を取っただけのようにも思えた
    • ゲームのスタイルやトーンによっては、過度に様式化されたメニューもよく合うことがある
      本当の問題は、最近のゲームに多い、完全にフラットで、一般的で、色もなく、何のスタイルやアイデンティティもない UI だ。たとえば Nintendo はこういうことをかなりやっている
    • Crysis 2 か 3 かのメニューシステムは良かった。本当にナノスーツの中にいる感じを与えてくれた
    • 古い UI はアフォーダンスが良い。UI 要素が操作可能かどうか見て分かるが、「現代的」UI はこの点でかなりひどい

  • すごく良い。去年、ほぼ15年ぶりに CS 1.6 を再インストールして、最近はほぼ毎日10〜15分ずつボット相手にやって頭を空っぽにしている
    もっと楽しむために自分でボットチームも作り、2008年前後のプロチームと対戦するトーナメント全体まで作った。昔作ったマップもものすごく古いハードディスクから見つけ直したのだが、もうすぐ40歳になる今でもそれをプレイすることになるとは思わなかったし、過去の自分に感謝している

    • CS はいつも頭を空っぽにするのに良かった。ランクの5対5ゲームはプレッシャーが大きくて濃密で、30〜45分ほどかかり、必要なだけの人との接触も満たしてくれる。数年前にやめてから、代わりになるものを見つけられていない
    • 2005年に kz_ マップを何時間もやっていた良い思い出がある。ある人たちの腕前は本当に驚くほどだった。午前3時に kz マップに一人でいて、誰かが跳び回る音を聞く感覚が妙に懐かしい
    • 友人たちと LAN やダイヤルアップで de_747 のようなカスタムマップを遊んだ記憶が押し寄せてくる: https://gamebanana.com/mods/82979
      今でもこのマップは、史上最も雰囲気のあるカスタムマップの一つだと思う。Gary Oldman や Harrison Ford のロールプレイができるマップなんて、ほかにどこにあるだろう
    • 自分も CS 1.6 は15〜16年触っていないが、またやってみたら面白そうだ。Mac M1 で実行できるのか、それとも仮想マシンが必要なのか気になる。ボットの設定や構成方法について読める資料もおすすめしてほしい

  • 技術的には Counter-Strike 独自の UI というより、元々の Steam UI ではないのか？

    • その通り。ただし元々 Steam は Counter-Strike のアップデートとチート対策システム、記憶が正しければ VAC を管理するために作られたものだった
      WON ID、今の SteamID が低いと勲章のように見なされていた時代でもあった。低い Slashdot アカウント ID のような感じだ
    • その通り。Steam クライアントは元々、Valve のゲームで使われていた同じ VGUI ライブラリの上に作られていて、当時の HL1/CS などと同じスタイルを使っていた
    • 2000年3月ごろ Half-Life に追加され、その後まもなく Counter-Strike にも入った。Steam が最初にいつ出たのかははっきりしないが、2002年からベータがあったように思う
    • 今でも Steam であまり一般的でないボタンを押したり、珍しいエラーを起こしたりすると、どこかからこのスタイルのウィンドウが飛び出してきそうな感覚が残っている
      Windows 11 でも去年までたまに Windows 3.x 風のダイアログが出てきて、まだ Windows 9x 時代の名残が少し残っているのと似ている

  • https://alpynedreams.github.io/vgui.css/demo_greensteam

    • これも進捗バーに element を使っている

  • VGUI についての追加の読み物: https://developer.valvesoftware.com/wiki/Category:VGUI
    面白い事実として、CS 1.6 では config.cfg やコンソールに setinfo "_vgui_menus" "0" を入れるか、メニューの “Options > Multiplayer > Advanced > Buy menu type > VGUI Menus” から昔の WON UI に戻すことができた

    • その通り。テキストベースのメニューは Half-Life が1998年にリリースされた時に使っていたものだ
      Counter-Strike も1999年には同じテキストベースのメニューを使っていて、2000年になってようやくエンジンが VGUI を含むように更新された。おそらく Counter-Strike は、その方式を好む人たちのために昔のメニューを残していたのだと思う

  • これは CS 1.6 自体というより Steam UI、つまりサーバーブラウザと設定まわりの UI だと思う
    ただ、Steam 統合前にどういう見た目だったかはよく覚えていない

    • CS 1.6 は Steam 専用だった。Steam という考え方が気に入らず、かなり長い間登録を先延ばしにしていたが、結局屈した記憶がある
      今でも6桁の Steam IDを持っているが、当時は何か意味があるようでいて、実際には大した意味はなかった。CS 1.5 以下のサーバーブラウザはアプリケーションメニュー内に組み込まれていて、これは Counter-Strike ではなく実際には Steam UI だ。その頃は、フレンドリストの人たちと打てる囲碁のようなゲームも内蔵されていた
    • これは Source エンジン向けに作られた VGUI2 で、Steam で再利用された後、ゲームが Steam でリリースされる際に GoldSource エンジンへバックポートされた
    • 当時の Steam はほとんど CS 1.6 ランチャーだった

  • ナイフを持つとみんな速く走れる

    • Call of Duty: Black Ops 6 のような現代のゲームでも今なおそうなのは少し笑える。ナイフだけでなく近接武器全般がそうではある
    • 心臓が高鳴る！手が震える！

  • かっこいい。ゲーマーではないけれど、息子がいろいろなゲームをするのを見てきて、このUIが特定のゲームのものだからではなく、すっきりしていて独特なところが良いと思った
    ページで使える、ほかにも個性的なCSSライブラリがあるのか気になる

  • 90年代と2000年代初頭はUIの黄金期だった

    • あの頃はテック企業がコンピュータを一般的な家庭用品にしようとしていた時期で、ユーザーテストを非常に多く行っており、発見可能性が重要になるにつれてユーザー体験も大きく進歩した
      ところが約10年前から、マーケティング用スクリーンショットがより簡単に見えるという理由で、ミニマルでクリーンでフラットで「洗練された」UIを好むようになり、その研究をすべて捨て始めた。選択肢とカスタマイズ性は消え、オプションパネルを開くと誰かが混乱するかもしれないという理由で、AppleとMicrosoftにデスクトップの見た目を決めさせるようになった。macOSのユーザー体験はほぼすべてが嫌いで、Dockもひどいし、奇妙なデフォルトが多すぎる。スクロールバーを隠すこと、ポインター加速、スクロールホイールの反転は機能ではなくバグだ。Windowsは少なくともサードパーティー製ソフトウェアで、タスクバーとスタートメニューをWin2K時代の見た目と感触にできる。現代のユーザー体験で最も大きな不満は、1つのプログラムの複数ウィンドウを1つにまとめ、テキストをなくすことだ。Firefoxのウィンドウが3つ開いているなら、タスクバー項目も3つあるべきで、そうすれば1クリックで目的のウィンドウに移動できる。ウィンドウタイトルに状態を入れて、何かを監視するウィジェットのように使うことも可能になる
    • WebSerialを触るときにXP.cssを使ったが、昔のシリアルモデム設定を思い出して、美学的にはかなり合っていると思う
      https://web-serial-app.netlify.app/
      ソース: https://github.com/tanepiper/web-serial-controller
    • 完全に同意する
      ただ公平に言うと、私は今でもWindows 7をデフォルトのテーマなしUIモードで使っていて、現代のゲームもあまりやっていないので、きちんと比較するのは難しい