JavaScriptの.addEventListenerのchangeイベントでチェックが付いたら送信可能になるボタン
問い合わせや会員登録、資料請求などなどWebサイトで使われているフォーム。 そんなフォームで規約を同意してもらいたい場合に、「規約同意」のチェックが入ってはじめて送信が可能になるフォームを、JavaScriptを使い作っ …
JavaScriptのsetTimeout()でスケルトンローディング
よくカードUIで見かけるスケルトンローディングを、JavaScriptのsetTimeout()を使って作ってみました。 スケルトンローディングは、ページのローディング時に各要素をローディング中であることが分かるようにす …
JavaScriptの.scrollTopでスクロールしたらヘッダーの高さ・大きさを可変
当サイトでも実装されている「スクロールでヘッダー可変」を、改めてネイティブなJavaScriptで作りました。 と言っても、「可変をするヘッダー」の実装はかなり簡単なコードで可能なので、参考にしてみてください。 Samp …
HTMLとCSSのコピペでビックリマンのキラキラシール風のスニペット
一世を風靡していたビックリマンも、最近では鬼滅の刃やキン肉マンのコラボなど、最近でもコンビニでビックリマンが置かれているのを見かけます。 この記事は、そんなビックリマンのシールをHTMLとCSSで作ってみようと始めた「思 …
JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー
ヘッダーなどのメニューによく使われるドロワー。このUIも数行のJavaScriptのコードで実装できます。 この記事では、ボタンクリックで画面を覆い隠す形のドロワーの作り方について解説します。 目次.style.widt …
JavaScriptのfor文を使ったループでボタンクリックの絞り込み検索
繰り返しの処理を行う場合、JavaScriptの for文 を使います。 今回は、比較的要素が多いシチュエーションで、この for文 を使った「絞り込み検索」のスニペットを紹介します。 目次for文のループボタンで絞り込 …
JavaScriptのsessionStorageでそのページへ初回アクセス時にモーダルを表示
あまりユーザーライクなものではありませんが、初回閲覧時に「モーダル」を表示するスニペットです。 既にこの記事をご覧の方はモーダルが表示されたと思いますが、そのサンプルについてのコードを交え解説していきます。 目次sess …
CSSのFlexboxで作るWordPressの記事一覧レイアウト6選
記事一覧に表示される記事のリンクには、投稿日や記事タイトルだけでなく、アイキャッチ画像や、概要文を載せているものがあります。 これらは、WordPressのテーマによってデザインやレイアウトがそれぞれ異なり、当サイトでも …
JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え
複数のボタンを設置して、どれかのボタンクリックで表示を切り替える時に、そのボタンを「ON」にする表示をネイティブのJavaScriptで書いてみます。 目次.classList.toggle()と.classList.r …
JavaScriptの.previousElementSiblingでボタンをクリックしてコンテンツを展開
ブログでよく見る「もっと見る」で記事を全展開するオブジェクトを、JavaScriptで作ります。 サンプルも交え解説していくので、是非参考にしてみてください。 目次.previousElementSiblingボタンクリ …
