JavaScript
パララックスには色んな種類がある！3パターンの実装例を紹介
パララックスって言葉は聞いたことあるけど、具体的にどういう動きすればパララックスなのか分からないって方は意外といるかもしれません。 ちょっとの前のわたしはセクションが重なる紙芝居風の動きをするのがパラ…
はにわまん 
ヘッダー固定でページ内リンクをページ遷移で指定した時のズレを解消するJavaScript
ヘッダー固定にしていると頻発する問題として、「ページ内リンク先の位置がズレる！」があると思います。ズレるというか、ほとんどの場合は固定したヘッダーに隠れますね。 同じページ内でのページ内リンクだったら…
スムーズな移動！「smooth-scroll.js」で固定ヘッダーも考慮したページ内リンク
1ページで完結するようなLPでよく使われるのが、ヘッダーのグローバルメニューが各見出しへのページ内リンクになっているというもの。 普通に設置してもいいのですが、グイーンと移動してくれた方が、ページ内を…
YouTube動画の背景再生を設定できるjQueryプラグイン「jquery.mb.YTPlayer」
WebサイトでYouTube動画の背景再生を設定できるjQueryプラグイン「jquery.mb.YTPlayer」の紹介です。 「jquery.mb.YTPlayer」のダウンロード GitHubで…
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介
スライダー系プラグインの最高峰と名高い「Swiper」の紹介です。いろんなスライダープラグイン使ってますが、実現できるパターンが一番多いのではないかと思います。jQueryに依存していない点も評価が高…
画像を隙間なく詰めてピッタリ配置してくれるjQueryプラグイン「Masonry.js」
ギャラリーサイトなどで活躍しそうなjQueryプラグイン「Masonry.js」の使い方を紹介します。 縦横の大きさが違う画像を配置すると、デコボコになったり変な余白が生まれたりしますが、Masonr…
アプリのようなドロワーをWebサイトで実現！jQueryプラグイン「hiraku.js」の使い方
アプリのような画面ごとスライドするドロワーメニューを簡単に実装できるjQueryプラグインを紹介します。 動きとしてはこんな感じ。今の世代に一番馴染みのある動きだと思います。 日本人が開発しているとこ…
見出しから目次を自動生成してくれるjQueryライブラリ「TOC」のダウンロードと使い方！
見出しから目次を自動生成してくれるJqueryライブラリ「TOC」を紹介します。 目次は、ユーザービリリティ向上のために欠かせないものとなっています。1記事ずつ手で目次を生成しているのはとても手間がか…
郵便番号から住所を自動入力してくれるライブラリ「ajaxzip3」が超簡単！
お問い合わせフォームはできるだけ入力を楽にしてあげないと、離脱されてしまいます。 住所を入力させるにあたってよく使われるのが、郵便番号を入力したら住所が自動反映されるというもの。住所を入力する手間が省…
疑似要素のCSSの値（content）をJavaScriptで制御する4パターン
::afterや::beforeなどの疑似要素はDOMではないため、jQueryで制御できません。 しかし、無理やり変換する方法はあるので、その方法をまとめておきます。 プロパティを取得して変換するパ…