スポンサーリンク
CSS

cssアニメーションがカクカクするのを防ぐ方法

CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介! 「will-change」でGPUを使って高速処理 「will-change」を使うとアニメーションする前にブラウザに伝えてくれるので優先的に処理してくれる...
javascript

jQueryで後ろからn番目を取得する方法

jQueryを使って後ろからn番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。 疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS jQuery // 取得したい要素と数字 var li...
CSS

ホバーした時にCSSだけで出来る様々な画像切り替え方法|その2

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)」で次へ行けると めちゃスムーズ。 そんなスムーズにインプットしてもらうための方法のご紹介です。 3つありますが、どれも結果は変わらないので好きなものを利用して...
javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

いつも当ブログを見てくださりありがとうございます! 「Yes/No診断テスト」を自由に使っていただけるよう、jQueryで作成しました。 Yes/No診断テスト 再配布以外は著作権フリーで利用可能ですので、診断テストを作る機会がありましたら...
スポンサーリンク
タイトルとURLをコピーしました