javascript

jQueryで要素をコピーする方法

jQueryには便利な「clone()」関数というのがある。この「clone()」を使って簡単にDOMをコピーすることができるんです。下のHTMLからjQueryを使ってDOMを取得します。jQuery// をコピーvar title = ...
javascript

【jQuery】「エンターキー(Enter)が押されたらを取得する方法

メール送信時や、様々なインプット要素でボタンを押させずに「エンター(Enter)」で次へ行けるとめちゃスムーズ。そんなスムーズにインプットしてもらうための方法のご紹介です。3つありますが、どれも結果は変わらないので好きなものを利用してくださ...
javascript

【jQuery】コピペで実装!アコーディオンメニュー3選

アコーディオンメニューをコピペで実装できるサンプル3つを用意しました。3つ共にアコーディオンメニューは、数を増減しても同じように機能します。また「position:absolute」で高さを無くした状態になっています。アコーディオンメニュー...
javascript

【jQuery】リンク(aタグ)を無効化&少し待ってからリンク先へ飛ぶ方法

リンクをクリックしても、飛ばないようにする方法とリンクをクリックした後、少し待ってから遷移する方法のご紹介です。まずは、クリックしても飛ばないようにする方法です。リンク(aタグ)を無効化するHTML<a class="demo" href=...
javascript

【jQuery】CSS変数をjQueryで利用する方法

CSSで指定したCSS変数をjQueryで利用する方法のご紹介です。jQueryで変数作っちゃっても良いけど、そうできない時もある。例えば、、、、ん~あるかなぁ。jQueryで変数作れない時は、あるっ!としてCSS変数を書き換える方法です。...
CSS

【CSS】変数を利用して共通の要素をひとまとめにする方法

CSSで変数を指定することが出来ないから「SCSS」を利用していましたが「CSSだけでも変数を扱える!」と聞いてびっくりしました。CSS変数の扱い方:root{ --color: red;}.demo { background: var(-...
CSS

【CSS】selectの枠線・矢印を消す方法

CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。そんな枠線、矢印を消す方法のご紹介です。selectの枠線を消すCSSselect { outline: none;}あまり聞いたことないスタイルプロパティの「outline」...
CSS

CSS内で外部CSSを読み込む方法

リセットCSSなどの絶対必要だけど忘れがちなCSSファイルは、CSSでサクッとインポートしちゃいましょう!書き方は以下の通りです。CSS@import url("reset.css");外部CSSのインポートは複数書いても問題ありません。で...
javascript

Yes/No診断テストをjQueryで作りました!ダウンロードですぐに利用可能

いつも当ブログを見てくださりありがとうございます!「Yes/No診断テスト」を自由に使っていただけるよう、jQueryで作成しました。Yes/No診断テスト本バージョンでは、Yesの数を合計した結果を表示していますが、各質問の回答で結果を分...
javascript

【jQuery】複数の数値から最大値・最小値を出す方法

jQueryで沢山の数値から最大値や最小値を出す方法のご紹介です。jQuery// 最大値を出すMath.max(100, 2, 44, 39, 87);// 「100」が出力される// 最小値を出すMath.min(49, 20, 300...
javascript

【jQuery】数値から文字列、文字列から数値へ変換する方法

jQueryで数値から文字列に変換したり、文字列から数値へ変換する方法のご紹介です。js上で計算する時、足し算したいだけなのに「"1" + 1 = 11」になったりする時あって困っちゃう。そんな時は、下の方法ですぐ解決しよう!jQueryv...
CSS

CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう!

海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。CSSだけでで...
javascript

【jQuery】ローカルストレージへの保存方法と、遷移後に読み込む方法

phpを使わずに、jqueryだけで遷移前の値を保持したい場合、クッキー(cookie)を使うかローカルストレージ(localstrage)を使うか迷う時がある。自分の場合は、クッキーには数キロバイトしか保存できないから、大体ローカルストレ...
javascript

【jQuery】配列・連想配列の数を取得する方法

jQueryで配列の数を取得するには「.length」を使い、連想配列の数を取得するには「Object.keys」と「.length」ます。下のjQueryが利用方法になります。jQuery// 配列の数を取得var demo1 = ;co...
javascript

jQueryで1回だけ実行するイベントを設置する方法

jQueryで1回だけ処理をする場合、便利な「one」メソッドというのがある。「one」メソッドとは、メソッド名のままですが「1度だけ」実行する処理のことを言います。処理を繰り返したくない時などに有効です。一度しか押せないボタンの作り方実際...