スマホやタブレット等のタッチデバイスでは、リンクやボタンに指定した:hoverのスタイルが邪魔になるケースがあります。というか、タッチデバイスでは:hoverの挙動は不要ですよね。 タッチデバイスでのみ、一括して:hov…
JavaScriptで数字を3桁カンマ区切りに変換する方法
JavaScriptで数字を3桁のカンマ区切りに変換する方法をご紹介いたします。 変換元が数値/文字列だった場合のそれぞれの変換方法と小数点以下がある場合についても解説いたします。 JavaScriptで数字を3桁カンマ…
jQuery UI Datepickerのカレンダーを任意の場所に挿入する方法
フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」で表示されるカレンダーのコードは、</body>の直前に挿入されます。 ※ui-datepicker-divとい…
jQuery UI Datepickerのカレンダーを祝日対応する方法
フォーム内で日付をカレンダーから選択できるようになる「jQuery UI Datepicker」ですが、表示されるカレンダーは祝日に対応していません。 日曜日と祝日の色を変えたいという要望があり、カレンダーに日本の祝日を…
シンプルなニュースティッカーを実装できるjQueryプラグイン「jquery.simpleTicker.js」
jquery.simpleTicker.jsは、回転したり横からスライドインしてくるニュースティッカーを実装できるjQueryプラグインです。 挙動については、以下デモページよりご確認いただけます。 デモページを見る j…
jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法
jQueryを使わずにスクロールアニメーションを実装する方法をご紹介いたします。スクロールしていって可視範囲に要素が入ったら、ふわっとアニメーションしながら表示させます。 意外とコード量は少なくて済むので、スクロールアニ…
一定量スクロールすると要素をフェードインさせる処理をjQueryなしで実装する方法
一定量スクロールすると表示されるページトップボタンをjQueryなしで実装したいなと思って調べていたら、ドンピシャな記事がありました。 [JS] jQuery を使わずにスクロールでふわっと出現し、クリックするとページト…
脱jQuery!素のJavaScriptでローディング画面を実装する方法
jQueryなしでサイトにローディング画面を実装する方法をご紹介いたします。 挙動については以下デモページをご参照ください。 デモページを見る 素のJavaScriptでローディング画面を実装する方法 ステップ1. HT…
input[type=”file”]の見た目を変更して選択ファイル名の表示やクリアにも対応させる方法
フォームでファイルを選択して送信できるようにするためには、以下のようなinput[type=”file”]を使うと思います。 このinput要素、デフォルトの見た目がイケてないですよね。Chrom…
ajaxzip3を使ってボタンクリックで郵便番号から住所を自動入力する方法
先日紹介した「ajaxzip3」は、リアルタイムで郵便番号から住所を自動入力してくれます。郵便番号を入れるだけで自動で住所も入力してくれるので、大変便利なライブラリです。 ですが、リアルタイムでは入力してほしくないという…