JavaScriptは無し、CSSで実装されたUIコンポーネントのまとめ -Pure CSS Components

サイト構築 -CSS

Post on:2019年7月3日

Pure CSS Componentsの特徴

Pure CSS ComponentsはWebページで使用される一般的なUIコンポーネントをCSSで実装したものです。JavaScriptは一切使用されていません。
MITライセンスで、個人でも商用でも無料で利用できます。

Pure CSS Components -GitHub

UIコンポーネントには、以下のものがあります。

カルーセル
折り畳み
ドロップダウン
モーダル
タブ
ツールチップ

HTMLはシンプル、CSSの装飾も最小限なので、カスタマイズしやすいと思います。

サポートブラウザは、下記の通り。IEは9+で動作します。

※Safariでも確認してみましたが、すべて期待通りに動作しました。

CSSで実装するカルーセル

3つのアイテムを表示するカルーセル、左右の矢印と下部のボタンで操作します。新しいアイテムを追加するには、CSSを変更する必要があります。

CSSで実装するカルーセル
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Carousel -->
<div class="carousel">
  <div class="carousel-inner">
    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked>
    <div class="carousel-item">
      ...
    </div>
    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden>
    <div class="carousel-item">
      ...
    </div>
    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden>
    <div class="carousel-item">
      ...
    </div>
    <label for="carousel-3" class="carousel-control prev control-1">‹</label>
    <label for="carousel-2" class="carousel-control next control-1">›</label>
    <label for="carousel-1" class="carousel-control prev control-2">‹</label>
    <label for="carousel-3" class="carousel-control next control-2">›</label>
    <label for="carousel-2" class="carousel-control prev control-3">‹</label>
    <label for="carousel-1" class="carousel-control next control-3">›</label>
    <ol class="carousel-indicators">
      <li><label for="carousel-1" class="carousel-bullet">•</label></li>
      <li><label for="carousel-2" class="carousel-bullet">•</label></li>
      <li><label for="carousel-3" class="carousel-bullet">•</label></li>
    </ol>
  </div>
</div>

...

</div>

...

</div>

...

</div>

</ol>

</div>

CSSで実装する折り畳み

折り畳みコンポーネントは、2つの方法で使用できます。
まずは、クリックされたアイテムを開く方法。これは複数が動じに開きます。

CSSで実装する折り畳み
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Collapse -->
<div class="collapse">
  <label class="collapse-btn" for="collapse-1">Lorem ipsum dolor sit amet</label>
  <input class="collapse-open" type="checkbox" id="collapse-1" aria-hidden="true" hidden />
  <div class="collapse-content">
    <div class="collapse-inner">
      ...
    </div>
  </div>
</div>

<label class="collapse-btn" for="collapse-1">Lorem ipsum dolor sit amet</label>

...

</div>

もう1つの方法は、最後にクリックされたアイテムだけを開く方法。開いたままのアコーディオンのような感じです。

CSSで実装する折り畳み
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Collapse -->
<div class="collapse">
  <label class="collapse-open" for="accordion-1">Lorem ipsum dolor sit amet</label>
  <input class="collapse-open" type="radio" id="accordion-1" name="accordion" aria-hidden="true" hidden checked />
  <div class="collapse-content">
    <div class="collapse-inner">
      ...
    </div>
  </div>
</div>

<label class="collapse-open" for="accordion-1">Lorem ipsum dolor sit amet</label>

...

</div>

CSSで実装するドロップダウン

ドロップダウンは、クリックまたはホバーの2つの方法で使用できます。下記はクリックです。

CSSで実装するドロップダウン
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Dropdown -->
<div class="dropdown">
  <label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>
  <input class="dropdown-open" type="checkbox" id="dropdown-1" aria-hidden="true" hidden />
  <label for="dropdown-1" class="dropdown-overlay"></label>
  <div class="dropdown-inner">
    ...
  </div>
</div>

<label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>

...

</div>

CSSで実装するモーダル

モーダルは<input hidden>を使ったテクニックで機能しています。閉じる時はボタンをクリックするだけでなく、背景をクリックしてもモーダルが閉じます。

CSSで実装するモーダル
※CSSは上記ページの「Download」からダウンロードできます。

<label class="btn" for="modal-one">Example</label>

<!-- Modal One -->
<div class="modal">
  <input class="modal-open" id="modal-one" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
    <label class="modal-overlay" for="modal-one"></label>
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>Modal in CSS?</h2>
        <label class="btn-close" for="modal-one" aria-hidden="true">×</label>
      </div>
      <div class="modal-body">
        <p>One modal example here! :D</p>
      </div>
      <div class="modal-footer">
        <label class="btn btn-primary" for="modal-one">Nice!</label>
      </div>
    </div>
  </div>
</div>

<label class="btn" for="modal-one">Example</label>

<h2>Modal in CSS?</h2>

</div>

<p>One modal example here! :D</p>

</div>

</div>

CSSで実装するタブ

タブは3つのコンテンツを表示するコンポーネントで、問題なく使用できます。CSSに特別なテクニックは必要ありません。

CSSで実装するタブ
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Tab -->
<div class="tab">

  <!-- Tab Painel -->
  <div class="tab-painel">
    <input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" checked>
    <label class="tab-nav" for="tab-1">Tab 1</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

  <div class="tab-painel">
    <input class="tab-open" id="tab-2" name="tab-wrap-1" type="radio">
    <label class="tab-nav" for="tab-2">Tab 2</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

  <div class="tab-painel">
    <input class="tab-open" id="tab-3" name="tab-wrap-1" type="radio" >
    <label class="tab-nav" for="tab-3">Tab 3</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

</div>

...

</div>

...

</div>

...

</div>

CSSで実装するツールチップ

ツールチップは、ホバーまたはフォーカスで表示されます。Wai-ariaを使用しているため、スクリーンリーダーでもこの要素を利用できます。

CSSで実装するツールチップ
※CSSは上記ページの「Download」からダウンロードできます。

<!-- Tooltip -->
<a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="content displayed over ">Top</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-right btn" aria-label="content displayed to the right">Right</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-bottom btn" aria-label="content displayed below ">Bottom</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-left btn" aria-label="content displayed to the left ">Left</a>