WEB制作

サイト制作でよく使うCSS/jQuery 19選【コピペOK】

often-use-css

WEB制作で食べている(@HEBOCHANS)です。

WEB制作でよく使うCSS・jQueryをまとめました。

TOTO

はにわまんさん多めで

GIGLIO

お送りしております。

この記事は以下のような方にオススメです。

  • WEB制作でよく使うCSS・jQueryが知りたい。
  • 毎回ググってるような…まとめて欲しい。

ローディングアニメーションの実装

ローディングアニメーションはCSS Load.netでカンタン生成できます。

ページを開くとスーッとスライドするアニメーション

ページを開くと、ヘッダーが上から降りてきたり、要素が横からスライドしてきたりは@keyframesでできます。

当ブログのヘッダーにも使われています。

スクロールに合わせるアニメーションはwowで

上のようなスライドするアニメーションも、ボタンをバウンスさせるアニメーションもwow頼りです。

本当にカンタンです!

ヘッダーや画像に影をつけて浮かせる

box-shadowで影をつけることによって、要素が浮かんでいるように見えるテクニックです。

当ブログのヘッダーや画像も浮いてます。

ナビを横に並べる

ナビはinline-blockが一般的ですかね。

ナビの横に区切り線を入れる

ナビはコーポレートサイトには必ずと言っていいほど出てきますからね。

ホバー時のアンダーラインアニメーション

ホバーした時にナビの下などにアンダーラインを引くアニメーションです。

パターンも豊富です。

ハンバーガー (ドロワー)メニューはdrawer.jsで

drawer.jsはWordPressでも使えますしね。

スライダーはSwiperで

メインビジュアルのスライダーはSwiperを使っておけば間違いない!

ってはにわまんさんが言ってるんだから間違いない!

背景画像のアレコレ

背景画像の「cover」やら「テキストの上下中央配置」やら「ヒーローイメージ」やら「パララックス」は、はにわまんさんが全部まとめてくれています。

要素の横並びはFlexboxで

要素の横並びはfloatではなく、flexboxを使いましょう。

テキストを左寄せで中央配置する方法

タイトルだけ聞くと、ちょっと何言ってるかわかんない状態かもしれませんが、これもよくあるはずです。

Google MapやYouTubeをレスポンシブに埋め込む

これぞ頻出ですよね。

郵便番号から住所を自動表示させる

たった2行で実装できちゃって感動。

ページ内リンクのジャンプ先がズレてしまった時に調整する方法

これ”あるある”ですよね。

必ずチェックしてズレるようなら調整しましょう!

要素が長い時にスクロールバーを表示させる

規約などの必ず載せなければならないけど、そのまま全部載せちゃうと長くなっちゃう時に便利です。

TOPへ戻るボタン

スクロールすると右下に現れては、固定され、押すとヒューッとTOPに戻るボタンの実装です。

要素をタブで切り替える

タブの切り替えもCSSだけで、コピペでできちゃいます。

要素をずらして重ねる

要素をずらして重ねるだけで、してやった感あります。

おわり

今回は以上です。

随時追加していきます。

みなさんもぜひ試してみてください!

一部、重複してますが以下もどうぞ。

プロフィール