Learning to Code

プログラミング勉強記録

HTMLとCSSで隠し要素を作る

ブログを書くと思ったより時間がかかって大変だけど、忘れないようにメモ。

・HTML要素をCSSで出したり隠したりするには

まず参考にしたのはこちらの記事。ツイッター等を見るとグラフィック作品等も発表されているようなので、 デザイナーの方なのでしょうかね。色々洗練されててひれ伏したいくらい良く出来ています。 内容も充実。大変勉強になります(速攻ブックマーク)!

saruwakakun.com

長いけどコードがあったほうが分かりやすいと思うので載せておく。 このアンドロイドのお腹のあたりにカーソルを載せるとボタンが出るようにしてある。 その部分の実装は以下の通り。

<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を指定できる。

ただし、有効なのは~の前にある要素と同じ階層の要素のみ。

今回の場合でいうと、.secretinputがチェックされた場合、 .messageが表示されるように設定してある。

input.messageは同じdivにネストしている同階層の要素なので問題なし。

特に意味のない実装だけど、ちょっとした工夫が出来たので良しとする。