JavaScript 【JavaScript】フォーム入力内容をローカルストレージに保存する方法｜リロードしても消えない！
Webアプリやフォームで、ユーザーが入力した内容がページをリロードすると消えてしまう経験はありませんか？localStorage を使えば、入力中の内容をブラウザに一時保存して、次回アクセス時にも復元できます！この記事では、JavaScri...
JavaScript
JavaScript 
JavaScript 【JavaScript】IntersectionObserverでスクロール時に要素をふわっと表示させる方法
スクロールして画面内に入った要素が「ふわっ」と表示される演出は、今や多くのWebサイトで使われています。このような効果は、従来jQueryのscrollイベントで実装されてきましたが、現在はブラウザネイティブのIntersectionObs...
JavaScript 【JavaScript】ページ読み込み後に一度だけ実行される処理の書き方
Web制作の中で「ページを開いたときにだけ実行したい処理」が必要になることはよくあります。例えば、初回だけモーダルを表示したり、アニメーションを流したりするケースです。この記事では、JavaScriptでページ読み込み時に一度だけ処理を実行...
JavaScript 【JavaScript】1行で書ける便利テクニック10選
JavaScriptでは、少し工夫するだけでコードを1行にまとめることができます。短くシンプルなコードは可読性を上げたり、開発効率を高めたりするのにとても役立ちます。この記事では、覚えておくとすぐ使える1行テクニックを厳選して紹介します！三...
JavaScript 【JavaScript】アンカーリンクのスムーススクロールを実装する方法
Webページ内で特定のセクションにスムーズにスクロールさせたい場合、JavaScriptを使うことで簡単に実装できます。本記事では、jQueryを使わずに、純粋なJavaScriptでスムーススクロールを実装する方法を紹介します。scrol...
JavaScript 【JavaScript】フォーム送信時に全角スペースを半角スペースに変換する方法
フォームの入力内容をサーバーに送信する際に、全角スペースを半角スペースに変換することで、データの正規化や無駄なスペースを防ぐことができます。この記事では、JavaScriptを使って送信ボタンが押された際に自動的に全角スペースを半角スペース...
JavaScript 【JavaScript】スマホでクリックイベントが動作しない場合の原因と解決方法
JavaScriptでclickイベントを実装したのに、スマホではうまく動作しないという経験はありませんか？この記事では、スマホ環境でclickイベントが動作しない主な原因と、その解決方法について詳しく解説します。タッチイベントとクリックイ...
JavaScript 【JavaScript】親要素を取得する方法
JavaScriptでは、指定した要素の親要素を取得する方法として、parentElementおよびparentNodeプロパティを使用します。この記事では、これらのプロパティを使って親要素を取得する方法について詳しく解説します。paren...
JavaScript 【JavaScript 】要素が画面内にあるかどうかを判別する方法
Webページ上の特定の要素が、ユーザーのスクロールによって画面内（ビューポート内）に表示されているかどうかを判別する方法は、インタラクティブな機能を実装する際に非常に役立ちます。例えば、画像を遅延読み込みしたり、スクロール時にアニメーション...
JavaScript 【JavaScript】Micromodal.jsで簡単にモーダルを実装する方法
モーダルウィンドウは、ウェブページ上でユーザーに対して特定のコンテンツを強調するためによく使われます。Micromodal.jsは、軽量でシンプルなモーダルウィンドウを実装するためのライブラリです。この記事では、Micromodal.jsを...
JavaScript 【JavaScript】指定した要素が一定数以上ある場合にアコーディオンを実装する方法
ウェブページ上で、アイテムが多すぎて全てを一度に表示するのが難しい場合があります。そんな時、アコーディオン（折りたたみ機能）を使用すると便利です。この記事では、JavaScriptを使って、指定した要素が一定数以上ある場合に残りの要素をアコ...
JavaScript 【JavaScript】Intersection Observerを使った画像の遅延読み込み方法
ウェブサイトのパフォーマンスを向上させるために、画像の遅延読み込み（Lazy Loading）は非常に有効なテクニックです。この記事では、Intersection Observer APIを使用して、画像の遅延読み込みを実装する方法を詳しく...
JavaScript 【JavaScript】createDocumentFragment() を使った複数要素の効率的な追加方法
JavaScript では、DOM (Document Object Model) を操作する際に、パフォーマンスを考慮した手法を使うことが重要です。その中で、createDocumentFragment() メソッドは、複数のノードを効率...
JavaScript 【JavaScript】初回訪問時のみ要素を表示する方法
ウェブサイトやブログで、ユーザーが初めて訪問した際にだけ特定のメッセージや要素を表示したいと思うことはありませんか？これを実現するために、JavaScriptとlocalStorageを利用する方法をご紹介します。localStorageは...
JavaScript 【JavaScript】ドロップダウンメニューを作る方法
JavaScriptでドロップダウンメニューを作成する方法を紹介します。この方法は、基本的なHTMLとCSSを使用してドロップダウンメニューを構築し、JavaScriptでインタラクティブな機能を追加するものです。HTMLの準備まず、HTM...
JavaScript 【JavaScript】breakでループ処理を中断させる方法
break文は、ループ処理を途中で中断し、ループを終了させるために使用されます。forやwhileといったループ内で特定の条件が満たされた場合、breakを使うことで、それ以降のループ処理を実行せずにループを抜けることができます。基本的な使...
JavaScript 【JavaScript】getElementsByClassName で取得した要素にループ処理を行う方法
JavaScript で特定のクラス名を持つ要素を一括で操作したい場合、getElementsByClassName メソッドが便利です。しかし、このメソッドで取得した要素は HTML コレクションとして返され、配列とは異なるため、直接 f...
JavaScript 【JavaScript】ハンバーガーメニューの作り方
ハンバーガーメニューは、特にモバイルサイトでよく使用されるナビゲーションメニューの一つです。画面の限られたスペースを有効活用するため、メニューアイコンをクリックするとナビゲーションメニューが表示される仕組みです。ここでは、シンプルなハンバー...
JavaScript 【JavaScript】IntersectionObserverを使って複数要素にスクロールイベントを設定する方法
IntersectionObserver を使用することで、ウェブページのスクロールイベントに応じて要素の表示状態を簡単に管理できます。複数の要素が画面に現れたり消えたりするタイミングでアクションを実行する方法について詳しく解説します。In...
JavaScript 【JavaScript】要素をふわっとフェードインさせる方法
Webページに動きのある演出を加えると、ユーザーの興味を引くことができます。その中でも、要素が徐々に現れるフェードイン効果は、シンプルでありながら効果的です。この記事では、JavaScriptを使って要素をふわっとフェードインさせる方法を紹...