当ブログでは、ぼくが実際のWebサイト制作案件で使用したコーディングのサンプルコードやコーディングで頻繁に使う機会が多いと思われるアニメーションなどの記事を100記事以上公開しています。
この記事ではそれらを探しやすいようにお悩みごとにまとめました。
コピペしただけで、とりあえず完成するものばかりですのでぜひ、参考にして下さいまし！
CSS/jQueryアニメーション
CSSアニメーションもしくはjQueryを使用したアニメーションの実装で役立つ記事はこちらです。
要素をスライドインで表示させる方法
【CSS アニメーション】要素をスライドインで表示させる方法Twitterのいいねボタンのエフェクトを再現する方法
Twitterのハートボタンのアニメーションを再現する方法【fontawesomeアイコンでの実装も収録】可視範囲に入ったら下線を引く方法
【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方ホバーしたら左から右へ下線を引く方法
【CSS】hover時に左から右に下線を引くアニメーションの作り方可視範囲に入ったら画像を黒いマスクと一緒に左から表示させる方法
画像を左から右にスクロール量に応じてスライドインで表示するアニメーション【Javascript・CSS】ライブラリ「AOS」でスクロールアニメーションを実装する方法
スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方要素を遅延表示させる方法
CSSアニメーションで遅延表示させる方法上から下に動き続ける円を作る方法
CSSアニメーションで上から下に動き続ける円を作る方法ボタン
ボタンの実装で役立つ記事はこちらです。
ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】アコーディオン
アコーディオンのコーディングで役立つ記事はこちらです。
アイコンも切り替わるアコーディオンを作る方法
コンテンツの表示非表示と同時にアイコンも切り替わるアコーディオンメニュー【Webサイト制作案件でよく使うサンプルコード】Vueでシンプルなアコーディオンを作る方法
jQueryとVue.jsでアコーディオンメニュー（toggle機能）を作る方法タブメニュー
タブメニューのコーディングで役立つ記事はこちらです。
Vueでタブ切り替えを作る方法
Vue.jsでタブ切り替え（タブメニュー）を作る方法スライドショー
スライドショーのコーディングで役立つ記事はこちらです。
Swiperでサムネイル付きスライドショーを作る方法
【Swiperカスタマイズ】サムネイル付きスライドショーを作る方法Vegas2で背景画像をスライドショーにする方法
背景画像をスライドショーにする方法【jQueryプラグインVegas2】モーダル
モーダルのコーディングもしくはモーダル・オーバーレイ周りで役立つ記事はこちらです。
シンプルなモーダルを作る方法
【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法プログレスバー
プログレスバー（進捗バー）のコーディングで役立つ記事はこちらです。
申し込み画面で使われる円形のプログレスバーを作る方法
CSSでプログレスバーを円形で作る方法三角形
三角形のコーディングで役立つ記事はこちらです。
左上・右上・右下・左下自由自在に三角形を配置する方法
CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】SVGで三角形を作って影をつける方法
SVGで作った三角形に影をつける方法【box-shadowでの表現を再現】吹き出し三角形を長方形の右側につける方法
CSSで吹き出し三角形を長方形の右側につける【Webサイト制作案件でよく使うサンプルコード】画像やiframeの縦横比
画像やiframeの縦横比を調整するときのコーディングで役立つ記事はこちらです。
画像の縦横比率を自由自在に維持する方法
CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】Google Mapの縦横比を調整してレスポンシブ対応する方法
GoogleマップをCSSでレスポンシブ対応させる方法パンくずリスト
パンくずリストのコーディングで役立つ記事はこちらです。
最もシンプルなパンくずリストの作り方
【コピペ】超絶シンプル！なパンくずリストの作り方マーカー
マーカー（蛍光ペン風装飾）のコーディングで役立つ記事はこちらです。
複数行に渡って綺麗にマーカーを引く方法
CSSで複数行に渡ってテキストにマーカーを引く方法平行四辺形のマーカーを引く方法
【CSS】テキストに平行四辺形のマーカーをtransform:skew()を使って引く方法フッター
フッターのコーディングもしくはフッター周りで役立つ記事はこちらです。
フッター固定メニューを作る方法
フッター固定メニューを作る方法【HTML・CSSをコピペで実装】3カラムのフッターを作る方法
【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え！フッターを最下部に固定する方法
【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法フッター手前で止まるボタンを作る方法
【jQuery】フッター手前で止まるボタンの実装方法ロゴ、メニュー、コピーライトで構成されたシンプルなフッターを作る方法
フッターのコーディング①【Webサイト制作案件でよく使うサンプルコード】
