IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components

Post on:2014年5月9日

最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。

HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。

サイトのキャプチャ

Pure CSS Components
Pure CSS Components -GitHub

ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。

各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。

Pure CSSで実装するカルーセル

デモのキャプチャ

カルーセルのデモ

Step 1: 外部ファイル

カルーセル用のスタイルシートを外部ファイルとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="assets/css/carousel.css">
</head>

Step 2: HTML

カルーセルで表示するコンテンツはdiv要素で配置し、それぞれに表示・非表示を切り替えるラジオボタンがセットになっています。

<!-- 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>

Pure CSSで実装するアコーディオン

コンテンツを折り畳んで表示するコンポーネントは、2種類あります。

デモのキャプチャ

折り畳みコンテンツのデモ

一つ目は、折り畳まれたコンテンツそれぞれが開閉します。

Step 1: 外部ファイル

折り畳みコンテンツ用のスタイルシートを外部ファイルとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="assets/css/collapse.css">
</head>

Step 2: HTML

コンテンツ開閉のトリガーに、チェックボックスを使用します。

<!-- Collapse -->
<div class="collapse">
  <label class="collapse-open" 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>
デモのキャプチャ

二つ目は折り畳まれたコンテンツの一つだけが開く、アコーディオンです。

Step 1: 外部ファイル

上記と同じスタイルシートを外部ファイルとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="assets/css/collapse.css">
</head>

Step 2: HTML

アコーディオンは開いているのが一つだけなので、トリガーはラジオボタンを使用します。

<!-- 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>

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

デモのキャプチャ

ドロップダウンのデモ

Step 1: 外部ファイル

ドロップダウン用のスタイルシートを外部ファイルとしてhead内に記述します。

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

Step 2: HTML

ドロップダウンは開く際のトリガーがホバーとクリックの2種類あります。

<!-- 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 />
  <div class="dropdown-inner">
    ...
  </div>
</div>

Pure CSSで実装するモーダルウインドウ

デモのキャプチャ

モーダルウインドウのデモ

Step 1: 外部ファイル

モーダルウインドウ用のスタイルシートを外部ファイルとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="assets/css/modal.css">
</head>

Step 2: HTML

モーダルウインドウは最初「aria-hidden」で非表示にしておいて、「#modal-one」をアンカーにすることで表示します。

<a href="#modal-one" class="btn">Example</a>

<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      ...
      <a class="btn-close" href="#" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      ...
    </div>
  </div>
</div>

Pure CSSで実装するタブコンテンツ

デモのキャプチャ

タブコンテンツのデモ

Step 1: 外部ファイル

タブコンテンツ用のスタイルシートを外部ファイルとしてhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="assets/css/tab.css">
</head>

Step 2: HTML

タブはラジオボタンで実装し、各コンテンツはそれに対応したラジオボタンで表示を切り替えます。

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

  <!-- Tab Painel -->
  <div class="tab-painel">
    <input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" aria-hidden="true" hidden 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" aria-hidden="true" hidden>
    <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" aria-hidden="true" hidden />
    <label class="tab-nav" for="tab-3">Tab 3</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

</div>

sponsors

top of page

©2024 coliss