Engrave with!!
手彫り工房ブログ

手彫り工房のオフィシャルブログです。金属彫ってます。彫ってます。

カテゴリを追加したい!ここからスマホ版ドロップリストで第五回目!!!!!

2016
21
こんにちは。

前回宣言した通り、スマホ版のhtmlを公開していきます。
・・・と、その前に。

完成はこうなります。


↓追加したCATEGORYをクリックもしくはタップ
カラーミーカテゴリ追加ul

↓すると、ドロップリストがでてきます。
カラーミーカテゴリ追加ul1
閉じるときは、CLOSEをクリックもしくはタップすればOKです。

htmlはPC版と少ししか変わりません。


↓htmlはこちらです。見にくい場合は、クリックして拡大してください。
カラーミーカテゴリ追加 htmlスマホ
もとからある部分は灰色にしてあります。
重要なのは赤文字と青文字です。
それ以外は、ほとんどPC版と変わりません。

ラジオボタンを前に!


今回つかうラジオボタンとCSSの「~」ニョロニョロこと間接セレクタを使います。(ちなみに、~の正式名称はチルダです)
間接セレクタは兄弟要素じゃないと使えません。
兄は弟より先に記述されています。(先に生まれているから兄ですよね。)
今回は、ラジオボタンを兄にしたいので、前の方に記述してあります。

label for は、関連付け。


そもそもラジオボタンとは、当然ボタンなのです。
ボタンだから、押した状態(checkした状態)と、押していない状態があります。
label forで関連付けた要素(今回はCATEGORYとCLOSE)は、ラジオボタンと連動します。
ですので、CATEGORYをクリックすれば、id名headdropBもクリックしたことになります。
CLOSEの場合は、headdropB2のラジオボタンですね。

次回CSSはラジオボタンと疑似クラス:checked


今回はhtmlでラジオボタンを関連付けしているよ~というところでした。
次回は、関連付けするとCSSでこんな便利なことができるよ~ということをやっていきたいと思います。
疑似クラス:checkedを使うので、事前にちょっと調べておいてもらえると理解が深まります。



それでは。次回はスマホ版CSSです。