JavaScriptはなし、CSSで実装されたWebページでよく使用されるUIコンポーネントの超軽量ライブラリ -CSSUI

サイト構築 -CSS

Post on:2022年2月14日

CSSUIの特徴

CSSUIはJavaScriptを使用しない、ピュアCSSで実装されたインタラクティブなUIコンポーネント集です。

CSSUI

MITライセンスで、商用プロジェクトでも無料で利用できます。

ピュアCSSで実装されたコンポーネント: JavaScriptを読み込む必要がないため、コンポーネントの待機時間はありません。
カスタマイズが簡単: スタイルの追加は簡単です。デフォルトのCSS変数をオーバーライドするか、クラスを使用してコンポーネントをカスタマイズできます。
スタンダードなHTML: 各コンポーネントは、モダンなHTML要素で構築されています。
ビギナーでもプロでも簡単: 簡単なプロトタイプから実稼働のWebサイトまで、CSSUIはビギナーだけでなくプロのデベロッパーにも最適です。
CSSは超軽量: わずか9kBで、超軽量です。
サポートブラウザ: すべてのモダンブラウザで正常に動作します。Edge 79+, Firefox 49+, Chrome 12+, Safari 10+

CSSUIのデモ

CSSUIで実装されたUIコンポーネントは、デモページで楽しめます。

まずは、アコーディオン。各アイテムをクリックすると、展開・折り畳みます。

Accordion

ドロップダウンは、各アイテムを表示する切り替え可能なコンテキストのオーバーレイです。ホバーではなく、クリックで切り替えられます。

Dropdown

モーダルダイアログは、メインコンテンツの上にオーバーレイで表示します。

Modal

スライドアウトは、メインコンテンツの横からパネルをスライドして表示します。

Slideout

タブは、水平方向のナビゲーションとシンプルでクリーンなスタイルで実装されています。

Tabs

ツールチップは、要素をホバー・フォーカスすると有益な情報を表示します。

Tooltips

CSSUIの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。「cssui.css」は共通で使用し、各UIコンポーネント用のCSSファイルを記述します。

<!-- 共通 -->
<link rel="stylesheet" href="/vendor/cssui.css">

<!-- アコーディオン用 -->
<link rel="stylesheet" href="/vendor/cssui/accordion.css">

<!-- モーダル用 -->
<link rel="stylesheet" href="/vendor/cssui/modal.css">

cssui.cssには、box-sizing: border-box;と共通で使用するカラーやフォントが定義されています。

Step 2: HTML

ModalのHTMLです。ラッパーにidとdata-modal属性を与え、モーダル内のコンテンツは自由に編集できます。

<div id="modal" data-modal>

  <!-- Modal  -->
  <div id="dialog" data-modal-dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1">
    <h3 id="dialog-title">Modal title</h3>
    <p>This is the modal content.</p>
    <a href="#" data-modal-close>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </a>
  </div>

  <!-- Background, click to close -->
  <a href="#" data-modal-overlay></a>
</div>

<h3 id="dialog-title">Modal title</h3>

<p>This is the modal content.</p>

</a>

</div>

</div>

Step 3: CSSのカスタマイズ

モーダルに使用されている変数のリストです。これらのスタイルを変更またはオーバーライドして、コンポーネントのデザインをカスタマイズできます。

  --modal-background: rgb(255, 255, 255);
  --modal-level: 9999;
  --modal-max-size: 500px;
  --modal-overlay-background: rgba(0, 0, 0, .2);
  --modal-radius: 8px;
  --modal-size: 80%;
  --modal-spacing: 1rem;