How to create a footer layout フッターレイアウトの作り方
Responsive footer with multi-column links and copyright notice. マルチカラムのリンクと著作権表示を含むレスポンシブフッター。
ライブデモ Live Demo
概要・用途・特徴Overview, Usage & Features
何ができるかWhat it does
Responsive footer with multi-column links and copyright notice.
マルチカラムのリンクと著作権表示を含むレスポンシブフッター。
どこで使うかWhere to use
landing page, marketing site, portfolio, product page
ほぼ全てのWebサイト、ランディングページ、SaaSアプリ、ドキュメントサイト
特徴Key features
Responsive multi-column footer layout using CSS Grid or Flexbox. Includes logo, navigation links, social icons, and copyright sections. Mobile-first with graceful single-column collapse. Semantic HTML5 <footer> element.
CSS GridまたはFlexboxを使用したレスポンシブ複数列フッターレイアウト。ロゴ・ナビゲーションリンク・ソーシャルアイコン・著作権セクションを含む。モバイルファーストで優雅な単一列への折りたたみ。セマンティックなHTML5 <footer>要素。
調整可能パラメータ Adjustable Parameters
| Parameter | Default | Description |
|---|---|---|
--footer-bg | — | Footer background color |
--footer-text | — | Footer text color |
実装コード Implementation Code
// 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>
);
}: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; } }import './L-006.css';
export default function Footer() {
return (
<footer className="vibe-footer">
<div className="footer-grid">
<div className="footer-brand">
<h4>Vibe UI</h4>
<p>Beautiful UI library for React.</p>
</div>
<div className="footer-col">
<h5>Product</h5>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
</ul>
</div>
<div className="footer-col">
<h5>Company</h5>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div className="footer-col">
<h5>Legal</h5>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
</div>
</div>
<div className="footer-bottom">
© 2025 Vibe UI. All rights reserved.
</div>
</footer>
);
}/* L-006: React styles */
.vibe-footer {
background: #fff;
padding: 60px 24px 24px;
color: #1d2242;
border-top: 1px solid #e0e4f0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 60px;
}
.footer-brand h4 {
margin: 0 0 16px;
font-size: 20px;
}
.footer-col h5 {
margin: 0 0 20px;
font-size: 16px;
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-col a {
color: #5c6184;
text-decoration: none;
font-size: 14px;
}
.footer-col a:hover {
color: #5c6ac4;
}
.footer-bottom {
border-top: 1px solid #e0e4f0;
padding-top: 24px;
color: #5c6184;
font-size: 13px;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}仕組みとカスタマイズHow It Works & Customization
仕組みHow it works
A CSS Grid layout with auto-fit columns adapts to the available width. On wider screens, columns display link groups side-by-side. Below the mobile breakpoint, all columns stack vertically. Each column contains a heading and a list of links. The bottom bar holds copyright and legal links in a separate flex row.
auto-fitを使用したCSS Gridレイアウトが利用可能な幅に適応します。広い画面ではリンクグループを列並びに表示。モバイルブレークポイント以下では全ての列を縦積みにします。各列は見出しとリンクリストを含みます。ボトムバーは別のflex行に著作権と法的リンクを保持。
カスタマイズ方法Customization
Adjust grid-template-columns min width to control how many columns appear at each breakpoint. Add a newsletter signup form as one of the footer columns. Apply a dark/light footer by toggling a theme class on the <footer> element.
grid-template-columnsの最小幅を調整して各ブレークポイントで表示される列数を制御。フッターの1列としてニュースレター登録フォームを追加。<footer>要素のテーマクラスのトグルでダーク/ライトフッターを適用。
注意点Caveats
Use <nav aria-label="Footer navigation"> to distinguish the footer nav from the main nav for screen reader users. Avoid placing too many links in the footer as it can make the page's landmark regions confusing.
スクリーンリーダーユーザーのためにフッターナビをメインナビから区別するために<nav aria-label="フッターナビゲーション">を使用してください。フッターに多すぎるリンクを配置するとページのランドマーク領域が混乱する場合があります。
よくある質問 Frequently Asked Questions
How to customize the footer layout? Footer Layoutをカスタマイズするには？
Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.
コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。
How to use the footer layout in React? ReactでFooter Layoutを使うには？
Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.
提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。
What are the performance implications of footer layout? Footer Layoutのパフォーマンスへの影響は？
This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.
この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。
AIへの指示テンプレート AI Prompt Template
以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.