ページトップボタンをJavaScriptで作ってみよう
ページを一定量スクロールすると右下に表示され、クリックするとページ上部へ戻るページトップボタンを作ります。scrollイベントとscrollYによる表示切り替え、scrollToを使っ…
記事を見るArchive
UI実装の記事一覧
ハンバーガーメニュー、アコーディオン、もっと見るボタンなど、Web制作でよく使うUI実装をまとめています。
classList
click
Browse by Category
カテゴリーから探す
Articles
記事一覧
基本のUI実装から、よくあるトラブル、CSSやHTMLだけでできる代替案まで、現場で使いやすい単位で整理しています。
モーダルウィンドウを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に任せる実務向けの基本パターンです。
記事を見るKeep Learning
必要な実装を、必要な粒度で探せる場所に。
Web制作JSノートでは、現場でよく使うUI実装やつまずきやすいポイントを、コピペから一歩先へ進める形で整理していきます。
機能から記事を探す