こんにちは！福岡のホームページ制作会社「シンス株式会社」の芦刈です。
JavaScriptライブラリの一つである「jQuery」。
そろそろホームページ制作で使われなくなるという話も聞きますが、今でも頻繁に使っている制作会社も多く存在します。
今回はホームページ制作でよく使うjQueryのコードスニペットをまとめましたのでご覧くださいませ。

トップへ戻るボタン

トップへ戻るボタンは、ページの縦幅が長いサイトに使われたりします。
このボタンがあることで、ページ上部に戻る操作が簡単になります。

アコーディオンメニュー

ホームページのコンテンツが多い場合、アコーディオンメニューとしてコンテンツ内容を折りたたむことで、スッキリとしたデザインにしてくれます。
スマートフォン表示の時だけ、アコーディオンメニューを取り入れるサイトも多いようです。

ページ内リンク（スムーススクロール）

アニメーションしながら該当箇所までスクロールしてくれます。
このアニメーションが無い場合、どこにリンクしたのか分からなくなるので、ページ内でリンクする場合は必ず入れておいたほうが良いでしょう。

タブメニュー

タブメニューを実装することで、スペースの有効利用をすることができ、情報の関連性も分かりやすくなります。
隣のメニューをクリックするだけなので、操作しやすい印象があります。

モーダルウィンドウ

モーダルウィンドウは、同一ページにコンテンツが表示されるので、わざわざページ遷移をする必要がなく、素早く内容を確認することができます。
正面に表示されるのでユーザーの注意を引き付ける効果があります。

スクロールアニメーション

スクロールアニメーションは、閲覧者の注意を引き付ける役割を持っています。
逆にアニメーションが多すぎるとユーザーが疲れてしまうので、バランスを意識しながら使ってみましょう。

まとめ

以上、ホームページ制作で頻繁に使うjQueryのコードスニペットでした。
複雑なサイトでない限り、これくらいのスニペットだけで事足りることもあります。
また一度書いたコードは、コピペできるようにまとめておけば、作業効率がアップしますので、よかったら参考にしてみてください。