More
もっと見るボタン
一覧の一部だけを表示して、クリックで残りを自然に見せる基本パターン。
classList forEach display
記事を見るWeb制作現場のためのJS逆引きサイト
Web制作
JSノート
コピペから一歩先へ。
現場で使うJavaScriptを、
UI実装から学ぶ。
ハンバーガーメニュー、アコーディオン、もっと見るボタンなど、Web制作でよく使うUIを題材に「なぜ動くのか」と「どこを変えるのか」をやさしく整理します。
UI Memo
button.addEventListener('click', () => {
menu.classList.toggle('is-active');
});classList
aria-expanded
CSSだけでOK?
addEventListener
Find by UI
実装したい機能から探す
現場でよく出てくるUIごとに、基本の考え方、変更しやすいポイント、HTML/CSSだけで済む選択肢まで整理します。
FAQ
アコーディオン
FAQや詳細説明を開閉するUIを、アクセシビリティも含めて確認します。
click aria details
記事を見るNav
ハンバーガーメニュー
開く、閉じる、リンククリックで閉じる、背景固定まで実務目線で扱います。
toggle body class SP
記事を見るTab
タブ切り替え
クリックしたタブに対応するパネルだけを表示する、定番UIの仕組み。
data属性 hidden role
記事を見るModal
モーダル
開閉ボタン、背景クリック、Escキー、フォーカス管理の入り口を学びます。
dialog focus keydown
記事を見るTop
ページトップボタン
スクロール量で表示し、クリックでページ上部に戻る小さな便利UI。
scroll scrollTo fixed
記事を見るTrouble Shooting
よくある困りごとから探す
エラー名よりも「いま画面で起きていること」から探せるように、検索意図に近い言葉で入口を用意しています。
New Articles
新着記事
まずは小さなUI実装から。手を動かしながら、JavaScriptの読み方と直し方に慣れていきます。
input・change・blur・submitの違い｜フォームではどのイベントを使う？
input・change・blur・submitの発火タイミングの違いを整理し、フォームではどのイベントを使えばよいのかを実例とともに解説します。
記事を見るJavaScriptで要素を追加・削除・入れ替える方法｜append・before・replaceWith・remove
append・prepend・before・after・replaceWith・removeの違いを、挿入位置や実例を見ながら整理します。要素の追加・削除・入れ替えで迷いやすいポイント…
記事を見る後から追加した要素でclickイベントが動かない原因｜イベントデリゲーションの使い方
動的追加された要素にイベントが届かない仕組みから、新しく追加した要素だけにイベントを登録する方法、親要素でまとめてイベントを受け取るイベントデリゲーションまでを解説します。
記事を見るclassListで表示・非表示を切り替える方法｜add・remove・toggleの使い分け
この記事では、classListの基本操作であるadd()、remove()、toggle()の使い分けから、表示・非表示を切り替える実践コード、動かないときのトラブルシューティングま…
記事を見るaddEventListenerでclickイベントが動かない原因と確認方法
この記事では、addEventListenerのclickが動かない7つの典型原因と解決策、そしてconsole.logを使った確実なデバッグ手順を解説します。
記事を見るquerySelectorで要素を取得できない・nullになる原因と確認方法
この記事では、querySelector()がnullになる典型的な原因と解決策、そしてエラーが出たときの確実なデバッグ手順を解説します。
記事を見るCategories
カテゴリー一覧
Keep Learning
動く理由がわかると、直せる範囲が増えていく。
コピペしたコードを否定せず、少しずつ意味を理解する。Web制作JSノートでは、現場でよく使うUI実装を通して、JavaScriptとの距離を縮めていきます。
最初の記事から読む