こんにちは！

インターン生のOigamiです！

早いもので実習も残すところ後2日です。日々コーディングに奮闘しております。

ところで、Webサイトを作成するに辺り、色々な動きを付けたくなってしまうのは私だけでしょうか。

動かしすぎるのもサイトイメージが崩れたり、直帰率に影響したりで

考えないといけないのですが、アイコンやメインビジュアルなんかは、ついつい動かしたくなります。

復習がてら、使い勝手の良いCSSとjqueryを紹介していきます。

---

ロールオーバーした時に色々な効果を生み出すCSS

Hover.css

Webの勉強をはじめて、あまり日数も経っていないのですが、何度お世話になった事か．．．

主にアイコン、バナー、グローバルナビに使います。

下線が出てきたり、アイコンが震えたり、背景画像が跳ねながら出てきたり・・・

ロールオーバーした時に色々な動きを付けてくれます。

私の作成しているサイトは今の所、ほぼこちらのサイトのものを使っています。

CSSをダウンロードすると、紹介している全てのCSSが入っているので、自分が欲しい部分だけをコピペして使うのがおすすめです。

photoshopvip

こちらもロールオーバーしたときに効果を付けてくれるCSSです。

前記しましたHover.cssとは少し違ったエフェクトがたくさん紹介されています。

きらっと光るアイコンはいつか作りたいです。

---

なにかと便利なjquery

bxslider

このブログでも何回か取り上げています。一番有名かも？しれない画像スライダーです。

初心者向けで、optionも豊富ですのでカスタマイズも簡単に出来、使い勝手が良いため良く使いますが、レスポンシブには非対応なので注意が必要です。

niboslider

数あるスライダーの中でも良く動く画像スライダー。なかなかに激しく動くので、サイトによってはイメージ通りに作成できるかも。

個人的には好きですが、動きすぎるので使うサイトを選ぶのが難点。

Swipebox

簡単に言うと画像を別窓で拡大表示し、かつ複数の画像をスワイプできます。

ポートフォリオなんかで作品や写真が多い時などに重宝します。

simplebox

前記しましたswipeboxと似ていますが、こちらは1つの画像のみを拡大表示させる事ができます。

スワイプしなくて良い、という方はこちらを使ってみるのもいいかもしれないですね。

トップへ戻るボタン

ランディングページなどでは必須かなと思います。

ページスクロールでトップへ戻るボタンが現れます。

アコーディオンメニュー

これは実際には設置したことは無いんですが、いつかやってみたいです。

アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」が実装できます。

レスポンシブにする時に便利かなと思います。

実装する方法も簡単に出来そうなので。

---

先人達は偉大だ・・・

私みたいな駆け出しでも簡単に色々な設定が出来るのだから・・・

他にもたくさんかっこいい動きをするCSSやjqueryがあるみたいですので、色々調べてみたいと思います！

ここまで読んでくださってありがとうございます

by　Oigami