カテゴリを追加したい！カラーミーのBitスマホ版ドロップリストで第六回目！！！！！！
2016
22
こんにちは。
前回はｈｔｍｌでラジオボタンとほかの要素をラベルで関連付けました。
今回は、そのラジオボタンと関連付けた要素をうまく使ってドロップリストを作ります。
↓htmlはこんな感じでしたね。（見にくい場合はクリックして下さい。）
赤色2行と青色の2行は、ラベルで関連付けてあります。
ラジオボタンは、nameを同じにするのを忘れないようにしましょう。
↓CSS全体はこんな感じです。
ちょっと余分なところもあります。
幅などは皆さんのお好みで調整してみてください。
↓ラジオボタンは画面から消しておきます。（どういうものかわからない方は消す前に見ておいてください。）
↓CATEGORYの部分
主に幅や文字位置などの調整
↓ドロップリスト部分
これもPC版とほとんど同じですね。
z-indexは1でも隠れます。（CATEGORYをはじめとしたリストのz-indexは初めから200で設定されています。）
実はz-indexを200より大きくしておいても、display:noneだけで隠れます。
↓CATEGORYとラジオボタンの関連付けに関わる部分。
z-indexとdisplayを使っていますが、実はdisplayだけでもイケます。
疑似クラス:checkedのあるCSSは、ラジオボタンでチェックがある場合だけ動きます。
上のCATEGORYとラジオボタンの関連付けに関わる部分、のCSSを見てください。
ラジオボタン（idがheaddropB）がチェックされているとき
↓
ドロップリスト（idがheaddrop1U）を見えるようにする。
ということをやっています。
もうひとつのCLOSEと関連付けているラジオボタンのCSSはありません。
もうひとつのラジオボタン（headdropB2）はheaddropBのラジオボタンのチェックを外すためだけにあるので、見えなくするCSSだけでOKなのです。
htmlでお気づきかもしれませんが、homeのすぐ下にCATEGORYを置いています。
これはCATEGORYを下に置くと、出てきたドロップリストがスマホの画面外に出る可能性が高いためです。
結果、CLOSEが押せなくなり、見ている人はかなりストレスがたまります（笑）
これからCATEGORYを増やす可能性もあるので、上の方に配置したのです。
わかりにくいところもあったでしょうが、全六回にわたった「カテゴリ追加」シリーズはいかがだったでしょうか。
ちょっとカテゴリを追加するだけでも、いろいろ試行錯誤するところがあって、メンドクサかったような勉強になったような・・・。
という感じです。
シンプルなテンプレートは自分で色々変えられるのが良いですね。
今後も、大きく変えることがあったら紹介していきたいです。
それでは。
前回はｈｔｍｌでラジオボタンとほかの要素をラベルで関連付けました。
今回は、そのラジオボタンと関連付けた要素をうまく使ってドロップリストを作ります。
ｈｔｍｌをちょっとおさらい
↓htmlはこんな感じでしたね。（見にくい場合はクリックして下さい。）
赤色2行と青色の2行は、ラベルで関連付けてあります。
ラジオボタンは、nameを同じにするのを忘れないようにしましょう。
CSS全体
↓CSS全体はこんな感じです。
ちょっと余分なところもあります。
幅などは皆さんのお好みで調整してみてください。
CSSをバラして紹介
↓ラジオボタンは画面から消しておきます。（どういうものかわからない方は消す前に見ておいてください。）
↓CATEGORYの部分
主に幅や文字位置などの調整
↓ドロップリスト部分
これもPC版とほとんど同じですね。
z-indexは1でも隠れます。（CATEGORYをはじめとしたリストのz-indexは初めから200で設定されています。）
実はz-indexを200より大きくしておいても、display:noneだけで隠れます。
↓CATEGORYとラジオボタンの関連付けに関わる部分。
z-indexとdisplayを使っていますが、実はdisplayだけでもイケます。
:checked疑似クラスと間接セレクタの合わせ技
疑似クラス:checkedのあるCSSは、ラジオボタンでチェックがある場合だけ動きます。
上のCATEGORYとラジオボタンの関連付けに関わる部分、のCSSを見てください。
ラジオボタン（idがheaddropB）がチェックされているとき
↓
ドロップリスト（idがheaddrop1U）を見えるようにする。
ということをやっています。
もうひとつのCLOSEと関連付けているラジオボタンのCSSはありません。
もうひとつのラジオボタン（headdropB2）はheaddropBのラジオボタンのチェックを外すためだけにあるので、見えなくするCSSだけでOKなのです。
カテゴリとドロップリストの位置
htmlでお気づきかもしれませんが、homeのすぐ下にCATEGORYを置いています。
これはCATEGORYを下に置くと、出てきたドロップリストがスマホの画面外に出る可能性が高いためです。
結果、CLOSEが押せなくなり、見ている人はかなりストレスがたまります（笑）
これからCATEGORYを増やす可能性もあるので、上の方に配置したのです。
わかりにくいところもあったでしょうが、全六回にわたった「カテゴリ追加」シリーズはいかがだったでしょうか。
ちょっとカテゴリを追加するだけでも、いろいろ試行錯誤するところがあって、メンドクサかったような勉強になったような・・・。
という感じです。
シンプルなテンプレートは自分で色々変えられるのが良いですね。
今後も、大きく変えることがあったら紹介していきたいです。
それでは。