HOMEINDEXMOBILERSS彫金教室カテゴリを追加したい!カラーミーのBitスマホ版ドロップリストで第六回目!!!!!!20162200よもやま話こんにちは。前回はhtmlでラジオボタンとほかの要素をラベルで関連付けました。今回は、そのラジオボタンと関連付けた要素をうまく使ってドロップリストを作ります。htmlをちょっとおさらい↓htmlはこんな感じでしたね。(見にくい場合はクリックして下さい。)赤色2行と青色の2行は、ラベルで関連付けてあります。ラジオボタンは、nameを同じにするのを忘れないようにしましょう。↓CSS全体はこんな感じです。余分なところもあります。幅などは皆さんのお好みで調整してみてください。↓ラジオボタンは画面から消しておきます。(どういうものかわからない方は消す前に見ておいてください。↓ドロップリスト部分これも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を増やす可能性もあるので、上の方に配置したのです。わかりにくいところもあったでしょうが、全六回にわたった「カテゴリ追加」シリーズはいかがだったでしょうか。カテゴリを追加するだけでも、いろいろ試行錯誤するところがあって、メンドクサかったような勉強になったような・・・。シンプルなテンプレートは自分で色々変えられるのが良いですね。今後も、大きく変えることがあったら紹介していきたいです。