[Category] JavaScript 全57件

このメーターなんて言うんでしょう？進捗バー？プログレスバー？を作りました。特定のclassを入れることで、バーの長さとパーセントを動的に出してくれます。作ってて楽しかった。 See the Pen 180501_プログレ…

全ての項目をチェックするチェックボックスです。チェックが１つでも外れたら、全てチェックするチェックボックスもチェックが外れます。 See the Pen 全てチェックするチェックボックス by nekuta (@neku…

一定以上要素がある時にアコーディオンボタンを出現させ、一定に満たない場合はアコーディオンボタンを出しません。 See the Pen 180407_アコーディオン by nekuta (@nekuta) on CodeP…

先日公開したコーダーのための計算機で使用したタブメニューです。レスポンシブ対応。今回のメニューは５個なので、スマホサイズの時のタブサイズは、１〜３番目の横幅は33%、４番目と５番目の時は横幅50%です。 See the …

デザインをhtmlにするときに楽したいなという願望から生まれた計算機です。 ・とりあえず２で割ってくれる電卓 ・px→em変換 ・px→rem変換 ・行送り計算 ・トラッキング計算 こんな感じにまとまって言います。 楽す…

タイトルの数に応じてアンカーリンクを自動で作成します。wpのビジュアルエディタ部分で実装しました。ビジュアルエディタで見出し（h2）を追加するとその数に応じてアンカーリンクが増えます。静的なサイトでも十分活躍できそう。 …

あるリストの個数が動的に変化し、その個数が１個のときはセンタリングして、それ以外の時は左寄せにする。要素をセンタリングしたい時はinline-blockが便利ですけど、下記demoのように横に収まる個数が決まっていて、半…

追従範囲を指定したサイドバーです。resizeした時にも対応させていますので、サイドバーが突き抜けることはありません。デモではわかりやすく各要素にheightを指定しています。 追従している時は.sideにfixedとい…