↓追加したCATEGORYをクリックもしくはタップ↓すると、ドロップリストがでてきます。閉じるときは、CLOSEをクリックもしくはタップすればOKです。htmlはPC版と少ししか変わりません。↓htmlはこちらです。見にくい場合は、クリックして拡大してください。もとからある部分は灰色にしてあります。重要なのは赤文字と青文字です。それ以外は、ほとんどPC版と変わりません。ラジオボタンを前に!今回つかうラジオボタンとCSSの「~」ニョロニョロこと間接セレクタを使います。(ちなみに、~の正式名称はチルダです)間接セレクタは兄弟要素じゃないと使えません。兄は弟より先に記述されています。(先に生まれているから兄ですよね。)今回は、ラジオボタンを兄にしたいので、前の方に記述してあります。そもそもラジオボタンとは、当然ボタンなのです。ボタンだから、押した状態(checkした状態)と、押していない状態があります。forで関連付けた要素(今回はCATEGORYとCLOSE)は、ラジオボタンと連動します。CATEGORYをクリックすれば、id名headdropBもクリックしたことになります。CLOSEの場合は、headdropB2のラジオボタンですね。次回CSSはラジオボタンと疑似クラス:checked今回はhtmlでラジオボタンを関連付けしているよ~というところでした。次回は、関連付けするとCSSでこんな便利なことができるよ~ということをやっていきたいと思います。疑似クラス:checkedを使うので、事前にちょっと調べておいてもらえると理解が深まります。次回はスマホ版CSSです。