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