JQueryの実行処理をレスポンシブのブレイクポイントによって、条件分岐したいときが稀にあります。 ユーザーエージェントで分岐する方法もありますが、もっと手軽に使いやすいようにレスポンシブのブレイクポイントに合わせた方法について調べてみました。 目次 ・JQueryの実行処理を条件分岐する ・jqueryの実行処理をレ...

Webサイト内で、情報を分かりやすくまとめるために、タブ切り替えのBoxを実装することは、一つの手法であります。今回はそんなタブ切り替えについて、タブとターゲットとなる切り替えBoxが離れていても動作するタブ機能をJQueryを使って実装していきます。 今までタブ切り替えを実装したことがない方は、是非参考にしていただけ...

JQueyのスライダーの中でもレスポンシブ対応で動作が安定して使いやすいslick.jsですが、スマホのみ動作させたい場合どのようにすればいいのか調べてみました。調査して分かったことを紹介していきますので、slickをスマホのみ適用したい方はご参考にしていただければと思います。 目次 ・slickをスマホ時のみ動作させ...

写真画像を拡大して見せるギャラリーについて、どのような物をお使いですか？ 今回はlightboxに似たギャラリーで、レスポンシブ対応の動作が軽いlightcase.jsの使い方について紹介していきます。 実装がとても簡単なので、lightcase.jsを導入する参考にしていただければと思います。 目次 ・lightca...

スマホのメニューやモーダルウィンドウが開いている際に指でスクロールすると、メニューやモーダルウィンドウの下のボディ自体がスクロールされたしまうようなことはありませんか？ 別段サイト自体への影響はないのですが、基本的に気持ち悪い感じがしますよね。 大抵のクライアントの方には、ちょっとこれは改善して欲しいと言われる方も少な...

パラメータを使うと、Webサイトで処理できることがいろいろと広がります。 簡単なプログラミングを取り入れるだけでも様々なことができるので、Webデザイナーの方でも覚えておくと便利だと思います。 今回はそんなパラメータの使い方の基礎として、HTMLとJQueryを使って紹介していきます。 目次 ・HTMLリンクでパラメー...

以前の記事でvideoタグの使い方について紹介しました。 デザインに拘る方はvideoタグのデフォルトのコントローラは、デザインがイマイチと思う方もいるかもしれません。そこで今回はJQueryを利用して、動画の再生・停止の切り替えボタンを実装する方法について紹介していきます。 目次 ・再生・停止の切り替えボタンを実装す...

クリッカブルマップを久しぶりに使おうと思うと、レスポンシブ対応ってどうするの？ そう思うことはないでしょうか。 Web制作をしている方でもクリッカブルマップ自体が滅多に使わない人が多いので、いざ必要な時にわからない場合があると思います。今回はそうした方にむけて、HTMLのクリッカブルマップをレスポンシブ対応する方法を紹...

今回はJQueryでもよく使うアコーディオン・slideToggleなどを使ったときの不具合について、対処法を含めて紹介します。なぜ今更アコーディオンやslideToggleに悩んでいると思う方もいるかもしれません。 私自身も今まで気にしていなかったのですが、最近作業をしているとslideToggleのがたつき・カック...

target=_blankを皆さんお使いですか？ セキュリティが云々などで非推奨になっている、別ウィンドウで開く指定方法ですが、なんだかんだ適用しやすくで使われ続けていますね。 そういう私も・・・楽なんで使っていますw 今回はあまり使用する頻度は少ないことですが、target=_blankを無効化する方法を紹介していき...