株式会社BTFへようこそ!

みてくれてありがとう!

作り方としては、index.htmlファイルとstyles.cssファイルを同じフォルダ内に置いて、中身をこのように書くだけになります。

index.htmlの内容

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>おしゃれなカードコンポーネント</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <div class="card-component">
            <div class="card-inner">
                <div class="card-front">
                    <h1>株式会社BTFへようこそ!</h1>

                </div>
                <div class="card-back">
                    <h1>みてくれてありがとう！</h1>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

styles.cssの内容

.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
  font-family: "Arial", sans-serif;
}

.card-component {
  perspective: 1000px;
}

.card-inner {
  width: 500px;
  height: 200px;
  position: relative;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.card-front {
  background: linear-gradient(45deg, #6a85b6, #bac8e0);
  color: white;
}

.card-back {
  background: linear-gradient(45deg, #ffb6b9, #fae3d9);
  color: black;
  transform: rotateY(180deg);
}

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

.card-component:hover .card-front,
.card-component:hover .card-back {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .card-inner {
    width: 250px;
    height: 170px;
  }

  h1 {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .card-inner {
    width: 200px;
    height: 140px;
  }

  h1 {
    font-size: 18px;
  }
}

@media (max-width: 320px) {
  .card-inner {
    width: 170px;
    height: 120px;
  }

  h1 {
    font-size: 16px;
  }
}

このように2つのファイルを用意して書き込むだけで最初にご紹介した、マウスカーソルを合わせるだけで裏の内容が確認できるカードを作成することができます！

今回紹介したようなおしゃれなカードなどを使ってホームページを作成したい方がいましたら、下のお問い合わせフォームからご相談ください！

最後まで読んでいただきありがとうございました！

おしゃれなカードの作り方

株式会社BTFへようこそ!

みてくれてありがとう!

コメント