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