Web制作

JavaScript

2021/3/23

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

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

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 ...

CSS

2021/2/3

IE11でテーブルの枠線が消えるバグの対処方法

IE11でテーブルの枠線が消える 久しぶりにIE11でハマったのでメモ。 SafariやChromeでは表示されているのにも関わらず、IE11でテーブルの枠線が消えてしまっていた。 原因としては ・tdタグに背景色をつけていた ・tdタグにposition:relativeをつけていた この2点。 tdの背景色がtdにつけた枠線の上から重なってしまい色が上書きされていた。 開発者ツールでbackgroundの要素のチェックを外すと枠線色は表示される。 サンプルコード この場合、tdにposition:re ...

未分類

2020/7/12

さくらドメインコンパネにWPXレンタルサーバーのネームサーバーを設定する方法

さくらドメインコンパネにWPXサーバーのネームサーバーを設定する方法

未分類

2020/7/12

お名前.comのVPSでのWordPress移行作業

お名前.comのVPSでのWordPress移行作業

未分類

2020/7/12

お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策

お名前.comのVPS(KVM)プランでページ表示速度を上げてSEO対策

未分類

2020/7/12

ウェブ作成時にMacで画面上の色を拾って16進法でコピーする方法

ウェブ作成時にMacで画面上の色を拾って、16進法でコピーする方法

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/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 ...

CSS

2021/2/8

フローティングバナーをCSS作る【Web制作】

スクロールに追尾していくバナー「フローティングバナー」をCSS作ります。 ポイントとしては ・position: fixed,bottom:0;の指定 ・z-indexの指定 の設定です。 position: fixed + bottom:0にすることで画面下にブロック要素を固定配置します。 z-indexを指定しないと、他のレイアウトにpositionをつかって配置している場合にスクロールしているとフローティングバナーが隠れて表示されてしまうことがあります。 z-indexは大きい値が上に表示されます。 ...

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()の開閉 ...

メディアクエリ(Media Queries)が効かないときに確認したいこと

CSS

2020/7/12

メディアクエリ(Media Queries)が効かないときに確認したいこと

メディアクエリ(Media Queries)が効かないときに確認したいこと メディアクエリ(Media Queries)はスマホ向けのWEBサイトを作るのに必須な技術です。 メディアクエリを正しく記述しても効かないときがありましたので備忘録として記載しておきます。 メディアクエリ @media screen and (max-width: 320px); というように表示させるディスプレイサイズごとに CSSを記述していける書き方です。 CSSは原則として下に書く内容が優先度が高く処理されるため(イレギュ ...

スクロールしたらCSS3のグラフがアニメーションするようにする方法

CSS

2020/7/12

スクロールしたらCSS3のグラフがアニメーションするようにする方法

スクロールしたらCSS3のグラフがアニメーションするようにする方法 『アニメーションするグラフを作ってくれ』と言われてしました。 知らない間にアニメーションの需要が出てきているんですね。 少しWEBから遠ざかっていたのでこんなことができるようになっていたのは非常に驚いています。 たしかにアニメーションするグラフは見栄えが良いし、 企業のサイトを作成するとなると決算や社内状況を知らせるためグラフは不可欠な要素になります。 ちょっとリッチなページ、ひと目を引くページ作成で アニメーションをいれてくれと言われる ...

JavaScript

2020/7/12

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

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

JavaScript

2021/2/6

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

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

WEB製作

2020/7/12

【Web制作】IE11でFlexboxが横並びにならなくてハマる

IE11でflexboxが横並びにならないとお客さん側から苦情が来てしまいました… 事前にIEはチェックしなくて良いと聞いていたので油断してましたね。 結論としては 「display: flex;」の記述が抜けていたこと。 IEだしdisplay:-ms-flex を書いておけば良いものだと勘違いしていたんですね。 IE11ではdisplay:-ms-flex;が読み込まれずにいて、 そもそもの「display: flex;」が抜けているとflexboxレイアウトができない という初歩ミスにハマってしまい ...

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