Web制作 JavaScriptのHTMLCollectionとNodeListの違い
HTMLCollectionとNodeListは、どちらもDOM（Document Object Model）を操作する際に、複数の要素を取得するためにJavaScriptで利用されるオブジェクトコレクションです。しかし、それぞれの特徴や使...
JavaScript
Web制作 
Web制作 【jQuery】slick.jsに一時停止機能をつける
slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。HTML<div class="slider"> <div><img src="image1.jpg" alt=""></div> <div>...
Web制作 【HTML・CSS・JavaScript】aタグのリンクを無効にする
aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。HTMLの...
Web制作 【JavaScript】いろいろな月末/月初・年末/年始の日付を取得する
JavaScriptで、任意の日付を起点として色々な月末・月初や年末・年始の日付を取得する方法です。起点とする日付を指定// 今日を起点にする場合const date = new Date();// 任意の日付を起点にする場合const d...
Web制作 【JavaScript】Dateオブジェクトで現在の年月日を取得したいが時刻はいらない場合
Dateオブジェクトで今日の年と日付を取得したいが、時刻は00:00:00にしておきたいときの処理です。new Date(new Date().toDateString());new Date()で現在の日時を取得し、それをtoDateSt...
Web制作 【JavaScript】sort()で連想配列をソートする
sort()は、配列の要素を並び替えるメソッドです。引数を指定しない場合、配列内の各要素を文字列に変換して昇順で並び替えます。また、並び替えた新しい配列を返すのではなく対象の配列そのものを変更します。ソートの基準が1つpointでソートする...
Web制作 【Swiper】ズームしながらフェードで切り替わるスライダーを実装する
JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。Swiperの読み込み通常通りSwiperのCSSとJavaScriptを読み込みます。<link rel="styleshe...
フォーム Google reCAPTCHA V3を導入する
PHPメールフォームの場合です。1. シークレットキー・サイトキーを発行するGooglereCAPTCHAの管理画面でドメインを指定し、 シークレットキーとサイトキーを発行します。reCAPTCHA管理画面reCAPTCHAタイプはV2かV...
Web制作 JavaScriptでスクロールを監視するならIntersection Observerが便利
Intersection ObserverとはIntersection Observerは、特定の領域を監視して、監視対象の要素がその領域に交差したかどうかを検知します。デフォルトでは、viewport（見えている範囲）とある要素が交差した...
Web制作 JavaScriptの同期通信でPHPとJSONデータをやりとりする
PHPから返ってきた結果ををreturnしたいときなど、どうしても非同期ではなく同期通信でやりたいとき用です。下記のようにXMLHttpRequestのrequest.openの第三引数をfalseにすることで同期通信が可能です。const...