【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ

【コーディング】HTML・CSS・Javascriptサンプルコード記事まとめ

当ブログでは、ぼくが実際のWebサイト制作案件で使用したコーディングのサンプルコードコーディングで頻繁に使う機会が多いと思われるアニメーションなどの記事を100記事以上公開しています。

この記事ではそれらを探しやすいようにお悩みごとにまとめました。

コピペしただけで、とりあえず完成するものばかりですのでぜひ、参考にして下さいまし!

CSS/jQueryアニメーション

CSSアニメーションもしくはjQueryを使用したアニメーションの実装で役立つ記事はこちらです。

要素をスライドインで表示させる方法

【CSS アニメーション】要素をスライドインで表示させる方法【CSS アニメーション】要素をスライドインで表示させる方法

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

Twitterのハートボタンのアニメーションを再現する方法【fontawesomeアイコンでの実装も収録】Twitterのハートボタンのアニメーションを再現する方法【fontawesomeアイコンでの実装も収録】

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

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方

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

【CSS】hover時に下線を引くアニメーションの作り方【CSS】hover時に左から右に下線を引くアニメーションの作り方

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

画像を左から右にスライドインで表示するアニメーション画像を左から右にスクロール量に応じてスライドインで表示するアニメーション【Javascript・CSS】

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

スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方

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

CSSアニメーションで遅延表示させる方法CSSアニメーションで遅延表示させる方法

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

CSSアニメーションで上から下に動き続ける円を作る方法CSSアニメーションで上から下に動き続ける円を作る方法

ボタン

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

ボタンコーディング記事まとめ【HTML・CSS・jQuery】ボタンコーディングサンプルコード記事まとめ【HTML・CSS・jQuery】

アコーディオン

アコーディオンのコーディングで役立つ記事はこちらです。

アイコンも切り替わるアコーディオンを作る方法

コンテンツの表示非表示と同時にアイコンも切り替わるアコーディオンメニュー【Webサイト制作案件でよく使うサンプルコード】コンテンツの表示非表示と同時にアイコンも切り替わるアコーディオンメニュー【Webサイト制作案件でよく使うサンプルコード】

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

jQueryとVue.jsでアコーディオンメニュー(toggle機能)を作る方法jQueryとVue.jsでアコーディオンメニュー(toggle機能)を作る方法

タブメニュー

タブメニューのコーディングで役立つ記事はこちらです。

Vueでタブ切り替えを作る方法

Vue.jsでタブ切り替え(タブメニュー)を作る方法Vue.jsでタブ切り替え(タブメニュー)を作る方法

スライドショー

スライドショーのコーディングで役立つ記事はこちらです。

Swiperでサムネイル付きスライドショーを作る方法

【Swiper.jsカスタマイズ】サムネイル付きスライドショーを作る方法【Swiperカスタマイズ】サムネイル付きスライドショーを作る方法

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

背景画像をスライドショーにする方法背景画像をスライドショーにする方法【jQueryプラグインVegas2】

モーダル

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

シンプルなモーダルを作る方法

【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法【HTML、CSS、jQuery】オーバーレイとモーダルをシンプルに作る方法

プログレスバー

プログレスバー(進捗バー)のコーディングで役立つ記事はこちらです。

申し込み画面で使われる円形のプログレスバーを作る方法

CSSでプログレスバーを円形で作る方法

三角形

三角形のコーディングで役立つ記事はこちらです。

左上・右上・右下・左下自由自在に三角形を配置する方法

CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】

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

SVGで作った三角形に影をつける方法【box-shadowでの表現を再現】SVGで作った三角形に影をつける方法【box-shadowでの表現を再現】

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

CSSで吹き出し三角形を長方形の右側につける【Webサイト制作案件でよく使うサンプルコード】CSSで吹き出し三角形を長方形の右側につける【Webサイト制作案件でよく使うサンプルコード】

画像やiframeの縦横比

画像やiframeの縦横比を調整するときのコーディングで役立つ記事はこちらです。

画像の縦横比率を自由自在に維持する方法

CSSで画像の縦横比を維持したまま表示させる方法CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】

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

GoogleマップをCSSでレスポンシブ対応させる方法GoogleマップをCSSでレスポンシブ対応させる方法

パンくずリスト

パンくずリストのコーディングで役立つ記事はこちらです。

最もシンプルなパンくずリストの作り方

【コピペ】超絶シンプル!なパンくずリストの作り方【コピペ】超絶シンプル!なパンくずリストの作り方

マーカー

マーカー(蛍光ペン風装飾)のコーディングで役立つ記事はこちらです。

複数行に渡って綺麗にマーカーを引く方法

CSSで複数行に渡ってテキストにマーカーを引く方法CSSで複数行に渡ってテキストにマーカーを引く方法

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

CSSでテキストに平行四辺形のマーカーを引く方法【transform:(skew)】【CSS】テキストに平行四辺形のマーカーをtransform:skew()を使って引く方法

フッター

フッターのコーディングもしくはフッター周りで役立つ記事はこちらです。

フッター固定メニューを作る方法

フッター固定メニューを作る方法【HTML・CSSをコピペで実装】フッター固定メニューを作る方法【HTML・CSSをコピペで実装】

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

【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え!【CSS】flexboxで3カラムのフッターを作る。真ん中の要素は中央揃え!

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

【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法【CSS フッター】コンテンツ量が少ないページで最下部に固定する方法

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

jQueryでフッター手前で止まるボタンの実装方法【jQuery】フッター手前で止まるボタンの実装方法

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

フッターのコーディング①【Webサイト制作案件でよく使うサンプルコード】フッターのコーディング①【Webサイト制作案件でよく使うサンプルコード】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です