「JavaScript」の記事一覧

2025.08.11

JavaScript

swiper自動再生をマウスオーバーで制御

デモページはこちら swiper.jsでスライドを自動再生させ、マウスオーバーで一時停止、マウスアウトで再開を切り替えます。htmlのコードは以下の通りです。 …

2025.08.10

JavaScript

swiper自動再生の一時停止と再開

デモページはこちら swiper.jsでスライドを自動再生させ、ボタンのクリックで一時停止と再開を切り替えます。htmlのコードは以下の通りです。 JavaSc…

2025.08.08

JavaScript

swiperの完全停止

デモページはこちら swiper.jsでスライドを完全に停止させます。一時停止ではなく完全停止です。htmlのコードは以下の通りです。 JavaScriptのコ…

2021.01.04

JavaScript

JavaScriptで文字列・配列を切り出し(slice・substr)

デモページはこちら JavaScriptで文字列または配列を切り出すメソッドのまとめです。sliceは文字列と配列、substrは文字列の切り出しができます。 …

2021.01.02

JavaScript

imagesLoadedを利用した画像のローディング

デモページはこちら 画像読み込みの管理ができるJavaScriptライブラリ、imagesLoadedを利用して画像の透過度が変化して見えるローディングを実装し…

2020.10.27

JavaScript

JavaScriptで文字列を検索(indexOf・search・match・test)

デモページはこちら JavaScriptで文字列を検索するメソッドのまとめです。それぞれ記述の仕方と戻り値に特徴があります。 以下のhtmlの構造でテストします…

2020.10.26

JavaScript

JavaScriptのsplitメソッドで要素を分割し配列に格納

デモページはこちら JavaScriptのsplitメソッドで要素を分割し配列に格納します。 以下のhtmlの構造でテストします。 splitメソッドは指定した…

2020.10.26

JavaScript

JavaScriptのpushメソッドで配列に要素を追加・joinメソッドで配列の要素を連結

デモページはこちら JavaScriptのpushメソッドで配列に要素を追加し、joinメソッドで配列の要素を連結して文字列を生成します。 以下のhtmlの構造…

2020.10.23

JavaScript

JavaScriptのreplaceメソッドで文字列を置換

デモページはこちら JavaScriptのreplaceメソッドで文字列を置換します。空文字に置換することで対象文字列の削除も可能です。また全ての対象文字列の置…

2020.10.18

JavaScript

swiper.jsでスライドを一定速度で無限ループ

デモページはこちら swiper.jsでスライドを一定速度で無限ループさせます。スライダー全体の横幅を決めて表示スライドを1つにし、はみ出したスライドをCSSで…

2020.10.18

JavaScript

swiper.jsで連動する2つのスライダーを実装

デモページはこちら swiper.jsで連動する2つのスライダーを実装します。メインのスライダーはナビゲーションボタンかスワイプでスライドさせ、それに連動して背…

2020.10.17

JavaScript

swiper.jsのオプションdirectionにverticalを指定して縦方向のスライダーを実装

デモページはこちら swiper.jsのオプションdirectionにverticalを指定して、縦方向のスライダーを実装します。htmlのコードは以下の通りで…

2020.10.17

JavaScript

swiper.jsのオプションslidesPerViewにautoを指定して独自で横幅設定

デモページはこちら swiper.jsのオプションslidesPerViewにautoを指定して、独自で横幅を設定します。htmlのコードは以下の通りです。ナビ…

2020.10.16

JavaScript

swiper.jsのオプションbreakpointsで表示スライド数を切り替え

デモページはこちら swiper.jsのオプションbreakpointsで表示スライド数を切り替えます。 htmlのコードは以下の通りです。クラス名swiper…

2020.10.11

JavaScript

JavaScriptライブラリ swiper.jsの使い方

デモページはこちら JavaScriptライブラリのスライダー、swiper.jsの使い方です。レスポンシブ及びタッチデバイスのスワイプにも対応しています。jQ…

2020.09.07

JavaScript

JavaScriptライブラリ imagesLoaded(imagesloaded.pkgd.js)の使い方

デモページはこちら 画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded(imagesloaded.pkgd.js)の使い方です。…

2020.09.04

JavaScript

JavaScriptライブラリ Web Font Loader(webfont.js)の使い方

デモページはこちら Webフォントの読み込みにWeb Font Loader(webfont.js)を利用します。Web Font LoaderはGoogleと…

2020.09.02

JavaScript

JavaScriptライブラリ layzr.jsの使い方

画像の遅延読み込みができるJavaScriptライブラリlayzr.jsの使い方です。ウィンドウ表示領域外の要素や画像は非表示もしくは代替画像にしておいて、スク…

上に戻る