WEB制作

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

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

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

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

TOTO
TOTO
はにわまんさん多めで
GIGLIO
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をレスポンシブに埋め込む

これぞ頻出ですよね。

あわせて読みたい
YouTubeを幅100%で埋め込む方法【レスポンシブ対応】
YouTubeを幅100%で埋め込む方法【レスポンシブ対応】 YouTubeを横幅100%でブログやWEBサイトに埋め込む方法が知りたい。 何か良い方法はないかなぁ? ...

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

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

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

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

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

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

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

TOPへ戻るボタン

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

要素をタブで切り替える

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

要素をずらして重ねる(ブロークングリッドレイアウト)

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

いわゆる『ブロークングリッドレイアウト』というやつですが、

あくまで基本のグリッドレイアウトが出来ていないと、「ブロークン」することも出来ないのでオシャレさばかりに気を取られないことが大切です。

『ブロークングリッドレイアウト』の作り方はさまざまなので、参考にしたいサイトを見つけてChromeのデベロッパーツール(検証)とお友達になると良いです。

ボタンや画像を少しずらす程度なら「サルワカさんのbox-shadowで影をつける方法」で似たようなテクニックがあります。

おわり

今回は以上です。

随時追加していきます。

これを読んでいるあなたも、ぜひ試してみてください!

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

あわせて読みたい
サイト制作で何も思い浮かばない時のデザイン案15選【コピペOK】
サイト制作で何も思い浮かばない時のデザイン案15選【コピペOK】WEB制作で食べている(@HEBOCHANS)です。 WEBデザインが思いつかない時に「こんなのあるよ?」をまとめました。 ...