ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS
Post on:2023年4月10日
sponsors
ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装できるフレームワークを紹介します。
Ellegant CSS
Ellegant CSS -GitHub
Ellegant CSSの特徴
Ellegant CSSは、JavaScriptをほとんどあるいはまったく使用せずに、ユーザーインタラクションを提供することを目的としてCSSのフレームワークです。inputとlabelを使用してインタラクションのトリガーにし、ローエンドのデバイスでも高速でクリーンなユーザーエクスペリエンスを提供します。
インタラクションを伴うUIをCSSで実装
- トリガーの多くはJavaScriptで実装されますが、Ellegant CSSではCSSのセレクタに置き換えてその機能を実装しています。
inputとlabelを使用することで、+や~などのセレクタを利用して正しいinput:checkedの後の要素をターゲットにできます。- JavaScriptは、ARIAロールが必要な場合にのみ使用しています。
- ローエンドのスマホで実行した場合でも、ページは高速でクリーンな状態です。
Ellegant CSSで実装されたコンポーネント
Ellegant CSSには、一般的なコンポーネントと単一のコンポーネントの2つのカテゴリがあります。まずは単一のコンポーネント、通常はJavaScriptが必要だと思いますが、JavaScriptの部分はARIAロールが必要な場合にのみ使用します。
Sample -Ellegant CSS
ハンバーガーメニューは、スマホ向けのWebサイトやアプリで使用される一般的なナビゲーションのデザインパターンです。ユーザーがハンバーガーのアイコンをタップすると、スクリーンの左あるいは右側からメニューパネルがスライドして表示されます。
ハンバーガーメニュー
HTMLは、デモ下部の「View Sample Code」をクリックすると表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<label class="elle-label style-elle-btn" for="myMenu" role="button" aria-pressed="false">Open ►</label> <input class="elle-checkbox" type="checkbox" id="myMenu"> <nav class="elle-menu"> <label class="elle-label elle-shadow" for="myMenu" role="button" aria-pressed="false"></label> <ul> <li class="elle-x"> <label class="elle-label" for="myMenu" role="button" aria-pressed="false">x</label> </li> <li class="text">This isn't a link</li> <li><a href="/">This is a link</a></li> <li> <label class="elle-label" for="myMenu" role="button" aria-pressed="false"> <a onclick="this.parentElement.click();" href="#">Anchor link</a> </label> </li> </ul> </nav> |
モーダルは、現在のウインドウ上に表示される要素で、操作を続行するにはユーザーがそれを操作する必要があります。ターゲットとなる要素にはその前にチェックボックスが必要ですが、ラベルはどこにでも配置できます。
モーダル
モーダルのHTMLは、下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<label class="elle-label style-elle-btn" for="myModal" role="button" aria-pressed="false">Show</label> <input type="checkbox" class="elle-checkbox" id="myModal"> <dialog open="" class="elle-modal"> <section class="elle-animated-top"> <header> <h5>Warning</h5> <label class="elle-label" for="myModal" role="button" aria-pressed="false">×</label> </header> <main> <h3>Hey, you!</h3> <p>Some surprises are more unexpected than others, which doesn't mean you shouldn't pay attention to them all. This Modal's neither that big nor too small.</p> <p>It is important to note that the <i class="c">section</i> part of a Modal can also include <i class="c">.elle-animated-*</i> and be <i class="c">.elle-big</i> or <i class="c">.elle-small</i></p> </main> <footer> <label class="elle-label style-elle-btn" for="myModal" role="button" aria-pressed="false">I got it</label> </footer> </section> </dialog> |
一般的なコンポーネントには、さまざまな目的に適用できる方法でユーザーの操作に反応します。トグルやスイッチなどもinputとlabelが使用されています。
Sample -Ellegant CSS
Ellegant CSSの使い方
Ellegant CSSを使用するには、外部CSSファイルを記述するだけです。
|
1 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.min.css"> |
オプションのJavaScriptファイルもCDNで利用できます。
|
1 |
<script src="https://cdn.jsdelivr.net/gh/ellegantcss/ellegant@1.1.2/ellegant.js"></script> |
詳しくは、下記をご覧ください。
How to use -Ellegant CSS
sponsors
