カテゴリを追加したい!ここからスマホ版ドロップリストで第五回目!!!!!
2016
21
こんにちは。
前回宣言した通り、スマホ版のhtmlを公開していきます。
・・・と、その前に。
↓追加したCATEGORYをクリックもしくはタップ

↓すると、ドロップリストがでてきます。

閉じるときは、CLOSEをクリックもしくはタップすればOKです。
↓htmlはこちらです。見にくい場合は、クリックして拡大してください。

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

↓すると、ドロップリストがでてきます。

閉じるときは、CLOSEをクリックもしくはタップすればOKです。
htmlはPC版と少ししか変わりません。
↓htmlはこちらです。見にくい場合は、クリックして拡大してください。

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