カード – ケケンタの独学ITブログ https://kekenta-it-blog.com プログラミングやWeb制作の情報を発信 Wed, 06 Aug 2025 06:03:59 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://kekenta-it-blog.com/wp-content/uploads/2023/07/cropped-KEKENTA-BLOG-32x32.png カード – ケケンタの独学ITブログ https://kekenta-it-blog.com 32 32 【コピペOK】カード・アイテム系アニメーション｜5種類【Web制作】 https://kekenta-it-blog.com/card-item-animations-guide/ https://kekenta-it-blog.com/card-item-animations-guide/#respond Fri, 18 Jul 2025 07:19:29 +0000 https://kekenta-it-blog.com/?p=15403

今回はこのようなお悩みをお持ちの方へ向けて Web制作において人気の高いアニメーション効果カード・アイテム系アニメーション をご紹介します。 5種類のカード・アイテム系アニメーションを完全網羅した実装なので、いままさに「 […]]]>

ケケンタ

カードにホバー効果を実装したい……

ケケンタ

商品アイテムをより魅力的にしたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
カード・アイテム系アニメーション

をご紹介します。

5種類のカード・アイテム系アニメーションを完全網羅した実装なので、いままさに「カードのホバー効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するカード・アイテム系アニメーション
  • リフト（要素が浮き上がる）
  • ティルト（3D傾斜効果）
  • フリップ（カードが裏返る）
  • ズーム（画像の拡大）
  • オーバーレイ（情報オーバーレイの表示）
ケケンタ

特に商品カードやポートフォリオアイテムには、ホバー効果が非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです！

なお、今回ご紹介するアニメーションはほとんどがCSSのみで実装可能なため、どなたでも安心してご活用いただけます！

あわせて読みたい

【コピペOK】ハンバーガーメニューのスライドアニメーション｜5種類【Web制作】
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】背景アニメーション｜5種類【Web制作】

カード・アイテム系アニメーションとは

カード・アイテム系アニメーションは、カードやアイテム要素にホバー効果を適用することで、ユーザーの注目を集め、インタラクティブな体験を提供するアニメーション効果です。視覚的な魅力とユーザビリティの向上を同時に実現する効果的な手法です。

効果的な使用場面

適している場面

  • 商品カード
  • ポートフォリオアイテム
  • ブログ記事カード
  • サービス紹介カード
  • ギャラリーアイテム

避けるべき場面

  • 重要な情報の表示部分
  • 頻繁にクリックされる要素（過度なアニメーション）
  • アクセシビリティを重視する場面

実装方法の比較

アニメーション難易度視覚的インパクトパフォーマンスブラウザ対応
リフト⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
ティルト⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
フリップ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
ズーム⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
オーバーレイ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

リフト

① デモ

See the Pen 【カード・アイテム】リフト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このリフト効果の特徴
  • 要素が浮き上がる効果
  • 影の変化で立体感を演出
  • スムーズな上昇アニメーション
  • 高級感のある演出

② HTML

<div class="card-lift">
    <img src="https://picsum.photos/300/200?random=1" alt="カード画像">
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-lift {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-lift img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* 大きなリフト効果 */
.card-lift-large:hover {
    transform: translateY(-20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 小さなリフト効果 */
.card-lift-small:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* リフト + スケール */
.card-lift-scale:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

ティルト

① デモ

See the Pen 【カード・アイテム】ティルト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このティルト効果の特徴
  • 3D傾斜効果
  • マウス位置に応じた動的な変化
  • リアルな立体感
  • 高度なインタラクション

② HTML

<div class="card-tilt" id="tiltCard">
    <img src="https://picsum.photos/300/200?random=2" alt="カード画像">
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-tilt {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.1s ease;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-tilt img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ JavaScript

document.getElementById('tiltCard').addEventListener('mousemove', function(e) {
    const card = this;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;

    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
});

document.getElementById('tiltCard').addEventListener('mouseleave', function() {
    this.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
});

⑤ カスタマイズ例

/* より大きなティルト効果 */
.card-tilt-large {
    transition: transform 0.05s ease;
}

/* ティルト + リフト */
.card-tilt-lift:hover {
    transform: translateY(-5px) perspective(1000px) rotateX(5deg) rotateY(5deg);
}

フリップ

① デモ

See the Pen 【カード・アイテム】フリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴
  • カードが裏返る効果
  • 表と裏の情報を表示
  • 3D回転アニメーション
  • 情報量の増加

② HTML

<div class="card-flip">
    <div class="card-inner">
        <div class="card-front">
            <img src="https://picsum.photos/300/200?random=3" alt="カード画像">
            <div class="card-content">
                <h3>カードタイトル</h3>
                <p>ホバーで詳細を表示</p>
            </div>
        </div>
        <div class="card-back">
            <div class="card-content">
                <h3>詳細情報</h3>
                <p>カードの詳細な説明文がここに入ります。より多くの情報を表示できます。</p>
                <button class="btn">詳細を見る</button>
            </div>
        </div>
    </div>
</div>

③ CSS

.card-flip {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-flip:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
}

.card-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0 0 15px 0;
    color: #666;
    line-height: 1.5;
}

.btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

④ カスタマイズ例

/* 水平フリップ */
.card-flip-horizontal:hover .card-inner {
    transform: rotateY(180deg);
}

/* 垂直フリップ */
.card-flip-vertical:hover .card-inner {
    transform: rotateX(180deg);
}

/* スローフリップ */
.card-flip-slow .card-inner {
    transition: transform 1s;
}

ズーム

① デモ

See the Pen 【カード・アイテム】ズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴
  • 画像の拡大効果
  • スムーズな拡大アニメーション
  • オーバーフローの制御
  • 視覚的な注目効果

② HTML

<div class="card-zoom">
    <div class="image-container">
        <img src="https://picsum.photos/300/200?random=4" alt="カード画像">
    </div>
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-zoom {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
}

.image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-zoom:hover img {
    transform: scale(1.1);
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* 大きなズーム効果 */
.card-zoom-large:hover img {
    transform: scale(1.2);
}

/* 小さなズーム効果 */
.card-zoom-small:hover img {
    transform: scale(1.05);
}

/* ズーム + フェード */
.card-zoom-fade img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-zoom-fade:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

オーバーレイ

① デモ

See the Pen 【カード・アイテム】オーバーレイ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このオーバーレイ効果の特徴
  • 情報オーバーレイの表示
  • フェードインアニメーション
  • 追加情報の表示
  • 視覚的な階層構造

② HTML

<div class="card-overlay">
    <img src="https://picsum.photos/300/200?random=5" alt="カード画像">
    <div class="overlay">
        <div class="overlay-content">
            <h3>詳細情報</h3>
            <p>カードの詳細な説明文がここに入ります。</p>
            <button class="btn">詳細を見る</button>
        </div>
    </div>
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-overlay {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.card-overlay img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-overlay:hover .overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: white;
    padding: 20px;
}

.overlay-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.overlay-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* スライドアップオーバーレイ */
.overlay-slide {
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-overlay:hover .overlay-slide {
    opacity: 1;
    transform: translateY(0);
}

/* スケールオーバーレイ */
.overlay-scale {
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-overlay:hover .overlay-scale {
    opacity: 1;
    transform: scale(1);
}

/* グラデーションオーバーレイ */
.overlay-gradient {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
}

まとめ

今回ご紹介した5種類のカード・アイテム系アニメーションはいかがでしたでしょうか？

ケケンタ

特に商品カードやポートフォリオアイテムには、ホバー効果が非常に効果的です。ユーザーの注目を集め、インタラクティブな体験を提供することで、UXの大幅な向上が期待できます。

実装のポイント

  • リフト：浮き上がる効果で注目を集める
  • ティルト：3D効果でリアルな立体感を演出
  • フリップ：裏返る効果で情報量を増やす
  • ズーム：拡大効果で視覚的な注目を集める
  • オーバーレイ：追加情報を美しく表示する

これらのアニメーションを組み合わせることで、より洗練されたユーザーインターフェースを実現できます。

ケケンタ

今回ご紹介したコードは、実際のプロジェクトでもすぐにご活用いただけます。ぜひお試しください！

あわせて読みたい

【コピペOK】ハンバーガーメニューのスライドアニメーション｜5種類【Web制作】
【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】
【コピペOK】背景アニメーション｜5種類【Web制作】

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

  • 学習の方向性に迷いがある方
  • 効率的にスキルを身につけたい方
  • 転職や副業でWeb制作を活用したい方
  • 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい
忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

スライダー

特殊効果

]]> https://kekenta-it-blog.com/card-item-animations-guide/feed/ 0