CSS 【CSS】:notで複数の要素を指定する方法
CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。 そんな時に使うのが疑似要素の「:not」です。 例えばリストの最初の要素以外を指定する時は「li:not(:first-child)...
CSS 
javascript 【jQuery】iOS・iPadOSでスクロールすると発生するリサイズ処理を止める方法
iPhone（iOS）のSafariでスクロールするとリサイズ処理が走るのやめて欲しい。 実機でしか確認できないので、忘れる時があるから困っちゃう。 この厄介なリサイズ処理問題の原因は、スクロールすると Safariのアドレスバーが小さくな...
javascript 【jQuery】offset().topエラーになる原因
jQueryでトップからの位置を取得する「offset().top」ですが、 chromeの開発ツールで確認するとたまにエラーになる時がある。 ちゃんと取得してたはずなのに、なんでこんな表示が出てるの？って思うけど 気にしないでいいかなとも...
CSS 【CSS】ボヤけた画像をパキッとさせる方法
書き出したサイズより小さく表示してるのに、なぜか画像がボヤける。 そんなボヤけた画像をCSSで即解決する方法をお教えします！ CSSのテンプレートに追加しとくと今後検索しなくて済む。 img { -ms-interpolation-mode...
javascript 【jQuery】スクロールの上下方向を検知・判定する方法
ページを作成しているとスクロールで変化させたいことって結構あります。 スクロールしたら特定の位置で固定したり要素が見えたら表示したり。 今回は上下にスクロールしたらを検知・判定のご紹介です。 まずはデモで動作の確認をしてください。 下スクロ...
CSS 【CSS】「fixedで固定されない⁉」を速攻解決する方法！
固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。 親要素に「transform: translate3d(0,0,0)」を指定してる！ 親要素に「tr...
javascript 【jQuery】フォームの入力チェック|バリデーション
フォームのバリデーションって作るの結構手間だよね。 チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん！ だからコピペ用に作りました。ご自由にどうぞ！ デモフ...
CSS cssアニメーションがカクカクするのを防ぐ方法
CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介！ 「will-change」でGPUを使って高速処理 「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる...
javascript jQueryで後ろからｎ番目を取得する方法
jQueryを使って後ろからｎ番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。 疑似クラスで最初、最後、n番目や奇数、偶数を指定｜CSS jQuery // 取得したい要素と数字 var lis...
CSS ホバーした時にCSSだけで出来る様々な画像切り替え方法｜その２
CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。 前回ご紹介した画像切り替え方法が検索ロボットに気に入ってもらえたので もっともっと沢山のホバー演出をコピペで出来るように作りたいと思います。 今回も基本のHTMLは同じものを利用...
javascript コピペで簡単！高機能スライダー[Swiper.js v6]の使い方｜Javascript
自力でスライダーを設置するのは簡単だが、スライダーの「当たり前」機能を付けるのがすごい手間だったりする。 「レスポンシブ対応」や「スワイプやマウスオーバーでの操作」、「スライドの数が増えた時のスクリプト、スタイルの修正」、「Next,Pre...
CSS 【CSS】iOS風すりガラスエフェクトを背景に実装｜Fire fox、IE11対応｜backdrop-filter
特定エリアだけ背景がぼやけて表示されるCSSについてのご紹介です。 「backdrop-filter: blur(12px)」を使えば特定エリアの背景のみをぼかす（blur）させることができます。 でも2021年3月現在、ブラウザの対応状況...
CSS 【CSS】特定ブラウザだけに効くCSSの書き方｜IE10以下、IE11、Firefox、Chrome、Safari、EDGE、Opera
特定ブラウザだけに適応するCSSの書き方のご紹介です。 「IE11だけ表示がズレる」とか「FireFoxだけフォームが変」とか、「Safari」のみに対応した書き方とか、「Opera」。。。オペラはなんかあるかな。。。 そんな特定ブラウザだ...
javascript jQueryで要素をコピーする方法
jQueryには便利な「clone()」関数というのがある。 この「clone()」を使って簡単にDOMをコピーすることができるんです。 下のHTMLからjQueryを使ってDOMを取得します。 jQuery // をコピー var tit...
javascript 【jQuery】「エンターキー(Enter)が押されたらを取得する方法
メール送信時や、様々なインプット要素でボタンを押させずに「エンター(Enter)」で次へ行けると めちゃスムーズ。 そんなスムーズにインプットしてもらうための方法のご紹介です。 ３つありますが、どれも結果は変わらないので好きなものを利用して...
