WEB制作で食べている（@HEBOCHANS）です。
WEB制作でよく使うCSS／jQueryをまとめました。
この記事はこんな人にオススメ
- WEB制作でよく使うCSS／jQueryが知りたい。
- 毎回ググってるような…まとめて欲しい。
もくじ
- ローディングアニメーションの実装
- ページを開くとスーッとスライドするアニメーション
- スクロールに合わせるアニメーションはwowで
- ヘッダーや画像に影をつけて浮かせる
- ナビを横に並べる
- ナビの横に区切り線を入れる
- ホバー時のアンダーラインアニメーション
- ハンバーガー (ドロワー)メニューはdrawer.jsで
- スライダーはSwiperで
- 背景画像のアレコレ
- 要素の横並びはFlexboxで
- テキストを左寄せで中央配置する方法
- Google MapやYouTubeをレスポンシブに埋め込む
- 郵便番号から住所を自動表示させる
- ページ内リンクのジャンプ先がズレてしまった時に調整する方法
- 要素が長い時にスクロールバーを表示させる
- TOPへ戻るボタン
- 要素をタブで切り替える
- 要素をずらして重ねる（ブロークングリッドレイアウト）
- おわり
ローディングアニメーションの実装
ローディングアニメーションは「CSS Load.net」でカンタン生成できます。
CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」
ページを開くとスーッとスライドするアニメーション
ページを開くと、ヘッダーが上から降りてきたり、要素が横からスライドしてきたりは@keyframesでできます。
ブログのヘッダーなんかにもよく使われていますね。
CSSで上下から横からフェードインしながらスライドイン！
スクロールに合わせるアニメーションはwowで
上のようなスライドするアニメーションも、ボタンをバウンスさせるアニメーションもwow頼りです。
本当にカンタンです！
スクロールの登場に合わせてアニメーションさせる決定版！「wow」の紹介 | HPcode
スクロールに合わせて登場したりアニメーションを発火させることができるjQueryプラグイン「wow」を紹介します。 めちゃくちゃ簡単で、アニメーションの種類も豊富なので、少しリッチなカッコいいサイトにした方はぜひ試してみてください。
ヘッダーや画像に影をつけて浮かせる
box-shadowで影をつけることによって、要素が浮かんでいるように見えるテクニックです。
当ブログのヘッダーや画像も浮いてます。
【CSS】box-shadowで影をつける方法とサンプル集
CSSのbox-shadowを使って影をつける方法と、コピペで使えるCSSサンプルをいくつか紹介します。向きやぼかし方、色の変え方まで詳しく解説しています。
ナビを横に並べる
ナビはinline-blockが一般的ですかね。
CSSで横並びを表現できる5パターンとそれぞれの役割（使い所） | HPcode
初心者の最初のハードルとして横並びがあるかと思います。縦に並べるだけなら、それなりにポチポチ触ればできますが、横並びになった途端に「うわあああああ」って。 この記事では、CSSで横並びを表現する5パターンとそれぞれの特徴を活かした具体的な使い方を紹介していきます。display: flex;以外は必要ないと言われがちですが、実はそれぞれに使い所がちゃんとあるのです！
ナビの横に区切り線を入れる
ナビはコーポレートサイトには必ずと言っていいほど出てきますからね。
横並びメニューの区切り線を隣接セレクタを使ってスマートに実装する方法 | 株式会社ウェブ企画パートナーズ
ホバー時のアンダーラインアニメーション
ホバーした時にナビの下などにアンダーラインを引くアニメーションです。
パターンも豊富です。
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法
ここ最近主にナビゲーションなどでホバー時にアンダーラインをアニメーションさせるエフェクトの実装要望が多いので、パッと使えるようによく利用するものをひと通りまとめたのでシェアします。また、Sassのmixinを用いて実装する方法も併せて紹介します。
ハンバーガー (ドロワー)メニューはdrawer.jsで
drawer.jsはWordPressでも使えますしね。
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
左からニュロっと開くドロワーメニューが作れるjQueryのライブラリを紹介します。 コーディングも比較的簡単なので是非ご活用ください。 対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～ Safari Chrome Firefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。
スライダーはSwiperで
メインビジュアルのスライダーはSwiperを使っておけば間違いない！
ってはにわまんさんが言ってるんだから間違いない！
【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode
スライダー系プラグインの最高峰と名高い「Swiper」の紹介です。いろんなスライダープラグイン使ってますが、実現できるパターンが一番多いのではないかと思います。jQueryに依存していない点も評価が高いポイントですね。 レスポンシブ対応はもちろん、ドラッグ操作にも標準対応です。 Swiperの使い方と、個人的にスライダーで実現したいものを実例とともにまとめました。
背景画像のアレコレ
背景画像の「cover」やら「テキストの上下中央配置」やら「ヒーローイメージ」やら「パララックス」は、はにわまんさんが全部まとめてくれています。
background-sizeの４つの指定の違いと背景画像のCSSでよく使われがちなパターン３つ | HPcode
コーディング時に意外と使われがちな背景画像のCSSについて紹介です。 背景で最も覚えておくべきは「background-size」だと思います。この指定の違いによって表示がどのように変わってくるのか、マウスでドラッグしながら直感的に理解していこうという目的で作成しました。 また、ヒーローイメージや背景固定など、よく使わがちな背景の指定方法についても少しだけまとめました。
要素の横並びはFlexboxで
要素の横並びはfloatではなく、flexboxを使いましょう。
日本語対応！CSS Flexboxのチートシートを作ったので配布します
FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており […]
テキストを左寄せで中央配置する方法
タイトルだけ聞くと、ちょっと何言ってるかわかんない状態かもしれませんが、これもよくあるはずです。
中央寄せで文字列を左寄せにする方法 – いつか誰かの役に立つかもしれないweb制作屋の備忘録
コンテンツの中身を中央寄せに設定していて、文字は中央寄せにしないで、左寄せにしたい時があります。pタグとliタグの２つのパターンを書きとめます。
Google MapやYouTubeをレスポンシブに埋め込む
これぞ頻出ですよね。
YouTubeを幅100%で埋め込む方法【レスポンシブ対応】
YouTubeを横幅100%でブログやWEBサイトに埋め込む方法が知りたい。 何か良い方法はないかなぁ？ こういった疑問に答えます。 本記事の内容 YouTubeを幅100%、レスポンシブに埋め込む方
郵便番号から住所を自動表示させる
たった2行で実装できちゃって感動。
超簡単！たった2行だけで郵便番号から住所自動表示する方法：ajaxzip3
あなたのウェブサイトの郵便番号入力フォームは、入力しても住所が自動入力されず、お客さまにとって使いづらいフォームになってしまっていませんか？そこで今回は、その離脱の原因の一つである「入力が面倒」を未然に防ぐ「たった2行で郵便番号から住所を自動入力する方法」をご紹介します！
ページ内リンクのジャンプ先がズレてしまった時に調整する方法
これ「あるある」ですよね。
必ずチェックしてズレるようなら調整しましょう！
ページ内リンクのジャンプ先の位置を複雑なタグは無しでCSSだけで調整する方法 | 大阪のホームページ制作会社YCOM
要素が長い時にスクロールバーを表示させる
規約などの必ず載せなければならないけど、そのまま全部載せちゃうと長くなっちゃう時に便利です。
【CSS】overflowの使い方：hiddenやscrollの違いは？
はみ出た部分の処理を決めるCSSのoverflowについて丁寧に解説します。分かりづらいvisible、hidden、scroll、autoの意味と使い分け方は？
TOPへ戻るボタン
スクロールすると右下に現れては、固定され、押すとヒューッとTOPに戻るボタンの実装です。
jQueryでスクロールすると表示する系いろいろ
最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。
要素をタブで切り替える
タブの切り替えもCSSだけで、コピペでできちゃいます。
【CSS】CSSだけでタブ切り替えを作る方法
要素をずらして重ねる（ブロークングリッドレイアウト）
これも「あるある」ですよね。
いわゆる「ブロークングリッドレイアウト」というやつですが、あくまで基本のグリッドレイアウトが出来ていないと、「ブロークン」することも出来ないのでオシャレさばかりに気を取られないことが大切です。
「ブロークングリッドレイアウト」の作り方はさまざまなので、参考にしたいサイトを見つけてChromeのデベロッパーツール（検証）とお友達になると良いです。
ボタンや画像を少しずらす程度なら「サルワカさんのbox-shadowで影をつける方法」で似たようなテクニックがあります。
ブロークングリッドデザインを成功させるために。
簡単！6つのポイント
「ブロークングリッドデザイン（レイアウト）」は、規則性のある境界線で構成されたレイアウトを一部分くずしたレイアウト…
おわり
今回は以上です。随時追加していきます。
これを読んでいるあなたも、ぜひ試してみてください！
一部、重複してますが以下もどうぞ。
サイト制作で何も思い浮かばない時のデザイン案15選【コピペOK】
WEB制作で食べている（@HEBOCHANS）です。 WEBデザインが思いつかない時に「こんなのあるよ？」をまとめました。 TOTO でも大事なのはオシャレさより GIGLIO 使いやすさだよ この記