2022年2月14日(月)2022年11月12日(土) 投稿者: iwbjp

JavaScriptを使わないコンポーネント！CSSUIの使い方

CSSUIとは
CSSUIの使い方
CSSUI アコーディオン作成方法
CSSUI ドロップダウン作成方法
CSSUI モーダル作成方法
CSSUI タブ作成方法
CSSUI ツールチップ作成方法
CSSUI スライドアウト作成方法
コンポーネントは変数でカスタマイズ

CSSUIとは

などはHTML + CSS + JavaScriptで作成されることが多い。

しかし、CSSUIを使用すればHTML + CSSだけでJavaScriptを使わずに、よく使用されるインタラクティブなコンポーネントを作成することができる。

例えばアコーディオンの場合は以下のHTMLを書いてCSSUIのCSSファイルを読み込むだけで作成可能になる。

HTMLは規定の属性が付いた形で作成する必要がある。

<!-- HTML例 -->
<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/accordion/accordion.css">

<section data-accordion>
  <div data-accordion-item>
    <input type="checkbox" id="panel-1">
    <label for="panel-1" data-accordion-label>
      見出し1
    </label>
    <div data-accordion-panel>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1
    </div>
  </div>
</section>

※ コードを見やすいようlinkタグをhead内に入れてません。

CSSUIの使い方

CSSUIにはCDNは存在しないため、「npm i css-ui-lib」でインストールするか、公式サイトの「Download」ボタンからダウンロードして使用する。

CSSUI アコーディオン作成方法

アコーディオンを作成するには以下のHTMLを作成してcssui.cssとaccordion.cssを読み込む。

アローのsvgアイコンも付いているので開閉状態がわかりやすい。

デフォルトの状態だと角丸部分が削れたような表示になってしまうため、以下のコードのようにborder-radiusを指定して補正したほうが良い。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/accordion/accordion.css">
<style>
[data-accordion-item]:first-child {
  border-radius: 3px 3px 0 0;
}

[data-accordion-item]:last-child {
  border-radius: 0 0 3px 3px;
}
</style>

<section data-accordion>
  <div data-accordion-item>
    <input type="checkbox" id="panel-1">
    <label for="panel-1" data-accordion-label>
      見出し1
      <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1<br>
      サンプルの文章1
    </div>
  </div>
  <div data-accordion-item>
    <input type="checkbox" id="panel-2">
    <label for="panel-2" data-accordion-label>
      見出し2
      <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章2<br>
      サンプルの文章2<br>
      サンプルの文章2<br>
      サンプルの文章2
    </div>
  </div>
  <div data-accordion-item>
    <input type="checkbox" id="panel-3">
    <label for="panel-3" data-accordion-label>
      見出し3
      <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-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </label>
    <div data-accordion-panel>
      サンプルの文章3<br>
      サンプルの文章3<br>
      サンプルの文章3<br>
      サンプルの文章3
    </div>
  </div>
</section>

CSSUI アコーディオンサンプル

CSSUI ドロップダウン作成方法

ドロップダウンを作成するには以下のHTMLを作成してcssui.cssとdropdown.cssを読み込む。

ドロップダウンはselectタグを使用した選択とは異なるので注意。

ドロップダウンはヘッダーにあることが多い。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/dropdown/dropdown.css">

<details data-dropdown>
  <summary>
    次の中から選択してください。
  </summary>
  <ul role="list">
    <li role="listitem"><a href="https://www.google.com/" target="_blank">Google</a></li>
    <li role="listitem"><a href="https://www.amazon.co.jp/" target="_blank">Amazon</a></li>
    <li role="listitem"><a href="https://www.apple.com/jp/" target="_blank">Apple</a></li>
  </ul>
</details>

CSSUI ドロップダウンサンプル

CSSUI モーダル作成方法

モーダルを作成するには以下のHTMLを作成してcssui.cssとdropdown.cssを読み込む。

dropdown.cssに以下のCSSが含まれていないため、普通にdropdown.cssを読み込むだけでは閉じるボタンの位置が右上に表示されないので注意が必要。(2022年2月現在)

/* サンプルのdropdown.cssには以下を自分で追加済み */
[data-modal-close] {
  position: absolute;
  top: var(--modal-spacing);
  right: var(--modal-spacing);
  color: var(--cssui-gray-darkest);
}

<a href="#modal">
  モーダルを開く
</a>

<div id="modal" data-modal>
  <div id="dialog" data-modal-dialog role="dialog" aria-modal="true" aria-labelledby="dialog-title" tabindex="-1">
    <h3 id="dialog-title">モーダルのタイトル</h3>
    <p>ここにテキストや画像などを入れることができます。</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>
  <a href="#" data-modal-overlay></a>
</div>

テキスト量が多い場合は画面からはみ出さないようmax-heightやoverflow: scroll;などの指定が別途必要です。

CSSUI モーダルサンプル

CSSUI タブ作成方法

タブを作成するには以下のHTMLを作成してcssui.cssとtabs.cssを読み込む。

スマートフォンは横幅が狭いので、タブを多く追加するのは避けたほうが良い。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/tabs/tabs.css">

<div data-tabs>
  <input checked="checked" id="tab1" type="radio" name="tab" data-tab="tab1">
  <input id="tab2" type="radio" name="tab" data-tab="tab2">
  <input id="tab3" type="radio" name="tab" data-tab="tab3">
  <nav>
    <label for="tab1" data-tab-label="tab1" role="tab">タブ1</label>
    <label for="tab2" data-tab-label="tab2" role="tab">タブ2</label>
    <label for="tab3" data-tab-label="tab3" role="tab">タブ3</label>
  </nav>
  <section data-tab-panel="tab1" role="tabpanel" aria-labelledby="tab1">
    タブ1の内容を表示しています。
  </section>
  <section data-tab-panel="tab2" role="tabpanel" aria-labelledby="tab1">
    タブ2の内容を表示しています。
  </section>
  <section data-tab-panel="tab3" role="tabpanel" aria-labelledby="tab1">
    タブ3の内容を表示しています。
  </section>
</div>

CSSUI タブサンプル

CSSUI ツールチップ作成方法

ツールチップを作成するには以下のHTMLを作成してcssui.cssとtooltip.cssを読み込む。

ツールチップが画面端にあると画面外にはみ出すので注意。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/tooltip/tooltip.css">

<p>検索結果順位アップのため<a href="javascript:void(0)" data-tooltip title="Search Engine Optimizationの略">SEO</a>を試みる。</p>

<p><a href="javascript:void(0)" data-tooltip title="Search Engine Optimizationの略">SEO</a>が画面端にあるとツールチップが画面外にはみ出すので注意！</p>

※ 元のコードにはaria-label属性などが付いていますが、コードを簡略化するために削除してあります。

CSSUI ツールチップサンプル

CSSUI スライドアウト作成方法

スライドアウトを作成するには以下のHTMLを作成してcssui.cssとslideout.cssを読み込む。

デフォルトだと--slideout-animation: left .2s ease-in-outと動きが早すぎるため、サンプルでは.5sで上書きしました。

あとデフォルトの--slideout-size: 33vw;だとスマートフォンだと幅が狭すぎて実用的ではないため、66vwを上書きしました。

<link rel="stylesheet" href="cssui/cssui.css">
<link rel="stylesheet" href="cssui/slideout/slideout.css">
<style>
[data-slideout-panel] {
  --slideout-animation: left .5s ease-in-out;
}
@media only screen and (max-width: 767px) {
  [data-slideout-panel] {
    --slideout-size: 66vw;
  }
}
</style>

<a href="#slideout" data-slideout-toggle>スライドアウトを表示</a>
<div id="slideout" data-slideout-panel>
  <div data-slideout-header>
    <h3>スライドアウト</h3>
    <a href="#" data-slideout-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>
  <p>画面外の左から右に表示されるのがスライドアウト。</p>
</div>

CSSUI スライドアウトサンプル

コンポーネントは変数でカスタマイズ

コンポーネントの色などを変更する場合は変数でカスタマイズできる。

例えばアコーディオンの場合は以下の変数が存在する。

--accordion-border-color: var(--cssui-gray-lighter);
--accordion-panel-background: #fff;
--accordion-panel-padding: var(--cssui-padding);
--accordion-panel-text-color: var(--cssui-gray-darkest);
--accordion-title-background: #fff;
--accordion-title-spacing: 1rem;
--accordion-title-color: var(--cssui-gray-dark);

各コンポーネントの変数はCSSUIのドキュメントを参照してください。

https://www.cssui.dev/docs/components/accordion/