JavaScript

お問い合わせフォームはできるだけ入力を楽にしてあげないと、離脱されてしまいます。 住所を入力させるにあたってよく使われるのが、郵便番号を入力したら住所が自動反映されるというもの。住所を入力する手間が省けてとても楽ですよね […]

::afterや::beforeなどの疑似要素はDOMではないため、jQueryで制御できません。 しかし、無理やり変換する方法はあるので、その方法をまとめておきます。 プロパティを取得して変換するパターン 実際に値を取 […]

jQuery不要、軽量で使いやすいコードハイライト！「highlight.js」を紹介します。 この記事内でも、いたるとこでhighlight.jsが動いています。 ダウンロード ※ ver 9.12.0時点の内容です。 […]

Bootstrapを拡張するjQueryプラグイン「Bootstrap Color Picker Sliders」の紹介です。 読み込むライブラリが多いのが難点ですが、スタイリッシュなカラーピッカーを導入したい方はお試し […]

テキストをクリップボードにコピーできるjQueryプラグイン「clipboard.js」を紹介します。 実装すると以下のような処理ができるようになります！ DEMO（デモ） ここの文字がコピーされます。 コピーするコピー […]

Gif動画が多くなると、いたるところで再生しまくってて、うっとうしくなります。また、読者もどこからが動画の始まりか分からないためユーザビリティも悪いです。 jQueryプラグイン「gifffer」を使えば、通常の動画のよ […]

クリック時に波状に広がるボタンの作り方です。 ボタン <div class=”btn-wave”>ボタン</div> .btn-wave { display: inline-block; padd […]

HTML上でアニメーションを表現する方法は大きく３つあります。 transition（cssプロパティ） animation（cssプロパティ） animate（jQuery関数） アニメーションを一斉に動かしたときに違 […]

jQueryでアニメーションを設定できるanimate関数について紹介します。 CSSでもアニメーションは可能ですが、jQueryを扱えた方がより動的な表現ができるはずです。ただ欠点として、animate関数では、数字の […]

スクロールの途中で出現するフローティングボタンのJavaScriptの書き方を紹介します。 「トップへ戻る」「メニュー」「導線ボタン」など、いろいろ使い勝手の良いボタンなので、覚えてくと重宝します。 HTML <d […]