AI向け説明 AI Description

`L-006` は CSS Grid を使用した標準的なフッターレイアウトです。デスクトップではマルチカラム、モバイルではシングルカラムに自動的に切り替わります。ブランド情報、リンク集、法的事項を構造化して配置します。

`L-006` provides a standard footer layout using CSS Grid. It automatically switches from multi-column on desktop to single-column on mobile, structuring brand info, link groups, and legal text.

調整可能パラメータ Adjustable Parameters

• --footer-bg — フッターの背景色Footer background color
• --footer-text — フッターのテキスト色Footer text color

実装 Implementation

HTML + CSS

<footer class="site-footer">
  <div class="footer-grid">
    <div class="brand">Brand</div>
    <div class="links">
      <h5>Product</h5>
      <ul><li><a href="#">Link</a></li></ul>
    </div>
  </div>
  <div class="footer-bottom">Copyright 2025</div>
</footer>

<style>
:root {
  --footer-bg: #fff;
  --footer-text: #1d2242;
}
.site-footer { padding: 60px 24px; background: var(--footer-bg); color: var(--footer-text); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media(max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } }
</style>

React (JSX + CSS)

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

export default function Footer() {
  return (
    <footer className="vibe-footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <h4>Brand</h4>
        </div>
        <div className="footer-col">
          <h5>Links</h5>
          <ul>
            <li><a href="#">Home</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        © 2025 Brand Inc.
      </div>
    </footer>
  );
}