UI実装

こんにちは、かつコーチです。前回はフォームのバリデーションをjQueryで実装しました。実践UI実装シリーズの最後は、ページ内リンクをなめらかに移動させるスムーススクロールです。素のJavaScript版では scrollIntoView(...

こんにちは、かつコーチです。前回はスライドショー・カルーセルをjQueryで実装しました。今回は、お問い合わせフォームなどで欠かせないバリデーション（入力チェック）をjQueryで実装していきます。素のJavaScript版では blur ...

こんにちは、かつコーチです。前回はモーダルウィンドウをjQueryで実装しました。今回は、トップページなどでよく見るスライダー（カルーセル）をjQueryで実装していきます。素のJavaScript版ではCSSの transform: tr...

こんにちは、かつコーチです。「レガシー案件を保守することになったけど、jQueryでモーダルを実装した箇所がどう動いているか読めない」という相談をよく受けます。モーダルウィンドウは、画像の拡大表示や確認ダイアログなど、どんなサイトでも一度は...

こんにちは、かつコーチです。前回は、アコーディオンをjQueryで実装しながら、素のJavaScript版との書き方の違いを比較しました。今回は、同じく「複数の要素からアクティブなものを1つだけ選ぶ」というUIである、タブ切り替えを実装して...

こんにちは、かつコーチです。以前、JavaScript基礎編の記事で、素のJavaScriptを使ったアコーディオン（FAQ）の開閉実装を紹介しました。今回はここからが「実践UI実装」シリーズの1本目です。同じアコーディオンをjQueryで...