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

swiper_accessibility

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

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

swiper arrows size position color

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

Javascript5行でアコーディオンメニューを実装する

accordion

当記事ではjavascript5行でアコーディオンメニューを実装する方法について記します。 jQueryは使用せずに実装してみます。動きはスルスルと動くようにしてみましょう。記事の下の方に実際に動かせるデモを用意しており […]

Javascriptでモーダルポップアップを実装する

ポップアップ

当記事では、Javascriptでモーダルポップアップを実装する方法について記します。ボタンクリックでポップアップが開き、背景クリックでポップアップが閉じるというようなイメージになります。 記事の下の方に実際に動かせるデ […]

【Javascript】ファイルを選択時に複数画像をプレビューする

当記事では、ファイル選択時に複数画像をプレビューする方法について記します。 ファイル選択時に画像を1枚だけプレビューしたい場合は下記が参考になるかと思います。【Javascript】ファイルを選択時に画像をプレビューする […]

【Javascript】ファイルを選択時に画像をプレビューする

preview image

当記事では、ファイル選択した時に画像をプレビューする機能をJavascriptで実装する方法について記します。FileReaderを使用したサンプルをよく見ますが、当記事ではFileReaderを使わずに実装してみます。 […]

【Javascript】BlobとFileの相互変換

blob and file

当記事では、BlobからFileに変換する方法とFileからBlobに変換する方法を記します。どちらも簡単に行えます。 BlobからFileに変換 FileからBlobに変換 以上、BlobとFileの相互に変換する方法 […]

【Javascript】DataURLとFileの相互変換

dataurl and file

当記事では、DataURLからFileに変換する方法とFileからDataURLに変換する方法を記します。 DataURL⇒File DataURLからFileへの変換はfetchメソッドとFile Apiを組み合わせる […]

【Javascript】DataURLとBlobの相互変換

dataurl and blob

当記事では、DataURLからBlobに変換する方法とBlobからDataURLに変換する方法を記します。 DataURL⇒Blob DataURLからBlobに変換するにはfetchメソッドが便利だと思います。then […]