on:2014年5月9日sponsors最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。-GitHubダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。CSSで実装するタブコンテンツ各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。外部ファイルカルーセル用のスタイルシートを外部ファイルとしてhead内に記述します。HTMLカルーセルで表示するコンテンツはdiv要素で配置し、それぞれに表示・非表示を切り替えるラジオボタンがセットになっています。CSSで実装するアコーディオンコンテンツを折り畳んで表示するコンポーネントは、2種類あります。折り畳みコンテンツのデモ一つ目は、折り畳まれたコンテンツそれぞれが開閉します。外部ファイル折り畳みコンテンツ用のスタイルシートを外部ファイルとしてhead内に記述します。HTMLコンテンツ開閉のトリガーに、チェックボックスを使用します。</div></div>二つ目は折り畳まれたコンテンツの一つだけが開く、アコーディオンです。外部ファイル上記と同じスタイルシートを外部ファイルとしてhead内に記述します。HTMLアコーディオンは開いているのが一つだけなので、トリガーはラジオボタンを使用します。外部ファイルドロップダウン用のスタイルシートを外部ファイルとしてhead内に記述します。HTMLドロップダウンは開く際のトリガーがホバーとクリックの2種類あります。外部ファイルモーダルウインドウ用のスタイルシートを外部ファイルとしてhead内に記述します。HTMLモーダルウインドウは最初「aria-hidden」で非表示にしておいて、「#modal-one」をアンカーにすることで表示します。外部ファイルタブコンテンツ用のスタイルシートを外部ファイルとしてhead内に記述します。HTMLタブはラジオボタンで実装し、各コンテンツはそれに対応したラジオボタンで表示を切り替えます。