style01

【jQuery不要】javascriptとcssで作るモーダル こちらの記事の改良版です。 動きは特に変わっていませんが、forの処理を少し変更しました。 See the Pen 190325_jsモーダル_改良版 by nekuta (@nekuta)on CodePen. for(far = i…

javascriptで簡素な絞り込み検索を作りました。jQueryなしで動きます。 See the Pen 190326_javascriptで絞り込み検索 by nekuta (@nekuta) on CodePen. data属性で絞り込みをする ラジオボタンのdata-sort-navの値がd…

2019/5/11追記こちらの記事に改良版を公開しました。【改良版】【jQuery不要】javascriptとcssで作るモーダル   どうにもwordpressの新しいエディタが使いづらい・・・これを機に静的サイトジェネレーターに手を出そうか考えているこの頃です。 javascriptとcssだけ…

今年最初の投稿はお知らせ等に使えそうなバルーンです。 バルーン以外の箇所をクリックした時はバルーンを非表示にします。 See the Pen 180112_フキダシ by nekuta (@nekuta) on CodePen. 連続クリックの防止 jQueryの.on()は処理が重複するので、フラ…

cssだけでアコーディオンに挑戦しました。 仕様上高さをあらかじめ指定しないといけないようになっているのでjsで高さを補完した方が良いと思います。

作ったスクロールエフェクトを集めました。 スクロールすると要素が出現します。 スクロール値によってjsでクラス’is_visible’をつけています。 そのあとのアニメーションはすべてcssです。   See the Pen 180727_スクロールエフェクトいろい…

SP用の横から出てくるナビゲーションを作成しました。 今回はjQuery入れなくても動きます。一応jQueryで書いた時も載せています。 クラスと要素の追加・削除処理のみjsで行い、残りは全てcss。ハンバーガーメニューの動き部分もcssです。クラス付け替えてるだけ。 デモページ HTML [cra…

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