JavaScript– tag –
-
【JavaScript】コピペでOK！ハンバーガーメニュー
この記事では、コピペで貼り付けるだけでハンバーガーメニューを実装できるコードを紹介、解説していきます！ 完成形 まずは、完成形を見ていきます！ 右側にあるハンバーガーメニューをクリック又はタップすると動作し、×に切り替わります。 詳細コードは... -
【JavaScript】jQueryを使ってお問い合わせページの入力チェック
この記事では、jQueryを使ってお問い合わせフォームの入力チェックを実装するプログラミングコードについて解説していきます。 完成形 まずは、完成形を見ていきます。お問い合わせフォームの各項目にそれぞれ記入して送信ボタンをクリックすると入力チェ... -
【JavaScript】一定の時間間隔で色が変わる信号機-setInterval使用
この記事では、JavaScriptのsetIntervalを使って一定時間間隔で信号の色を切り替えるプログラミングコードを解説します。 完成形 最初に完成形を見ていきます。緑、黄、赤の信号が３秒ごとに切り替わっています。 See the Pen javascript01 by aqua (@aqua... -
【JavaScript】クリックイベント
この記事では、JavaScriptのクリックイベントを実装するプログラミングコードについて解説します。 クリックすると青のボックスが赤に変わる See the Pen js01 by aqua (@aqua-programdiary) on CodePen. HTMLコード <div class="box"></div> CSSコ... -
【JavaScript】ホバーで切り替わる画像
この記事では、JavaScriptでマウスホバー又はスマホの画面タップで画像が切り替わるプログラミングコードを解説します。 完成形 まずは完成形を見ていきます。メインの画像とサブの画像が３枚あります。サブの画像をマウスでホバー又はスマホの画面をタッ... -
【JavaScript】バルーンアニメーション(Anime.js)画面中央から風船が広がるアニメーション
この記事では、JavaScriptのライブラリ『Anime.js』を使って風船が中央から外側に向かってランダムに広がるアニメーションを実装するプログラミングコードを解説していきます。 完成形 最初に完成形を見ていきます。画面の中央で作られた風船が外側に向か... -
【JavaScript】ふわっと切り替わる画像
この記事では、JavaScriptのsetIntervalを使って指定した時間ごとに画像をふわっと切り替えるプログラミングコードを解説していきます。 完成形 最初に完成形を見ていきます。３枚の画像がふわっと切り替わっています。 See the Pen js-03 by aqua (@aqua-... -
【簡単】ボタンクリック時の挙動・動作を無効化する方法/WordPress/JavaScript
WordPressのテーマなどを使用してサイトを作成していると、ボタンは設置したいけど、デフォルトの挙動・動作を無効化したい時があると思います。 そんな時に使える方法について紹介していきます。 javascript:void(0)による無効化 ボタンの動作を無効化す... -
スムーススクロール時にヘッダーの高さを考慮してスクロールさせるJavaScript【jQuery】コードの紹介
以前、idを使用してページ内遷移させる方法やスムーススクロールを実装するコードを紹介しましたが、前回の方法ではヘッダーが固定表示させている場合に、遷移後のセクションと被ってしまう不具合が生じます。 そこで今回はヘッダーの高さを考慮してスムー... -
IDを使って特定の要素へスクロールさせる方法とスムーススクロールを実装するJavaScriptコードの紹介
本記事では、IDを使って特定の要素へスクロールさせる簡単な方法と、スムーススクロールを実装するためのJavaScriptコード【jQuery】を紹介していきます。 IDを使って特定の要素へスクロールさせる方法 以下がIDを使ってスクロールさせるコードになります...
1