javascript【jQuery】トップへ戻るボタンをコピペで実装！
下へスクロールするとヒョイッとでてくる「トップへ戻る」ボタンをコピペで実装しよう！ ボタンの形を複数作ったので好きなCSSをコピーして使ってね！ ではまず共通のHTMLとjQueryです。 HTML <div class="up"&g...
jQuery
javascript
javascript【jQuery】隣の要素・兄弟要素の取得方法
ボタンを押したら、隣の要素にクラスを付けたり外したり色々便利な兄弟要素の取得方法のご紹介です！ jQueryで取得する書き方が色々とあるので、それぞれの動きをデモで確認しよう！ デモ 「ワタシ」から見て兄弟要素をアラートするよ ネ...
javascript【jQuery】VRトラッキングみたいに、カーソルを丸くしクリックアクションを追加する方法
カーソル(cursor)を矢印ではなく丸くし、クリックでポワンっと広がるアニメーションを追加する方法を説明！ この～。。。なんて言うんだろう？ 「カーソルが好きな形に変化するや～つ（仮名）」がサイトに実装されてると「こだわってる！」感があ...
javascript【jQuery】〇文字以上「…」をコピペで簡単設置！
ブログでよくある本文の省略機能だけど、自分で作ると結構手間だよね。 何かサービス作る時とかよく使うから、このページを覚えとくと便利！ じゃ～まずデモだよ。 15文字以上はカットしてその後点々デモ 15文字以降は点々で切るからそれ以上は書かな...
javascript【jQuery】パーセントの計算方法
特定数Aは特定数Bの何パーセントか？ 特定の値は全体の何パーセントか？ コーディングしていると、パーセントでの数値を求めたい時があります。 僕は根がバカなもので、中学校の数学の問題でも求め方が分からなくてしばらく検索しちゃう。 このパーセン...
CSS【コピペOK！】ON/OFFスイッチのデザイン７個｜iOS風スイッチもあるよ！
フォームやインタラクティブなサイトで使えるON/OFFのトグルスイッチのデザイン7つのご紹介。 シンプルなものなので様々な所で利用できるトグルスイッチ７つを作ってみたので ぜひぜひコピペして利用してくれたら嬉しいです！ チェックボックスは見...
javascript【jQuery】コピペでスクロール値を常に画面に表示させる
スクロールアニメーションを作る時に、スクロール値をコンソールで確認するのも良いけど そうするとHTMLやCSSがブラウザ上で編集しずらくなる。 それなら画面にスクロール値だけ表示しておけば便利じゃん！と思いました。 でもこれ最終的に消し...
javascript【jQuery】特定クラスがリストの何番目にあるかを取得！
リストの特定クラスが何番目にあるのかの取得方法をご紹介。 var number = $('.sample').index('ul li'); 「$('.sample')」に番号を取得したい特定のクラスやIDを書いて、「.index('ul...
javascript【jQuery】iOS・iPadOSでスクロールすると発生するリサイズ処理を止める方法
iPhone（iOS）のSafariでスクロールするとリサイズ処理が走るのやめて欲しい。 実機でしか確認できないので、忘れる時があるから困っちゃう。 この厄介なリサイズ処理問題の原因は、スクロールすると Safariのアドレスバーが小さく...
javascript【jQuery】offset().topエラーになる原因
jQueryでトップからの位置を取得する「offset().top」ですが、 chromeの開発ツールで確認するとたまにエラーになる時がある。 ちゃんと取得してたはずなのに、なんでこんな表示が出てるの？って思うけど 気にしないでいいかなと...
javascript【jQuery】スクロールの上下方向を検知・判定する方法
ページを作成しているとスクロールで変化させたいことって結構あります。 スクロールしたら特定の位置で固定したり要素が見えたら表示したり。 今回は上下にスクロールしたらを検知・判定のご紹介です。 まずはデモで動作の確認をしてください。 下ス...
javascriptjQueryで後ろからｎ番目を取得する方法
jQueryを使って後ろからｎ番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。 疑似クラスで最初、最後、n番目や奇数、偶数を指定｜CSS jQuery // 取得したい要素と数字 var li...
javascriptjQueryで要素をコピーする方法
jQueryには便利な「clone()」関数というのがある。 この「clone()」を使って簡単にDOMをコピーすることができるんです。 下のHTMLからjQueryを使ってDOMを取得します。 jQuery // をコピー var tit...
javascript【jQuery】「エンターキー(Enter)が押されたらを取得する方法
メール送信時や、様々なインプット要素でボタンを押させずに「エンター(Enter)」で次へ行けると めちゃスムーズ。 そんなスムーズにインプットしてもらうための方法のご紹介です。 ３つありますが、どれも結果は変わらないので好きなものを利用して...
javascript【jQuery】コピペで実装！アコーディオンメニュー３選
アコーディオンメニューをコピペで実装できるサンプル３つを用意しました。 ３つ共にアコーディオンメニューは、数を増減しても同じように機能します。また「position:absolute」で高さを無くした状態になっています。 アコーディオン...