CSSのみでラジオボタン+スライドバーなUIを作る
作ったサンプル
はこちら。アニメーションとかはもっと調整できそうだけど… jQueryを利用してますが、選択中の値を表示するためだけに使ってます。
radios-to-slider: jquery plugin to create a slider using a list of radio buttons. 見た目はこちらを参考にしてます。
ポイント
ラジオボタンの選択
ボタン自体は非表示にしていて、Psuedo ElementでUIを作るありがちな手法。
非表示に指定する時に display: none
だとPsuedo Elementへのスタイルで打ち消せないので visibility: hidden
を使うことを忘れずに。
スライドバー部分
デフォルトアクティブな色で、選択したラジオボタン以降を灰色にしてる。general sibling selectors使う都合。
.radio:checked ~ label background-color: gray
ところで ~
使ったセレクタを general sibling selectors (一般兄弟セレクタ)と呼ぶの覚えにくい…
Adjacent sibling combinator - CSS | MDN
radial-gradientで枠付きの丸を描く
borderで十分だったことに後から気づいたけど、せっかく使い方覚えたので。
// メモ用に改行 background-image: radial-gradient( circle, // 形と位置の指定 省略すると `ellipse` white 0.7rem, // 白で0.7remまで塗る black 0.7rem, // 0.7rem ~ 0.7rem で白->黒にグラデーション。要はグラデーションなし。 black 1rem, // 0.7rem ~ 1remは黒に塗る(省略可) )
あとがき
最近CSSがちょっと楽しくなってきた。辛いことの方が多いけど。
もっとCSS力上げたいけど、やりたいことが先にある感じになってて、体系的に学習していきたさがある。
みんなどうやってCSS修行してんのかな。
CSS Secrets: Better Solutions to Everyday Web Design Problems
- 作者: Lea Verou,Eric A. Meyer
- 出版社/メーカー: Oreilly & Associates Inc
- 発売日: 2015/07/03
- メディア: ペーパーバック
- この商品を含むブログを見る