当記事では、Swiper.jsのbreakpointsオプションを使用して、表示枚数をPCとSPでレスポンシブに切り替える方法について記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていた […]
【Swiper】PCとSPで表示枚数を切り替える【レスポンシブ】
Swiper9と10でloop×slidesPerViewが動かない件
Swiper.jsのバージョン9と10でオプションのloopとslidesPerViewを併用すると、loopが効かない（止まる）という現象が発生します。この現象の原因と解決策について記します。 推定原因と発生条件 わた […]
HTMLとCSSのみでモーダルウィンドウは作成できるか
モーダルウィンドウをHTMLとCSSのみで作成する方法を色々と模索しましたので、やってみた所感と、その備忘録を記します。 モーダルウィンドウはHTMLとCSSのみで作成できるか 結論から申しますとモーダルウィンドウはHT […]
【CSS】トグルボタンの作り方とデザインサンプル５選
当記事ではHTMLとCSSのみでトグルボタンを作る方法とデザインサンプルを5選紹介します。 ①HTMLでパーツを用意 作り方の方向性として、チェックボックスの機能を使いつつ、divタグでトグルボタンを作ることにします（チ […]
【CSS】input type=”file”の見た目を変更する方法
::file-selector-button疑似要素の登場によりinput type=”file”のデザインの変更にJavascriptが必要なくなりました。当記事では、CSSのみでinput t […]
【CSS】自動で流れ続ける無限ループスライダーを作成する
当記事では、CSSのみで自動で流れ続ける無限ループスライダーを作成する方法を記します。 ①スライド要素を用意 HTMLでスライド要素を用意します。下記のようにスライドを2セット用意するようにしてください。(ここでは4枚× […]
【PHP】見出しから目次を自動生成する方法
当記事ではPHPを使用して見出しから目次を自動生成する方法について記します。目次の自動生成はJavascriptで行うのが一般的かもしれませんが、PHPの方がJavascriptで実装するよりもページの表示速度が向上する […]
【Javascript】HTML文字列からNodeに変換する方法
当記事ではHTML文字列からNodeに変換する方法について記します。 HTML文字列からNodeに変換 これはとても簡単で1行で関数を定義できます。ここから先は補足情報になります。 変換したNodeに対してはDOM操作が […]
【Swiper×React】矢印とドットを外に出す方法
Swiper×Reactで作成したスライダーのナビゲーション（矢印）とページネーション（ドット）をスライドの外に配置したい時があると思います。当記事ではその方法をデモを交えながら解説します。 ①通常のSwiperスライダ […]
【Swiper×React】サムネイル付きのスライダーを作成する
当記事では、swiper.jsとReactを使用してサムネイル付きのスライダーを作成する方法についてデモ付きで解説します。swiper.jsのオプションを使用して二つのスライダーを連動させることで実現します。 ①メインの […]
