BLOG

  • Facebook
  • Twitter

ホームページ制作でよく使うjQueryのコードスニペットまとめ6選

芦刈光彦

芦刈光彦

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

トップへ戻るボタン

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

アコーディオンメニュー

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

ページ内リンク(スムーススクロール)

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

タブメニュー

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

モーダルウィンドウ

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

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

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

まとめ

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

〈 この記事を書いた人 〉

芦刈光彦

Webディレクター芦刈光彦

社内では、Web制作のディレクション、フロントエンドを担当しています。
音楽と登山が好きです。ずっと福岡に住んでます。どうぞお気軽に。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!