CSS ホバーした時にCSSだけで出来る様々な画像切り替え方法｜その２
CSSだけでホバーした時に、様々な画像切り替え方法のご紹介。 前回ご紹介した画像切り替え方法が検索ロボットに気に入ってもらえたので もっともっと沢山のホバー演出をコピペで出来るように作りたいと思います。 今回も基本のHTMLは同じものを利用...
サイト制作
CSS 
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)」で次へ行けると めちゃスムーズ。 そんなスムーズにインプットしてもらうための方法のご紹介です。 ３つありますが、どれも結果は変わらないので好きなものを利用して...
javascript 【jQuery】コピペで実装！アコーディオンメニュー３選
アコーディオンメニューをコピペで実装できるサンプル３つを用意しました。 ３つ共にアコーディオンメニューは、数を増減しても同じように機能します。また「position:absolute」で高さを無くした状態になっています。 アコーディオンメニ...
javascript 【jQuery】リンク(aタグ)を無効化＆少し待ってからリンク先へ飛ぶ方法
リンクをクリックしても、飛ばないようにする方法と リンクをクリックした後、少し待ってから遷移する方法のご紹介です。 まずは、クリックしても飛ばないようにする方法です。 リンク（aタグ）を無効化する HTML <a class="demo" ...
CSS 【CSS】変数を利用して共通の要素をひとまとめにする方法
CSSで変数を指定することが出来ないから「SCSS」を利用していましたが 「CSSだけでも変数を扱える！」と聞いてびっくりしました。 CSS変数の扱い方 :root{ --color: red; } .demo { background: ...
CSS 【CSS】selectの枠線・矢印を消す方法
CSSでselectをデザインする時、邪魔だなと思う枠線と矢印。 そんな枠線、矢印を消す方法のご紹介です。 selectの枠線を消すCSS select { outline: none; } あまり聞いたことないスタイルプロパティの「out...
CSS CSS内で外部CSSを読み込む方法
リセットCSSなどの絶対必要だけど忘れがちなCSSファイルは、CSSでサクッとインポートしちゃいましょう！書き方は以下の通りです。 CSS @import url("reset.css"); 外部CSSのインポートは複数書いても問題ありませ...
javascript 【jQuery】複数の数値から最大値・最小値を出す方法
jQueryで沢山の数値から最大値や最小値を出す方法のご紹介です。 jQuery // 最大値を出す Math.max(100, 2, 44, 39, 87); // 「100」が出力される // 最小値を出す Math.min(49, 2...
javascript 【jQuery】数値から文字列、文字列から数値へ変換する方法
jQueryで数値から文字列に変換したり、文字列から数値へ変換する方法のご紹介です。 js上で計算する時、足し算したいだけなのに「"1" + 1 = 11」になったりする時あって困っちゃう。 そんな時は、下の方法ですぐ解決しよう！ jQue...
CSS CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう！
海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。 きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。 CSSだけ...
javascript 【jQuery】ローカルストレージへの保存方法と、遷移後に読み込む方法
phpを使わずに、jqueryだけで遷移前の値を保持したい場合、クッキー（cookie）を使うかローカルストレージ（localstrage）を使うか迷う時がある。 自分の場合は、クッキーには数キロバイトしか保存できないから、大体ローカルスト...
