

下記のサイトがどう動いているのか不明です。  
<https://mem.ooo/>

コードを見ても、GoogleAnalytics以外JavaScriptなどで動いているようには見受けられないですし、  
どのような仕組みで画面が動的に変わっているのでしょうか。

稚拙な質問になりますが、ご回答いただけますと幸いです。

よろしくお願いいたします。


CC BY-SA 3.0
2016-08-20T23:03:12.567
28399
2016-08-25T02:53:08.850
2016-08-25T02:53:08.850
3054
18537
question
html css
要素のクリックに反応して別の要素を出現させる（JavaScriptによらない）方法


上部の3アイコンをクリックするとそれぞれのコンテンツが表示される動作のことをいっているのでしょうか。(ご質問にはリンクだけでなく、できるだけ詳細に対象となる動作を記述してください。リンク切れなどがあると、全く質問が意味をなさなくなってしまいます。)

隠しチェックボックスを作り、その直後に表示したい要素を配置して、チェックボックスの`checked`状態によって、その要素の表示スタイルを変更しています。アイコンやクローズボタンは隠しチェックボックスへの`label`にしてあるため、チェックボックスそのものは隠されていても、そのチェック状態を変更できるという仕掛けです。

擬似セレクタを含むCSSのセレクタ記述が理解できていれば、(後はネタがわかれば)理解できるコードだと思います。

最初は元サイトのコードを全部引用して説明を書こうと思ったのですが、公開サイトのコードの一部とはいえ、ライセンスが不明確なコードをむやみに引用するべきではないので、簡略化したコードを作ってみました。

[code]

    <html>
    <head>
    <meta charset="UTF-8">
    <style>
      .hidden-content {
        display: none;
      }
      .content-switch:checked + .hidden-content {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.7);
      }
      /*
      .content-switch {
        position : absolute ;
        top : -9999px ;
        left : -9999px ;
        width : 1px ;
        height : 1px ;
      }
      */
    </style>
    </head>
    <body>
      <div>
        <label for="hidden-content-switch">Open</label>
      </div>
      <input type="checkbox" id="hidden-content-switch" class="content-switch">
      <div class="hidden-content">
        This content is hidden by default.<br>
        <label for="hidden-content-switch">Close</label>
      </div>
    </body>
    </html>
    
[/code]

CSS内でチェックボックスを非表示にする部分をコメントアウトしてあるので、どんな動作になっているのかわかっていただけるかと思います。丸ごとコピーして.htmlファイルを作成してご確認ください。


CC BY-SA 3.0
2016-08-20T23:59:16.470
28401
2016-08-20T23:59:16.470
13972
28399
answer