オブジェクトのすべてのメソッドを一覧で見たいという時がよくあるのですが、残念ながら現時点ではそのような手法はJavascriptに組み込まれてないようで、自分で実装する必要があります（2024年2月24日時点）。 当記事 […]
Swiper.jsの読み込みコストをゼロにする
Swiper.jsはオプションが豊富で魅力的なスライダーライブラリの一つですが、一つだけ弱点としてファイルサイズが大きく、入れるとサイトが重たくなるという事が挙げられます。 当記事ではこのSwiper.jsの唯一の弱点を […]
Swiper.jsの使い方とカスタマイズ方法
Webサイトを開発していると必ずと言っていいほどスライダーを作る機会が出てくると思います。そんな時の一つの選択としてSwiper.jsはおすすめのライブラリと言えます。 jQuery非依存で、オプション豊富で、カスタマイ […]
【Swiper】スマホ(SP)のみスライダーにする方法
Swiper.jsを使ってスマホ(SP)の時のみスライダーにする方法について記します。 外側からスライダーの解除/生成をする記事を多く見かけたのですが、Swiperのオプション内で解決したかったので模索した結果、違う方法 […]
【Swiper】PCとSPで表示枚数を切り替える【レスポンシブ】
当記事では、Swiper.jsのbreakpointsオプションを使用して、表示枚数をPCとSPでレスポンシブに切り替える方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていた […]
Swiper9と10でloop×slidesPerViewが動かない件
Swiper.jsのバージョン9と10でオプションのloopとslidesPerViewを併用すると、loopが効かない（止まる）という現象が発生します。この現象の原因と解決策について記します。 推定原因と発生条件 わた […]
HTMLとCSSのみでモーダルウィンドウは作成できるか
モーダルウィンドウをHTMLとCSSのみで作成する方法を色々と模索しましたので、やってみた所感と、その備忘録を記します。 モーダルウィンドウはHTMLとCSSのみで作成できるか 結論から申しますとモーダルウィンドウはHT […]
HTMLとCSSのみでアコーディオンメニューを作成する
当記事ではアコーディオンメニューをHTMLとCSSのみで作成する方法について記します。 ⓪アコーディオンメニューの完成イメージ 下記のようなクリックでゆっくり開くアコーディオンメニューをHTMLとCSSで実装することを目 […]
HTMLとCSSのみでハンバーガメニューを作成する
当記事では、ハンバーガーメニューをHTMLとCSSのみで作成する方法についてステップ・バイ・ステップで解説します。 ⓪完成イメージ 下記のようなクリックしたら横からメニューがスライドインしてくるハンバーガーメニューをHT […]
【CSS】トグルボタンの作り方とデザインサンプル５選
当記事ではHTMLとCSSのみでトグルボタンを作る方法とデザインサンプルを5選紹介します。 ①HTMLでパーツを用意 作り方の方向性として、チェックボックスの機能を使いつつ、divタグでトグルボタンを作ることにします（チ […]
