【Javascript】CSS・JSファイルを遅延読みして表示速度を向上させる

当記事では、CSS・JSファイルを遅延読みして表示速度を向上させる方法について注意点も含めて記します。 ユーザーがスクロールしたタイミングで遅延読み込み対象のファイルを読み込むという方法を採ります。 遅延読み込みのメリッ […]

【Javascript】 複数要素に複数イベントを登録する

素のJavascriptの進化に伴い、脱jQueyの動きが盛んですが、jQueryに慣れすぎていてると「あれ、これJavascriptでどう書くんだっけ」となることがあると思います。 この記事では、素のJavascrip […]

【Javascript】フォームの値を一括で取得する

当記事では素のJavascriptでフォームの値を一括で取得する方法について記します。ajaxやfetchでサーバーサイドにフォームのデータを送るときや、サーバーサイドに送る前にJavascriptでバリデーションを行い […]

【Swiper】ネストスライダーを作成する

当記事では、Swiper.jsを使用してスライダーが入れ子になったネストスライダーを作成する方法とその注意点についてデモ付きで記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきます […]

【Swiper】エフェクトオプションで作成できるスライダー6選

swiper effect animation

Swiper.jsにはeffectオプションというものが用意されており、アニメーション効果を持つスライダーを簡単に作成する事ができます。この記事ではswiper.jsのエフェクトオプションを使用して作成できるスライダーを […]

【Swiper】フェードスライダーを作成する

fade slider

swiper.jsのエフェクトオプションを使用してスライドがふわっと切り替わるフェードスライダーを作成する方法を記します。 通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swip […]

【Swiper】クリエイティブエフェクトでオリジナルスライダーを作成する

creative slider

Swiper.jsにはcreativeEffectというオプションが用意されており、アクティブスライドの前後のスライドに対してかなり自由に変更を加える事ができるため、うまく活用することによってオリジナルのスライダーを作成 […]

【Swiper】スライダーのアクセシビリティを向上させる

swiper_accessibility

Javascriptのスライダーライブラリの中でも人気がある『swiper.js』はオプションがとても豊富です。当記事ではswiper.jsのオプションを使用してスライダーのアクセシビリティ(操作性)を向上させる方法につ […]

Swiperスライダーの矢印のサイズや位置や色を変更する

swiper arrows size position color

Swiper.jsで作成したスライダーのナビゲーション(矢印)のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの前提 […]

Swiperスライダーのページネーションのサイズや位置や色を変更する

swiper pagination size position color

Swiper.jsで作成したスライダーのページネーション(ドット)のサイズや位置や色を変更したい時があると思います。当記事ではその方法をデモを交えながら解説します。 通常のSwiper.jsでのスライダーの作成はご存じの […]