JavaScript

JavaScript

2021/3/23

「Slick.js」スライダーのボタンを押したときにスライドが止まるときの対処方法・使い方

スライダープラグイン「Slick.js」でスライダーのボタンを押すとautoplayに設定したスライドの動きが止まると言われてしまいました。 状況 ボタンを押すと1度スライドが動くが止まる。マウスカーソルをブラウザから外すと再びスライダーが動き出す このときにSlick.jsでスライド対応していた部分はスライドボタンをCSSのabsoluteで位置変更していたことを思い出しました。 そのためマウスカーソルが乗っているときのオプションが用意されているのでは?という結論に達したところカーソル系のオプションがあ ...

JavaScript

2021/3/18

Javascriptでdisplay:blockを使って切り替えるとtrタグのレイアウトがずれる原因

Javascriptでdisplay:block,display:noneを切り替えて要素の表示・非表示をする場合があります。 同じ方法でtable trの表示・非表示を切り替えた場合レイアウトズレが発生します。 原因はtrタグの初期設定されているdisplayの値がblockではないことが原因です。 trの場合の初期値はblockではなく「table-row」 そのためtrの表示・非表示をする場合、displayを使ってtable-rowとnoneを切り替えるとうまくいきます。 tableで使うタグのd ...

JavaScript

2021/3/18

jQueryUIのカレンダー「Datepicker」のオプション・カスタマイズ

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 カスタマイズ 用意されているオプションを利用することでカレンダーをカスタマイズできます。 当月カレンダーに先月、翌月の日付を表示させる 当月カレンダー内の月初と月末に前月と翌月の日 ...

JavaScript

2021/3/18

jQueryUIのカレンダー「Datepicker」の基本・ダウンロード・日本語化

「Datepicker」はjQueryのライブラリで、カレンダー機能を簡単に実装できるライブラリ。お問い合わせフォーム等で、inputのテキストフォームや、カレンダーアイコンをクリックしたときに表示されるカレンダーがありますよね?カレンダーの日付を選ぶと選んだ日程がテキストフォームに値として入るといった仕組みができあがります。 jQueryUIの設定 Download Builder | jQuery UIよりライブラリファイルをダウンロードします。/download/のページでどのコンポーネントをつける ...

JavaScript

2021/3/23

スライダープラグイン「slick.js」の使い方・カスタマイズ方法/ スライドドットの大きさを変える、色を変える

「Slick.js」の使い方・カスタマイズ方法 「Slick.js」の使い方・カスタマイズ方法でよくある事例のメモです。 スライドのドットの大きさを変更する CSSで調整できます。 疑似要素の中身にcontent: "•";を使ってスライダードットを再現しています。 スライドのドットの大きさはfont-sizeで変化します。 191行目の.slick-dots li button:beforeのfont-sizeを変更します。 .slick-dots li button:before { font-fam ...

JavaScript

2021/2/18

areaタグをレスポンシブ対応させる方法

画像内にイメージマップをつくってリンクをつけることができるareaタグですが、 アクションを起こせる範囲を指定するため、レスポンシブ対応させるとなると手間がかかります。 areaタグをレスポンシブ対応させる方法 結論 ・javascriptライブラリ「jQuery-rwdImageMaps」で対応可能 CDNから読み込み、もしくはダウンロードしてきてライブラリを読み込ませます。 ジェネレーターでイメージマップを作成後、タグに使うimgに usemap="#image-map"を書いてrwdImageMap ...

JavaScript

2021/1/22

jQueryでアコーディオン/ボタンをアニメーション回転させる

jQueryでアコーディオン/ボタンをアニメーション回転させる 基本的にはjQueryでアコーディオン(クリック開閉メニュー)と同様の手法 トリガーとなるボタンの位置は絶対配置で指定。 toggleClassでクラスを追加したときにCSSで回転させる。 回転アニメーションはさせる場合には「transition」の指定が必要。 <ul> <li class="aco"> <a href="">メニュー親</a> < ...

JavaScript

2021/1/22

jQueryでアコーディオン(クリック開閉メニュー)

jQueryでアコーディオン(クリック開閉メニュー) slideToggle()を使って実装するのがかんたん。 hover,clickをEventListenerにしてslideToggle()を実行させる例がほとんど。 しかし、slideToggleの場合、css transitionのアニメーションが効かないので ボタンを押してボタンのアニメーションをさせる場合にはアニメーション用のスクリプトを自作しないといけない。 <div class="faq_oya"> < ...

JavaScript

2021/1/1

JavascriptでURLパラメータを取得し条件文を作るやり方

[Javascript]「?」を使ったif文の書き方-三項演算子

Slick.js

JavaScript

2021/3/23

「Slick.js」指定できるオプション豊富な定番jQueryスライダープラグイン

Slick.js slickは定番のJavaScriptスライダープラグインです。 jQueryで動作します。 公式サイトでのデモソースパターンとネットでの拡張サンプルコード事例が豊富なので 比較的使いやすいスライダープラグインだと感じます。 slick ライセンス MITライセンス/個人無料・商用無料 slickはjQueryを利用します。 slick デモサンプルURL/公式ドキュメント ポイント slick - the last carousel you'll ever need slick.jsの ...

JavaScript

2021/1/1

[Javascript]「?」を使ったif文の書き方-三項演算子

[Javascript]「?」を使ったif文の書き方-三項演算子

JavaScript

2021/3/23

「Slick.js」でサムネイルはスライドしないで固定させる実践的な使い方

案件でスライドを実装しないといけなくなり、Slider Proで対応しようとしたのですが、 「1枚の画像のときにスライダーを表示させないでくれ」と言われてしまい1枚の画像のケースがありえるの?とツッコミしたくなりました。 スライダーを使うのだから複数枚画像は用意するでしょう!というのは製作者側の勝手な意見なのでしょうかねえ。 さて、Slider Proを見直したところ、矢印部分や背景にCSSで編集を加えていたため1枚画像の場合に矢印が表示されてしまう事態となってスライダーをSlickへ変更しました。 sl ...

JavaScript

2020/7/23

スライドJSプラグイン「Slider Pro」の実践的な使い方

JavaScriptのスライドプラグインはたくさん種類がありますが、 その中でも設定項目の多い「Slider Pro」の使い方です。 Slider Proの良いところとしては ・ブレイクポイントを使ったレスポンシブ対応 ・スワイプ検知 ・サムネイルの大きさ指定 これらの項目が初期状態から設定されていることです。 Slider ProはjQueryを利用します。 Slider Pro ライセンス MITライセンス/個人無料・商用無料 Slider Pro デモサンプルURL/公式ドキュメント ポイントSli ...

JavaScript

2020/7/12

【JavaScript】Swiperを使って端がちょっと見えるスライダーを実装する方法

数あるJavaScriptスライダープラグインの中で、 ・bxslider.js ・slick.js の著名ですが今回利用したのが「Swiper」です。 Swiperのメリット Swiperはオプションが多く、いろいろなスライダーを作ることができます。 ・IE11対応 ・jQueryが不要 ・スマホOKでタッチやスワイプにも対応 ・オプションがありすぎてちょっと面倒 とりあえず公式サイトにあるDEMOを見てみると実装できるスライダーの豊富さがわかります。 デモを見るだけでも大変です。IE11だと結構動作が ...

JavaScript

2021/3/20

jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。短い文でかんたんにアコーディオン開閉時を実装できます。 SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。今回はそのサンプルを紹介します。 jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更する。 javaScriptでやること ・SlideToggle()を実装する・SlideToggle()の開閉 ...

JavaScript

2020/7/12

【Chart.js】グラフを簡単に作れるJavaScriptライブラリ

Chart.jsはグラフをとても簡単に作っていくことができるJavaScriptライブラリです。 ・どのグラフにするか? ・どんな数値・メモリを入れていくか? と中身のデータを入れ替えていくだけでグラフが簡単に出来上がります。 エクセルなどのスプレッドシートでグラフを作る感覚に近いです。 グラフの初期テンプレートは用意されており色を変えるだけでなく、カスタマイズも出来ます。 グラフが表示されるときにアニメーションするのもポイントが高い点です。 グラフがアニメーションするとWEBページとしての見栄えも良いで ...

JavaScript

2021/2/6

【jQuery】「next()」「prev()」で要素の取得して画像を変更する。

JavaScriptのライブラリとして一般的になったのが「jQuery」です。 いまだにjQueryを使ったサイトの案件はたくさんありますので、 JavaScriptの勉強をしていく上では逃げられないライブラリになっています。 「ボタンをオン・オフしてjQueryで画像を変えたい!」と言う時困るのが ・そもそもの画像の変える書き方がわからない ・画像を変える要素を選択する書き方がわからない というところでしょうか。 初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。 jQ ...

© 2021 さくらいらぼWEB版 /個人ブログ