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の読み方と直し方に慣れていきます。
ページトップボタンをJavaScriptで作ってみよう
ページを一定量スクロールすると右下に表示され、クリックするとページ上部へ戻るページトップボタンを作ります。scrollイベントとscrollYによる表示切り替え、scrollToを使っ…
記事を見るモーダルウィンドウをJavaScriptで作ってみよう
画面の上に重ねて情報を表示するモーダルウィンドウを作ります。dialog要素による開閉、背景クリックやEscapeキーで閉じる処理、開閉前後のフォーカス管理まで確認します。
記事を見るタブ切り替えをJavaScriptで作ってみよう
クリックしたタブに対応するパネルだけを表示する、定番のタブUIを作ります。data属性でタブとパネルを関連付け、hiddenで表示を切り替えながら、roleやaria-selected…
記事を見るハンバーガーメニューをJavaScriptで作ってみよう
スマートフォン向けサイトでよく使うハンバーガーメニューを作ります。メニューの開閉だけでなく、リンクをクリックしたときの閉じ方、背景スクロールの固定、aria-expandedとの状態同…
記事を見るFAQアコーディオンをJavaScriptで作ってみよう
FAQや詳細説明でよく使うアコーディオンUIを、HTML・CSS・JavaScriptに分けて作ります。複数の開閉パーツを扱うために、querySelectorAll、forEach、…
記事を見る「もっと見る」ボタンをJavaScriptで作ってみよう
JavaScriptで「もっと見る」ボタンを作る方法を、HTML・CSS・JSに分けて解説します。クリックでクラスを付け外しし、見た目の変化はCSSに任せる実務向けの基本パターンです。
記事を見るCategories
カテゴリー一覧
Keep Learning
動く理由がわかると、直せる範囲が増えていく。
コピペしたコードを否定せず、少しずつ意味を理解する。Web制作JSノートでは、現場でよく使うUI実装を通して、JavaScriptとの距離を縮めていきます。
最初の記事から読む