contrast-color()を設定できるJavaScriptを作ってみた｜背景色から文字色を自動判定

JavaScript
CSSのcontrast-color()関数が2026年4月、ようやく全モダンブラウザで使えるようになりました。背景色を渡すと「白か黒」どちらか読みやすい方を返してくれるというシン…
続きを読む

PCはタブパネル切り替え・SPはアンカーリンク——JavaScriptで実現するハイブリッドUIの実装解説

JavaScript
「PCではタブで切り替えたい、でもSPではページ内リンクで飛ばしたい」——レスポンシブサイトでよくある要件です。この記事では、そのハイブリッドなタブUI（invisible-tab…
続きを読む

Electron アプリを作るときの注意点まとめ - パッケージング・IPC・メモリ管理まで

JavaScript
実際にElectronでデスクトップアプリ（複数ファイルへの一括テキスト置換ツール）を0から作りました。開発中に何度もハマり、そのたびに解決策を記録してきました。次回また同じ轍を踏…
続きを読む

Shopifyで商品カート追加時に確認ポップアップを表示する方法【Liquidカスタマイズ】

Shopify
ECサイトを運営していると、「この商品は単体では使えません」「別の商品と一緒に購入してください」といった注意事項をお客様に伝えたい場面があります。例えば：プリンターのインクカートリ…
続きを読む

WordPressカスタムメニューをアコーディオンにするJavaScript【クリック/ホバー両対応】

JavaScript
WordPressのwp_nav_menu()で出力されるカスタムメニューには、サブメニューを持つ項目に.menu-item-has-childrenクラスが自動的に付与されます。…
続きを読む

Puppeteer×Node.jsでスクレイピングツールを作る際の技術的なコツと注意点

AIコーディング
スクレイピングツール開発で押さえておくべき技術的なポイントをまとめました。これからPuppeteerでスクレイピングツールを作る方の参考になれば幸いです。この記事で解説することスク…
続きを読む

scroll-padding-topはリロード時にズレる？CSS変数とJavaScriptで解決するアンカーリンク調整

JavaScript
固定ヘッダーのあるサイトでアンカーリンクを使用すると、ジャンプ先がヘッダーの下に隠れてしまう問題があります。この問題を解決する方法としてscroll-padding-topが広く知…
続きを読む

スマホとPCで別々のスタイルを適用するJavaScript
-JavaScriptのパフォーマンス最適化-

JavaScript
レスポンシブサイトを制作していると、「スマホとPCで画像もデザインも全く違う」「1箇所だけ別のスタイルを適用したい」といった場面に遭遇することがあります。スマホとPCで画像サイズが…
続きを読む

URLパラメータで配列を渡す3つの方法と、WAFで真っ白になる問題の解決策

PHP
Web開発でフィルター機能を実装する際、URLパラメータで複数の値を渡したいケースはよくあります。例：複数の物件IDで絞り込み検索https://example.com/prope…
続きを読む

iPhoneでも動作！response.jsで実現する画像・動画・iframeのレスポンシブ遅延読み込み完全ガイド

JavaScript
Webサイトのパフォーマンス最適化において、画像や動画の遅延読み込み（LazyLoading）は必須のテクニックです。しかし、実際に実装しようとすると以下のような問題に直面します：…
続きを読む

3466個のDOM要素でも軽快に動作！大量データ表示のパフォーマンス最適化テクニック

JavaScript
MaterialSymbolsの全アイコン（3466個）を一覧表示するWebページを作成していた際、深刻なパフォーマンス問題に直面しました。各アイコンにコピー機能を付けるため、全て…
続きを読む

Swiperの自動再生が「なぜ」止まるのか？
本質から理解する設定ガイド

JavaScript
「Swiperの自動再生が止まります...」との報告を受けました。コードを確認すると間違いなくautoplay:trueは設定されています。しかし、ブラウザで動作確認をすると、最初…
続きを読む

キャッシュクリアをするJavaScript「cache-cleaner.js」

JavaScript
Web開発をしていると、クライアントから「画像が変わっていない」「レイアウトが反映されない」といった報告を受けることがよくあります。その度に「ブラウザのキャッシュを削除してください…
続きを読む

キャッシュとストレージとセッションの違い、キャッシュをクリアするJavaScript

JavaScript
ウェブ開発をしていると「キャッシュ」「ストレージ」「セッション」という似たような言葉が頻繁に登場します。これらはすべてデータを保存する仕組みですが、それぞれ異なる特性と用途がありま…
続きを読む

内部リンク先のページを、モーダルで開くJavaScript

JavaScript
Webサイトで内部ページへのリンクをクリックした際、新しいページに遷移するのではなく、モーダル（ポップアップウィンドウ）で表示する仕組みを作成しました。WordPressのCont…
続きを読む

JavaScriptで目次生成「inppend-toc.js」
- スクロール連動・アクティブハイライト対応 -

JavaScript
今回は、シンプルなHTMLとJavaScriptだけで、Webページに目次（TOC:TableofContentsの略）を実装、見出しから目次を自動生成できるJavaScriptラ…
続きを読む

【JS】クリック時とホバー時にそれぞれ対応するJavaScriptアコーディオン

JavaScript HTML/CSS
Webサイトでよく使われるアコーディオン機能。今回は、クリック時とホバー時の両方に対応し、かつdetailsタグでもWordPressメニューでも使える汎用性の高いアコーディオンを…
続きを読む

Swiperのautoplay（自動再生）が止まらないようにする方法

JavaScript
はじめにSwiperの自動再生機能を使用する際、disableOnInteraction:falseを設定しても、時々スライドが止まってしまう問題に遭遇することがあります。この記事…
続きを読む

カスタマイズ可能なテキスト変換ツールの実装

JavaScript
はじめにWeb開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツー…
続きを読む

dialogタグを使用したシンプルなモーダルの実装方法

JavaScript
はじめにWebサイトやアプリケーションでよく使用されるUIパターンの一つに「モーダル」があります。モーダルは、ユーザーの注意を特定のコンテンツに集中させるために使用される重要なUI…
続きを読む

複数の画像をSwiperでのライドショーで表示するモーダルの実装方法

JavaScript
はじめにウェブサイトでギャラリーや商品紹介などを行う際、複数の画像をスライドショー形式で表示するモーダルは非常に有効です。今回は、Swiperライブラリを使用して複数のスライド可能…
続きを読む

画像パスを動的に変更するJavaScriptテクニック

JavaScript
はじめにWebサイト開発において、画像パスを動的に変更する必要が生じることがあります。今回は、テスト環境と本番環境で画像パスが異なる場合に、JavaScriptを使用して動的に画像…
続きを読む