JavaScriptのstyle.displayでモーダル
JavaScriptの style.display で、要素のdisplayプロパティを変更できます。この記事では、そのプロパティでモーダルを作ります。 style.display style.displayは、要素のd …
JavaScriptの.classList.toggle()でアコーディオン
JavaScriptの .classList.toggle() を使ってアコーディオンを作ります。 .classList.toggle() .classList.toggle() は、classの追加・削除ができるプロパ …
JavaScriptの.replaceで文字列の置換
.replace メソッドで、指定した文字列を任意の文字列で置換します。 .replace .replaceメソッドは、指定した文字列を検索し、見つかった文字列を別の文字列に置換します。 Excelに同じ「REPLACE …
JavaScriptの.addEventListenerのスクロールでclassの追加と削除
マウスクリックや画面をスクロールした時に、.addEventListener で状態を取得してDOM操作をします。 .addEventListener .addEventListenerは、「マウスクリック」や「他のペー …
JavaScriptの.classListを使ったclassの削除や追加
.classList で、要素のclassを削除したり、追加したりすることが可能です。 .classList .classListで、classを操作します。 内容 メソッド classの削除 .classList.re …
JavaScriptの.remove()で要素の削除
.remove() を使うことで要素の削除が可能です。ここでは、JavaScriptの.remove() を使ったサンプルと合わせて解説します。 .remove()を使ったサンプル まずはじめに、.remove() で要 …
スライダーの超定番ライブラリSwiper.jsの基本と使い方
スライダー・カルーセルは、複数の選択肢やコンテンツを列で表示させるUIで、限られたスペースにたくさん表示させたい時によく使われます。 この記事は、スライダー・カルーセルUIの超定番とも言えるSwiper.jsについて解説 …
jQueryのコピペでヘッダーにアニメーションをつけて固定表示させるスニペット
ヘッダーは、主にページの上部に位置するコンポーネントで、サイトやブログなら各メニューを表示したり、どのページが開かれても常に共通して表示されます。 この記事は、そんなヘッダーを少しカスタマイズするスニペットで、特にブログ …
プラグインなしで記事毎のbody閉じタグ前にJavaScriptのコードを出力させるフィールドを作るスニペット
JavaScript（以降JSと省略します）を記述する場所は、<body>〜〜</body>タグの最後(クロージングタグ前)に書くことが推奨されています。 この記事で紹介するスニペットは、コピペするだけで記事 …
WP REST APIをReactでWordPressの記事一覧を表示させるスニペット [React版]
以前の記事では、jQueryとWP REST APIを使って記事一覧を表示するスニペットを紹介しましたが、今回はAPIでReactを使った記事一覧の方法について解説していきます。 関連記事 WP REST APIのJav …
