その33ヶ月つづけてみました。執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizuka.hatenablog.comつくってはいたのですが、今回はスライダーUIに挑戦しました。実際にイベントを張るためにはEventDispatcherなどをつかう必要がありますが、今回は省略しています。touch操作にも対応していないので、PCでご観覧ください。class="knob"></div></div>自画自賛になりますが、なかなか面白い方法を取ったと自負しています。(詳しく調べてないのでもしかしたら車輪の再発明なのかもしれません)JSからは値をdata-valueに入れるだけでOKで、あとはCSSがうまいこと位置を合わせてくれるという作戦です。ロジックをJavaScriptに、見た目をCSSに持たせることができ、かなりスッキリコーディングできました。当たり判定の大きさを一定にしています。60pxを確保、スライダー本体(クリックしたところにジャンプする機能)は44pxの高さを確保しました。CodePen.今後も積極的に目コピーしていきたいと思います。注目記事プライバシーポリシーはてなブログをはじめよう!kimizukaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。