98.css: Windows 98風UIを構築するためのCSSライブラリ

98.css 古いUIの忠実な再現を構築するためのデザインシステム。 はじめに 98.cssは、Windows 98のようなインターフェースを構築するためのCSSライブラリです。詳細はGitHubでご覧ください。 私の最初のVB4プログラム Hello, world! OK キャンセル このライブラリは、セマンティックHTMLの使用に依存しています。ボタンを作成するには、<button>を使用する必要があります。入力要素にはラベルが必要です。アイコンボタンはaria-labelに依存します。このページではそのプロセスを案内しますが、アクセシビリティはこのプロジェクトの主要な目標です。 このライブラリが提供する外観を維持しながら、要素の多くのスタイルを上書きできます。ボタンのパディングをもっと増やしたいですか？どうぞ。入力ラベルに色を追加したいですか？ご自由にどうぞ。 このライブラリにはJavaScriptは含まれておらず、HTMLをCSSでスタイリングするだけです。これは、98.cssがお好みのフロントエンドフレームワークと互換性があることを意味します。Reactで使用する98.cssの例や、バニラJavaScriptで使用する例をご覧ください。 98.cssを使用する最も速い方法は、unpkgからインポートすることです。 <link rel="stylesheet" href="https://unpkg.com/98.css" > GitHubのリリースページ、またはnpmから98.cssをインストールできます。 npm install 98.css コンポーネント ボタン コマンドボタン、またはプッシュボタンとも呼ばれるコントロールは、ユーザーがクリックしたときにアプリケーションにアクションを実行させるものです。標準的なボタンは、幅75px、高さ23pxで、外側と内側の境界線が浮き上がっています。デフォルトで水平方向に12pxのパディングが付いています。 Click me <button>Click me</button> <input type="submit" /> <input type="reset" /> ボタンにclass "default" を追加すると、追加のスタイリングが適用されます。これは、Windows 98でEnterキーが押された場合にアクティブウィンドウでデフォルトのアクションが発生することをユーザーに伝えるのに役立ちます。 OK <button class="default">OK</button> ボタンがクリックされると、浮き上がった境界線が沈んだ状態になります。以下のボタンは、押された（アクティブな）状態をシミュレートしています。 I am being pressed <button>I am being pressed</button> 無効化されたボタンは、同じ浮き上がった境界線を維持しますが、ラベルは「色あせた」外観になります。 I cannot be clicked <button disabled>I cannot be clicked</button> ボタンのフォーカスは、ボタンの内容から4px内側に設定された点線で示されます。以下の例は、フォーカスされている状態をシミュレートしています。 I am focused <button>I am focused</button> チェックボックス チェックボックスは、独立した、または排他的でない選択を表します。チェックボックスは、選択されている場合に「チェック」アイコンが埋め込まれた沈んだパネルで表され、その横には選択を示すラベルがあります。 注: チェックボックスの後には、対応する<label>要素を使用し、for属性をinputのidに向けたものを含める必要があります。これにより、支援技術でのチェックボックスの使いやすさが向上するだけでなく、すべての人にとって良いユーザーエクスペリエンス（タブキーでのナビゲーション、ラベル全体をクリックしてボックスを選択できること）が保証されます。 This is a checkbox <input type="checkbox" id="example1"> <label for="example1">This is a checkbox</label> チェックボックスは、標準のcheckedおよびdisabled属性で選択および無効化できます。入力フィールドをグループ化する場合は、各入力をfield-rowクラスを持つコンテナでラップしてください。これにより、入力フィールド間の整合性が保たれます。 I am checked I am inactive I am inactive but still checked <div class="field-row"> <input checked type="checkbox" id="example2"> <label for="example2">I am checked</label> </div> <div class="field-row"> <input disabled type="checkbox" id="example3"> <label for="example3">I am inactive</label> </div> <div class="field-row"> <input checked disabled type="checkbox" id="example4"> <label for="example4">I am inactive but still checked</label> </div> OptionButton オプションボタン、またはラジオボタンとも呼ばれるものは、限られた相互排他的な選択肢の中から単一の選択を表します。つまり、ユーザーは1つのセットのオプションしか選択できません。オプションボタンは、input要素のradioタイプを指定することで使用できます。オプションボタンは、各inputに共通のname属性を指定することでグループ化できます。前述と同様に、入力フィールドをグループ化する場合は、一貫した間隔を確保するために、各入力をfield-rowクラスを持つコンテナでラップしてください。 Yes No <div class="field-row"> <input id="radio5" type="radio" name="first-example"> <label for="radio5">Yes</label> </div> <div class="field-row"> <input id="radio6" type="radio" name="first-example"> <label for="radio6">No</label> </div> オプションボタンは、対応するHTML属性でチェック済みおよび無効化することもできます。 Peanut butter should be smooth I understand why people like crunchy peanut butter Crunchy peanut butter is good <div class="field-row"> <input id="radio7" type="radio" name="second-example"> <label for="radio7">Peanut butter should be smooth</label> </div> <div class="field-row"> <input checked disabled id="radio8" type="radio" name="second-example"> <label for="radio8">I understand why people like crunchy peanut butter</label> </div> <div class="field-row"> <input disabled id="radio9" type="radio" name="second-example"> <label for="radio9">Crunchy peanut butter is good</label> </div> GroupBox グループボックスは、コントロールのセットを整理するために使用できる特別なコントロールです。グループボックスは、オプションのラベルが付いた長方形のフレームで、コントロールのセットを囲みます。グループボックスは、要素をfieldsetタグでラップすることで使用できます。沈んだ外側の境界線と浮き上がった内側の境界線があり、コントロールを囲む彫刻されたボックスのように見えます。 Select one: Diners Drive-Ins Dives <fieldset> <div class="field-row">Select one:</div> <div class="field-row"> <input id="radio10" type="radio" name="fieldset-example"> <label for="radio10">Diners</label> </div> <div class="field-row"> <input id="radio11" type="radio" name="fieldset-example"> <label for="radio11">Drive-Ins</label> </div> <div class="field-row"> <input id="radio12" type="radio" name="fieldset-example"> <label for="radio12">Dives</label> </div> </fieldset> グループにラベルを提供するには、fieldset内にlegend要素を配置します。 Today's mood Claire Saffitz Brad Leone Chris Morocco Carla Lalli Music <fieldset> <legend>Today's mood</legend> <div class="field-row"> <input id="radio13" type="radio" name="fieldset-example2"> <label for="radio13">Claire Saffitz</label> </div> <div class="field-row"> <input id="radio14" type="radio" name="fieldset-example2"> <label for="radio14">Brad Leone</label> </div> <div class="field-row"> <input id="radio15" type="radio" name="fieldset-example2"> <label for="radio15">Chris Morocco</label> </div> <div class="field-row"> <input id="radio16" type="radio" name="fieldset-example2"> <label for="radio16">Carla Lalli Music</label> </div> </fieldset> TextBox テキストボックス（編集コントロールとも呼ばれる）は、ユーザーがテキストを入力または編集する長方形のコントロールです。単一行または複数行のテキストをサポートするように定義できます。テキストボックスは、input要素にtextタイプを指定することでレンダリングできます。チェックボックスやラジオボタンと同様に、適切に設定されたfor属性を持つ対応するラベルを提供し、両方をfield-rowクラスを持つコンテナでラップする必要があります。 Occupation <div class="field-row"> <label for="text17">Occupation</label> <input id="text17" type="text" /> </div> さらに、field-row-stackedクラスを使用して、ラベルを入力フィールドの横ではなく上に配置できます。 Address (Line 1) Address (Line 2) <div class="field-row-stacked" style="width: 200px"> <label for="text18">Address (Line 1)</label> <input id="text18" type="text" /> </div> <div class="field-row-stacked" style="width: 200px"> <label for="text19">Address (Line 2)</label> <input id="text19" type="text" /> </div> ユーザーの入力で複数行をサポートするには、代わりにtextarea要素を使用します。 Additional notes <div class="field-row-stacked" style="width: 200px"> <label for="text20">Additional notes</label> <textarea id="text20" rows="8"></textarea>