Infinite Scrollは次のページのコンテンツを読み込んで、無限スクロールを実現するJavaScriptプラグインです。デモページも用意されています。 Infinite Scrollを使って、WordPressの…
右クリック・ドラッグ&ドロップ・スマホでの長押しを無効化して画像保存を禁止する方法
PCだと右クリックやドラッグ&ドロップ、スマホでは長押しによる画像の保存を禁止する方法をご紹介いたします。 稀に、対策として実装してほしいと頼まれることがあるので備忘録として残しておきます。 CSSによる画像保存…
直前に開いていたページに戻るリンクを実装する方法
直前に開いていたページに戻るためのリンクを実装する方法をご紹介いたします。 ブラウザの戻るボタンを使えば良い話ではありますが、フォームの確認画面などで使うケースが結構あったりするので、覚えておいて損はないかなと思います。…
jQueryを使って要素の高さをブラウザの高さにぴったり合わせる方法
jQueryを使って、要素の高さをブラウザの高さに合わせる方法をご紹介いたします。 例えば、メインビジュアルを画面いっぱいに表示したい時などに活用できます。CSSの指定だけでは思ったような表示にならない場合に参考にしてい…
JavaScriptで変数内に特定の文字列が含まれるかどうかを調べる方法
変数に入れた値の中に特定の文字列を含むかどうかで条件分岐させる方法をご紹介いたします。 JavaScriptを実装していると、結構使えるケースが出てくるので、覚えておくと役立つかと思います。 JavaScriptで変数内…
下にスクロールで非表示、上にスクロールで再表示する固定ヘッダーを実装する方法
下にスクロールしたら消え、上にスクロールすると再表示される固定ヘッダーを実装する方法をご紹介いたします。 以前、素のJavaScriptで実装する方法はご紹介しましたが、今回はjQuery版です。 下にスクロールで非表示…
CSSとjQueryでセレクトボックスのテキストを中央寄せにする方法
CSS+jQueryを使ってセレクトボックスのテキストを中央寄せにする方法をご紹介いたします。 jQueryを使って選択されたオプションを動的に代入することで、選択中のオプションの表示にも対応しています。 jQueryを…
スマホとタブレットで:hoverの挙動を無効化する方法
スマホやタブレット等のタッチデバイスでは、リンクやボタンに指定した:hoverのスタイルが邪魔になるケースがあります。というか、タッチデバイスでは:hoverの挙動は不要ですよね。 タッチデバイスでのみ、一括して:hov…
JavaScriptで数字を3桁カンマ区切りに変換する方法
JavaScriptで数字を3桁のカンマ区切りに変換する方法をご紹介いたします。 変換元が数値/文字列だった場合のそれぞれの変換方法と小数点以下がある場合についても解説いたします。 JavaScriptで数字を3桁カンマ…
jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法
フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」で表示されるカレンダーのコードは、</body>の直前に挿入されます。 ※ui-datepicker-divとい…