JavaScriptDOM（要素）の変更や更新を検知するベストな方法〜MutationObserver APIの使い方【JavaScriptガイド】
最近、仕事でDOMが変更されたときにコードを発火したい場面が多く、クリック時やajaxで内容の更新などのタイミングでその都度似たようなメソッドを仕込むのが面倒になることがありました。特に大量のiframeを扱う必要があったので、1ヶ所１ヶ所...
jQuery
JavaScript
JavaScript【初心者向け】JavaScriptでモーダルウィンドウの作成方法と注意事項、サンプルコード
JavaScriptで書ける基本中の基本のギミックにモーダルウィンドウという効果があります。画像をクリックすると全画面で黒背景に大きな画像が表示され、視認性をよくするためのあれです。 HTMLコーダーにはモーダル、と聞くとアレルギー反応を起...
JavaScript【JavaScript】イベント処理関数addEventListener()の使い方、引数の使い方
addEventListener()は、JavaScriptでイベントリスナーを追加するためのメソッドです。イベントリスナーとは、特定のイベントが発生した際に呼び出される関数であり、ユーザーのアクションやWebページの状態の変化など、様々な...
JavaScriptJavaScriptにおけるイベントオブジェクトとは何か？引数eについても解説【function(event)】
JavaScriptにおけるイベントオブジェクトとは、ユーザーがブラウザ上で起こしたアクション（例えば、クリック、キー入力、マウス移動など）に関する情報を含んだオブジェクトのことです。 と、このように説明しても何が何やら分かりにくいと思いま...
JavaScriptクリックイベントで要素の中に含まれる特定の要素を除外したいときの対処法【JavaScript】
JavaScriptでclickイベントを検知するには要素.addEventListener('click', function(){…を使いますね。ですが要素の中にある特定の要素では発火して欲しくない場合が時々あります。 たとえば AB ...
JavaScriptPinterest風のグリッドレイアウトをCSSのみで実装？乗り越えられない壁、代替策はないのか？Pinterstレイアウトを考察
Webに携わっている方は必ず一度は「Pintarestっぽく出来ませんか？」的なことを言われると思います。僕個人としてはPintarestのようなグリッドレイアウトはあまり好みではありません、なんせ「めんどくさい！」から。 Pintares...
JavaScriptslick.js（カルーセルスライダー）の要素をスマホでピンチイン・拡大したい場合
slickスライダーを使用しているとスマホでピンチイン（拡大）出来なくて困ることがあります。 以下のサンプルはピンチイン出来ないままの状態です。 jQuery(function($){ $('.slider-01').slick({ cen...
JavaScript【2022, 2023年】JavaScript入門ガイド～初心者のためのポイント解説
JavaScriptに興味を持ってこのページをご覧になっている方は、HTMLは理解できたけどJavaScriptが分からない、もしくはデザイナーだけどプログラミングを始めてみたい、といったような初心者さんだと思います。 はじめに言っておくと...
JavaScript2022年、今さら要素をタイル状に配置するmasonry.jsの使い方・レイアウトサンプル
かなり前にNHK関連のWebサイトが起用して話題になったjQueryプラグインのmasonry.jsですが、最近グリッドレイアウトを利用する必要がありそうな気配なので、おさらいを兼ねてmasonry.jsについてまとめました。 早速maso...
JavaScriptJavaScriptを使ってクロスドメインの埋め込みiframeを更新（リロード）する方法
iframeはブラウザの仕様上、クロスドメイン（呼び出すHTMLが自分のドメイン上に無いこと）の場合にはjQueryでもJavaScriptでも操作が出来ません。 ただ、iframeを更新したい時にはちょっぴりイレギュラーな方法でリロードさ...
JavaScriptjQueryにおけるeach()文とは？基本的なループの使い方と注意点
※JavaScriptのforEach()については『JavaScriptにおけるforEach()とは？基本的なループの使い方と注意点』をご参照ください。 配列の内容を関数で処理する際に、jQueryではeach()を、プレーンなJava...
JavaScriptJavaScript、jQueryでブラウザのタブがアクティブ（非アクティブ）になったか判別/検知する方法
通常のサイト、いわゆるホームページを作成するときにはあまり意識しないですが、Webアプリケーションやブラウザ駆動のアプリケーションを作る時には意外と知っておく必要があります。 まずは、JavaScript（jQuery含む）ではブラウザで現...
JavaScript【JavaScript】イベントにおけるバブリング（bubbling）とは？挙動と、停止する方法
JavaScript中級者ともなると、バブリングという言葉を耳にしたことはあるはずです。文字通り英語では「Bubbling」と書き、泡が水面まで登っていく様子を模したプログラム用語です。 悩見坂 楓 バブリングってあれか、MJが飼ってたおさ...
JavaScript【意外と知らない】jQuery.fn.on()の引数にドットを用いて名前空間を表現する方法
廃れそうで廃れないjQueryですが、まだまだ知らないことが多かったりしませんか？？今回はjQuery.fn.on()のイベントに名前空間を付けて管理できるという少々上級者向きな内容になります。 悩見坂 楓 名前空間って何よ、ネカフェの店名...
JavaScriptJavaScriptにおける「$（ドルマーク）」の意味と使い方
JavaScript内で使用される「$（ドルマーク、ダラー）」には4通りの利用シーンがあります。1つは、文字列で使用される場面、2つ目はjQuery関連、3つ目はテンプレートリテラル内での使用、そして4つ目は正規表現の中です。 それぞれの利...