AI向け説明 AI Description

`L-007` はサービス紹介ページで頻出する料金比較レイアウトです。CSS Gridを使用してカードを並べ、特定のカード（`.popular`クラス）を視覚的に強調します。レスポンシブ対応でスマートフォンでは縦積みに変化します。

`L-007` is a standard pricing comparison layout. It uses CSS Grid to align cards responsive, and highlights a specific card (via `.popular` class) to guide user choice.

調整可能パラメータ Adjustable Parameters

• --primary-color — 強調色（バッジ、ボタン）Primary color (badge, buttons)
• --card-gap — カード間の隙間Gap between cards

実装 Implementation

HTML + CSS

<div class="pricing-grid">
  <div class="pricing-card popular">
    <div class="popular-badge">Popular</div>
    <div class="price">$29</div>
    <!-- content -->
  </div>
</div>

<style>
:root {
  --primary-color: #5c6ac4;
  --card-gap: 24px;
}
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--card-gap); }
.pricing-card.popular { border-color: var(--primary-color); transform: scale(1.05); }
.popular-badge { background: var(--primary-color); }
</style>

React (JSX + CSS)

// react/L-007.jsx
import './L-007.css';

export default function PricingGrid() {
  return (
    <div className="pricing-grid">
      <div className="pricing-card">
        <div className="plan-name">Free</div>
        <div className="plan-price">$0 <span>/mo</span></div>
        <ul className="plan-features">
          <li>1 User</li>
          <li>5 Projects</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
      <div className="pricing-card popular">
        <div className="popular-badge">Popular</div>
        <div className="plan-name">Pro</div>
        <div className="plan-price">$29 <span>/mo</span></div>
        <ul className="plan-features">
          <li>5 Users</li>
          <li>Unlimited Projects</li>
          <li>Analytics</li>
        </ul>
        <button className="plan-button">Get Started</button>
      </div>
    </div>
  );
}

/* react/L-007.css */
/* L-007: React styles */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 20px;
}

.pricing-card {
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.pricing-card.popular {
  border-color: #5c6ac4;
  box-shadow: 0 4px 20px rgba(92, 106, 196, 0.15);
}

.popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5c6ac4;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.plan-name {
  font-size: 18px;
  font-weight: 600;
  color: #5c6184;
}

.plan-price {
  font-size: 42px;
  font-weight: 700;
  color: #1d2242;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.plan-price span {
  font-size: 16px;
  font-weight: 400;
  color: #5c6184;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1d2242;
}

.plan-features li::before {
  content: '✓';
  color: #5c6ac4;
  font-weight: bold;
}

.plan-button {
  wudth: 100%;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #e0e4f0;
  background: transparent;
  color: #1d2242;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pricing-card.popular .plan-button {
  background: #5c6ac4;
  border-color: #5c6ac4;
  color: #fff;
}

.plan-button:hover {
  opacity: 0.9;
  transform: scale(1.02);
}