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

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

カテゴリを追加したい!カラーミーのBitスマホ版ドロップリストで第六回目!!!!!!

2016
22
こんにちは。

前回はhtmlでラジオボタンとほかの要素をラベルで関連付けました。
今回は、そのラジオボタンと関連付けた要素をうまく使ってドロップリストを作ります。

htmlをちょっとおさらい


↓htmlはこんな感じでしたね。(見にくい場合はクリックして下さい。)
カラーミーカテゴリ追加 htmlスマホ
赤色2行と青色の2行は、ラベルで関連付けてあります。

ラジオボタンは、nameを同じにするのを忘れないようにしましょう。

CSS全体


↓CSS全体はこんな感じです。
カラーミーカテゴリ追加 cssスマホ

ちょっと余分なところもあります。
幅などは皆さんのお好みで調整してみてください。

CSSをバラして紹介


↓ラジオボタンは画面から消しておきます。(どういうものかわからない方は消す前に見ておいてください。)
カラーミーカテゴリ追加 cssスマホ1

↓CATEGORYの部分
カラーミーカテゴリ追加 cssスマホ3
主に幅や文字位置などの調整

↓ドロップリスト部分
カラーミーカテゴリ追加 cssスマホ2
これもPC版とほとんど同じですね。
z-indexは1でも隠れます。(CATEGORYをはじめとしたリストのz-indexは初めから200で設定されています。)
実はz-indexを200より大きくしておいても、display:noneだけで隠れます。

↓CATEGORYとラジオボタンの関連付けに関わる部分。
カラーミーカテゴリ追加 cssスマホ4
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を増やす可能性もあるので、上の方に配置したのです。


わかりにくいところもあったでしょうが、全六回にわたった「カテゴリ追加」シリーズはいかがだったでしょうか。
ちょっとカテゴリを追加するだけでも、いろいろ試行錯誤するところがあって、メンドクサかったような勉強になったような・・・。
という感じです。
シンプルなテンプレートは自分で色々変えられるのが良いですね。
今後も、大きく変えることがあったら紹介していきたいです。

それでは。