style01

display:gridはあまり使ったことが無かったのですが、改めて使ってみたら楽しかった。 痒いところに手がとどいでいい感じですね。個人的にflexより好き。 複雑なレイアウトやテーブルを簡単に表現できそう。 See the Pen 171031 by M.Ueda (@nekuta) on Co…

ブラウザ画面いっぱいに広がるスライドショーです。 結構楽しかった。 以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。 読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。 …

クリックすると中身が出てくるアコーディオンボタン。 可変すると周知するために最初の一つは開けています。 一応開いた状態の要素に.activeをつけています。 See the Pen 171004 by M.Ueda (@nekuta) on CodePen. js(jQuery) $(functio…

UIを意識したくて作ったやつ。メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。 ハンバーガーメニューは以前作ったこちらを使いました。CSSだけで作るハンバーガーメニュー 縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。 S…

今更ですがcssだけでハンバーガーメニューを作ります。 widthとheightがあらかじめわかっていれば簡単です。 transform:translateYを使ったのは、active時の動作のためです。 html <div class=”header_sp_nav”> <span…

遊んでたら出来上がったもの。 firefoxでいい動きをしなかったので、userAgentで振り分けました。firefoxだとloadが完了するとloading画面がふわっとフェードし、それ以外のブラウザだと、波が引くようにloading画面が下に下がります。 動きの部分は全てcssアニメーション。…

ナビの高さが変わっても大丈夫な様にしたつもりだけどあまりいい動きをしない。 まだまだ勉強不足です。 See the Pen 20170713 by M.Ueda (@nekuta) on CodePen. js(jQuery) // スクロール後nav出現 $(window).on(‘load re…

pcでtelリンクのかかっているものをクリックするとポップアップが出てしまいますが、これをpc幅のときに起動させない方法です。 簡単なものならcssメディアクエリで振り分けが可能です。 HTML <a href=”tel:0000000000″> 00-0000-0000 </a&…