HTMLとCSSで隠し要素を作る
ブログを書くと思ったより時間がかかって大変だけど、忘れないようにメモ。
・HTML要素をCSSで出したり隠したりするには
まず参考にしたのはこちらの記事。ツイッター等を見るとグラフィック作品等も発表されているようなので、 デザイナーの方なのでしょうかね。色々洗練されててひれ伏したいくらい良く出来ています。 内容も充実。大変勉強になります(速攻ブックマーク)!
長いけどコードがあったほうが分かりやすいと思うので載せておく。 このアンドロイドのお腹のあたりにカーソルを載せるとボタンが出るようにしてある。 その部分の実装は以下の通り。
<div class="secret"> <input type="checkbox"> <div class="message">Don't push the button!</div> </div>
.secret { top: 120px; left: 100px; width: 20px; height: 20px; background: yellow; border-radius: 25px; position: absolute; opacity: 0; box-shadow: 2px 2px 2px grey; } .secret:hover { opacity: 1; } .secret input { opacity: 0; } .message { opacity: 0; border-radius: 20px; background: lightgray; padding: 5px 0 0 35px; width: 200px; height: 80px; top: -200px; left: 200px; position: absolute; font-family: Arial; font-weight: bold; font-size: 30px; } .secret input:checked ~ .message { opacity: 1; }
どうやって非表示→表示を切り替えるのか?手順は2つだけ。
1. 隠したい要素を非表示にする
まずは<div class="secret">
と<div class="message">
の両方を
opacity: 0;
にして非表示にする。
(opacityは透明度を変えるプロパティ)
2. カーソルを合わせると表示されるようにする
.secret:hover
に対してopacityを1にしておけば、カーソルが乗っている時は表示されるようになる。
これだけで非表示→表示の切り替えは出来たことになる。
・隠し要素をクリックして表示を変化させるには
隠し要素の「表示」だけでなく、それをさらにクリックすると何かが起こるように設定する。
今回のアンドロイドでいうと、黄色いボタン(隠し要素)をクリックするとテキストが表示されるようになっている。
さっきのopacityの設定に加えて、以下を追加する。
1. <input type="checkbox">
隠し要素にチェックボックスを仕込んでおく。 ただしこれは見えてしまうとダサいので、opacityをゼロにして非表示にする。 もちろん、カーソルを合わせても表示されないようにしておく。 見えてもいいデザインの場合はそのままでOK。
2. .secret input:checked ~ .message
ここが今回のキモになるテクニック!
CSSで~
のセレクタを使うと、~以後の要素に対してCSSを指定できる。
ただし、有効なのは~の前にある要素と同じ階層の要素のみ。
今回の場合でいうと、.secret
のinput
がチェックされた場合、
.message
が表示されるように設定してある。
input
と.message
は同じdivにネストしている同階層の要素なので問題なし。
特に意味のない実装だけど、ちょっとした工夫が出来たので良しとする。