style01

2018/04/21

全てチェックするチェックボックス

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

javascript

2018/04/07

一定以上縦幅がある時アコーディオンする

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

javascript

2018/03/28

レスポンシブのタブメニュー

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

css javascript

2018/03/22

コーダーのための計算機を作りました

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

css html5 javascript

2018/03/06

CSSだけで連番を作る

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

css

2018/02/16

inputのplaceholderにfontawesomeのアイコンを表示させる

みんな大好きfontawesome！ beforeやafterの擬似要素でfontawesome使えるのだから、inputのplaceholderにも使えるんじゃないかと思ったらやっぱり使えるみたいですね。今回使うのは旧バージョンの4.7。最新バージョンの5はうまく表示してくれませんでした。 See…

css

2018/02/08

アンカーリンクを自動的に増やす

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

javascript

2018/02/07