JavaScriptを使わない簡易コンテンツライブラリー

HTMLのラジオボタンとCSSで、JavaScriptを使わずに
文字情報や写真を切り替える簡単なライブラリを作成できます。

See the Pen POgxaV by webdev (@webdev-jp-net) on CodePen.0


カレント表示を切り替えるスタイル設定

cssだけでcheckboxやradioのデザインを変更と、CSS間接セレクタ「~」と隣接兄弟セレクタ「+」の使いどころの応用で
チェックされたラジオボタンの兄弟要素を指定する :checked ~ を使って、選択中要素の表示を切り替えています。

注意すべきところは、間接セレクタの結合子 ~ でつなげる要素は
HTML上でラジオボタンよりも後に記述されていないとCSSが適用されない点です。

そのため、サンプルのHTMLでの記述順は、ざっくりこんな順番になっています。

  1. ラジオボタン(非表示)
  2. サムネールとなっているlabel
  3. 選択中要素を大きく表示されるメインの枠

サムネールとメイン表示の紐付け

ラジオボタンのvalue属性を利用して input[value="1"]:checked ~ .box1 のような書き方をすると
選択中となっているラジオボタンごとに、兄弟要素の中から特定要素に絞り込んだスタイル指定ができます。

サンプルではSassのループ文を使っていますが
valueが1でチェック状態のinput 以降に登場する隣接要素 の子孫で、data-itemの値が1の要素
を特定し、可視状態としています。

デザインによっては要素数に上限がある

JavasScriptを使っていないので、デザインによっては上限が固定となってしまいます。

関連記事