input・change・blur・submitの違い｜フォームではどのイベントを使う？
input・change・blur・submitの発火タイミングの違いを整理し、フォームではどのイベントを使えばよいのかを実例とともに解説します。
記事を見るArchive
記事一覧
Web制作でよくある困りごとや、JavaScript・CSS・WordPressの実装トラブルを解決する記事をまとめています。
公開記事
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になる典型的な原因と解決策、そしてエラーが出たときの確実なデバッグ手順を解説します。
記事を見るscroll-behavior: smoothが効かない原因と対策｜html・body・スクロール要素を確認
scroll-behavior: smoothが効かない主な原因と解決策を解説します。html・bodyの指定場所、実際のスクロールコンテナ、JavaScriptとの関係を確認し、位置…
記事を見るcanvas.toDataURL()とtoBlob()の違い｜画像保存でtoBlobを使う理由とダウンロード方法
この記事では、toDataURL()とtoBlob()の根本的な違いから、toBlob()を用いた安全な画像ダウンロードの実装パターン、画質設定（quality）の仕様、エラー（Sec…
記事を見るcanvasで画像や文字がぼやける原因とdevicePixelRatioで高解像度表示する方法
この記事では、Canvasがぼやける根本的な仕組みから、devicePixelRatioを用いた高解像度（Retina）対応の最短コード、ctx.scale()の役割、レスポンシブ時の…
記事を見るJavaScriptで日時が9時間ずれる原因と対策｜UTC・JST・toISOString()の違い
この記事では、日時が9時間ずれて見える仕組みから、new Date()の文字列解釈の違い、+9時間の手動加算を避けるべき理由、Intl.DateTimeFormatを使った堅実なJST…
記事を見るposition: stickyが効かない・固定されない原因と対策｜overflow・親要素・topを確認
position: stickyが効かない・動いてしまう主な原因と、DevToolsを使った切り分け手順を解説します。topやbottom、祖先要素のoverflow、親要素の高さ、F…
記事を見るURL.createObjectURLで画像をプレビューする方法とrevokeObjectURLが必要な理由
この記事では、URL.createObjectURL()を使った画像プレビューの実装から、revokeObjectURL()が必要な理由、差し替え時の解放パターン、FileReader…
記事を見るcanvas.toDataURL()でSecurityErrorになる原因｜CORSとtainted canvasの直し方
画像は表示できているのにCanvasから書き出せない原因を、CORSとtainted canvasの仕組みから解説します。crossOriginと配信元のレスポンスヘッダー、複数画像の…
記事を見るinput type=”file”のacceptで対象外ファイルを完全に禁止できない理由と正しいチェック方法
この記事では、acceptで対象外ファイルが選べてしまう理由から、正しい属性の書き方、JavaScript（File.typeや拡張子）によるフロントエンドでのチェック方法、そしてサー…
記事を見るscrollIntoViewでスクロール位置がずれる原因と固定ヘッダー分を調整する方法
この記事では、scrollIntoView()で位置がずれる原因から、CSSのscroll-margin-topと組み合わせた最短の調整方法、blockオプションの違い、そしてwind…
記事を見るinput type=”file”で同じファイルを選び直してもchangeが発火しない原因と対処法
この記事では、同一ファイル選択時にchangeが発火しない理由から、event.target.value = ''を使った最小構成の解決策、リセットを入れるタイミングの使い分け、can…
記事を見るスマホで100vhの高さがおかしい・余白が出る原因とdvh・svhでの直し方
この記事では、スマホで100vhがずれる原因から、各新単位の違い・使い分け、heightとmin-heightの選択、それでも崩れるときの切り分けポイントまでを解説します。
記事を見るアンカーリンクで見出しが固定ヘッダーに隠れる原因とscroll-margin-topでの直し方
この記事では、見出しが隠れる原因から、scroll-margin-topを用いた最小構成の実装、実務での堅実なCSSの書き方、うまく効かないときの切り分けポイントまでを解説します。
記事を見るページトップボタンを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に任せる実務向けの基本パターンです。
記事を見るBrowse by Category