style01

justify-content:space-betweenがうまく効かない時は justify-contentはflexboxのコンテナの配分を定義するプロパティ。 私がよく使うのはspace-between。最初と最後のアイテムを端に寄せ、あとは均等に配分してくれるとてもいい子。 でもたまにうまく…

javascriptを使って、ボタンをクリックするごとに背景をランダムで出すデモ。 jQuey無しで動きます。改良してグラデ版も作ってみたいです。 See the Pen 180530_色をランダムで出す by nekuta (@nekuta) on CodePen. js [crayon-5b2f…

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

全ての項目をチェックするチェックボックスです。 チェックが１つでも外れたら、全てチェックするチェックボックスもチェックが外れます。 See the Pen 全てチェックするチェックボックス by nekuta (@nekuta) on CodePen. チェックした時に全ての項目をチェックする [c…

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

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

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

実は最近cssだけで連番を作ることができることを知りました。ずっとjsで書いていた自分が恥ずかしいです。 See the Pen 180302 by nekuta (@nekuta) on CodePen. 使うのはcounter-incrementというプロパティ。 連番表示させる繰り返し要素(今…