当ブログでは、ぼくが実際のWebサイト制作案件で使用したコーディングのサンプルコードやコーディングで頻繁に使う機会が多いと思われるアニメーションなどの記事を100記事以上公開しています。
この記事ではそれらを探しやすいようにお悩みごとにまとめました。
コピペしただけで、とりあえず完成するものばかりですのでぜひ、参考にして下さいまし!
CSS/jQueryアニメーション
CSSアニメーションもしくはjQueryを使用したアニメーションの実装で役立つ記事はこちらです。
要素をスライドインで表示させる方法

Twitterのいいねボタンのエフェクトを再現する方法



可視範囲に入ったら下線を引く方法



ホバーしたら左から右へ下線を引く方法



可視範囲に入ったら画像を黒いマスクと一緒に左から表示させる方法



ライブラリ「AOS」でスクロールアニメーションを実装する方法



要素を遅延表示させる方法



上から下に動き続ける円を作る方法



ボタン
ボタンの実装で役立つ記事はこちらです。



アコーディオン
アコーディオンのコーディングで役立つ記事はこちらです。
アイコンも切り替わるアコーディオンを作る方法



Vueでシンプルなアコーディオンを作る方法



タブメニュー
タブメニューのコーディングで役立つ記事はこちらです。
Vueでタブ切り替えを作る方法



スライドショー
スライドショーのコーディングで役立つ記事はこちらです。
Swiperでサムネイル付きスライドショーを作る方法



Vegas2で背景画像をスライドショーにする方法



モーダル
モーダルのコーディングもしくはモーダル・オーバーレイ周りで役立つ記事はこちらです。
シンプルなモーダルを作る方法



プログレスバー
プログレスバー(進捗バー)のコーディングで役立つ記事はこちらです。
申し込み画面で使われる円形のプログレスバーを作る方法



三角形
三角形のコーディングで役立つ記事はこちらです。
左上・右上・右下・左下自由自在に三角形を配置する方法



SVGで三角形を作って影をつける方法



吹き出し三角形を長方形の右側につける方法



画像やiframeの縦横比
画像やiframeの縦横比を調整するときのコーディングで役立つ記事はこちらです。
画像の縦横比率を自由自在に維持する方法



Google Mapの縦横比を調整してレスポンシブ対応する方法



パンくずリスト
パンくずリストのコーディングで役立つ記事はこちらです。
最もシンプルなパンくずリストの作り方



マーカー
マーカー(蛍光ペン風装飾)のコーディングで役立つ記事はこちらです。
複数行に渡って綺麗にマーカーを引く方法



平行四辺形のマーカーを引く方法



フッター
フッターのコーディングもしくはフッター周りで役立つ記事はこちらです。
フッター固定メニューを作る方法



3カラムのフッターを作る方法



フッターを最下部に固定する方法



フッター手前で止まるボタンを作る方法



ロゴ、メニュー、コピーライトで構成されたシンプルなフッターを作る方法


