フォームの入力保管機能は便利ですが、サイトの構築内容によっては、思わぬ妨害にもなってしまう場合があると思います。 そこで今回は、フォームの入力保管機能であるAutocompleteを無効にする方法について紹介していきます。 html側でフォームのAutocompleteを無効にする方法 ■フォーム全体にAutocomp...

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

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

以前の記事でHTMLリンクでパラメータ渡しについて紹介しましたが、今回は同一ページ内でのページ内リンクでパラメータを渡す方法について承知していきたいと思います。 HTMLリンクのパラメータ渡しについて先に知りたい方は、下記記事をお読みください。 ↓↓↓↓ https://fractales.jp/javascript/...

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

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

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

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

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

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