CSSのみでラジオボタン+スライドバーなUIを作る

作ったサンプル

はこちら。アニメーションとかはもっと調整できそうだけど… jQueryを利用してますが、選択中の値を表示するためだけに使ってます。

codepen.io

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で十分だったことに後から気づいたけど、せっかく使い方覚えたので。

developer.mozilla.org

// メモ用に改行
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

CSS Secrets: Better Solutions to Everyday Web Design Problems