HTML+CSSだけでやるイベント処理

はじめまして、モノづくり部ターフジです。

モノづくり部のアルコールとウェブの？デザイン？とかを担当しています。
最近では、WordPressと遊んでます。いや、遊ばれてます。

Webページなどでボタンをクリックした時の、よくあるイベント処理です。
これをJavaScriptを利用せずに、HTML+CSSだけでやってみたいと思います。

まずは最初に適当なリストを用意します。
これを箱とします。

HTML作成

<ul>
  <li><p>箱です</p></li>
<ul>

CSS作成

li {
  list-style: none;
}

箱と名乗るリストができましたね。

しかし、今回の主役はラベルです。
ラベルは、for属性の値とフォームの構成部品（ラジオボタンやチェックボックス等）のid属性の値が同じ時、両者を関連づけることができます。
とりあえず追加してみましょう。

HTML修正

<ul>
  <li>
    <input type="checkbox" name="omote" id="omote">
    <label for="omote" class="omote ">
      <p>箱です</p>
    </label>
  </li>
<ul>

チェックボックスのid属性とラベルのforの値をomoteとしました。
これだけだとわかりにくいので真っ赤な箱になってもらいましょう。

CSS追記

.omote {
  width: 200px;
  height:60px;
  background: red;
  position: absolute;
}

赤い箱をクリックするとチェックボックスがポチポチできます。
クリックした時に出てきてほしい箱の裏の顔を作ります。
こちらはomoteに対してuraという名前にしました。

HTML修正

<ul>
  <li>
    <input type="checkbox" name="omote" id="omote">
    <label for="omote" class="omote ">
      <p>箱です</p>
      <div class="ura "><p>裏の顔です</p></div>
    </label>
  </li>
<ul>

CSS追記

.ura {
  width: 200px;
  height:60px;
  background: green;
}

裏の顔が出てきてしまいましたね。
そこは隠しておきたいのでしまっちゃいます。

CSS修正

.ura {
  width: 200px;
  height:0px;
  background: green;
  overflow: hidden;
}

強引ですが、とりあえず、これで裏の顔を隠せましたね。

さて、お待ちかねのイベント処理部分です。
こいつがエモノです。

input[type="checkbox"]:checked  X{
  変化するぜ〜
}

見たままですが、チェックボックにチェックが入っていた時、Xに対して処理を行うものです。
今回のXは裏の顔なので、裏のclassにura—changeを追加します。

HTML修正

<ul>
  <li>
    <input type="checkbox" name="omote" id="omote">
    <label for="omote" class="omote ">
      <p>箱です</p>
      <div class="ura ura--change"><p>裏の顔です</p></div>
    </label>
  </li>
<ul>

変化する中身ですが、今、裏の顔は高さを持っていない状態です。
なので、高さ60pxを与えてあげましょう。

CSS追記

input[type="checkbox"]:checked + label .ura--change {
  height: 60px;
}

チェックになった際、inputの隣のlabel内にあるura—changeの高さを0pxから60pxにせよという命令です。

では箱をクリックしてください。

出てきましたね、裏の顔が。

チェックを外すと隠れます。
動作としてはこれで終了です。

邪魔なのでinputには消えてもらいましょう。

CSS追記

input {
  visibility: hidden;
}

さらに、にゅるっと出したいので。アニメーションを追加します。

CSS修正

.ura {
  width: 200px;
  height:0px;
  background: green;
  overflow: hidden;
  transition: all 300ms 0s ease;
}

これでHTML、CSSだけでクリックイベントを起こすことができました。
いろんな方法があると思いますので、試してみてください。

最後に注意点を。
今回の方法だと、ラベル内の要素にしか効果がありません。
それをふまえて設計してみてください。

それでは。
裏の顔はございません、ターフジでした。