サイトフッター（サイトマップ型）
リンクを分類して並べる多カラムフッター。カラム数は auto-fit で自動調整され、狭い画面では自然に段組みが崩れます。JavaScript不要。
プレビュー
<footer class="site-footer">
<div class="site-footer__inner">
<div class="site-footer__brand">
<p class="site-footer__logo">Highneeds</p>
<p class="site-footer__tagline">
3D・Web・AIの実装を、事例とコードで追いかけるメディアです。
</p>
<ul class="site-footer__social">
<li>
<a class="site-footer__icon" href="/contact" aria-label="お問い合わせ">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<rect x="2" y="4" width="20" height="16" rx="2" />
<path d="m2 7 10 6 10-6" />
</svg>
</a>
</li>
<li>
<a class="site-footer__icon" href="/rss.xml" aria-label="RSS">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M4 11a9 9 0 0 1 9 9" />
<path d="M4 4a16 16 0 0 1 16 16" />
<circle cx="5" cy="19" r="1.5" fill="currentColor" stroke="none" />
</svg>
</a>
</li>
<li>
<!-- 各SNSのアイコンに差し替えて使ってください -->
<a class="site-footer__icon" href="https://example.com/" aria-label="SNS">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" />
<path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" />
</svg>
</a>
</li>
</ul>
</div>
<nav class="site-footer__nav" aria-label="フッターナビゲーション">
<div class="site-footer__column">
<h2 class="site-footer__heading">コンテンツ</h2>
<ul class="site-footer__list">
<li><a href="/thereed">3Dサイト</a></li>
<li><a href="/snippets">スニペット</a></li>
<li><a href="/news">ニュース</a></li>
<li><a href="/columns">コラム</a></li>
</ul>
</div>
<div class="site-footer__column">
<h2 class="site-footer__heading">ツール</h2>
<ul class="site-footer__list">
<li><a href="/templates">テンプレート配布</a></li>
<li><a href="/web-diagnosis">Web診断</a></li>
</ul>
</div>
<div class="site-footer__column">
<h2 class="site-footer__heading">サイト情報</h2>
<ul class="site-footer__list">
<li><a href="/about">運営について</a></li>
<li><a href="/privacy">プライバシーポリシー</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
<div class="site-footer__bottom">
<p class="site-footer__copyright">
<small>© 2026 Highneeds</small>
</p>
</div>
</footer>/* このスニペット配下だけ box-sizing を揃える（既存のリセットとは競合しません） */
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
box-sizing: border-box;
}
.site-footer {
--footer-bg: #f9fafb;
--footer-fg: #111827;
--footer-muted: #6b7280;
--footer-border: #e5e7eb;
--footer-accent: #2563eb;
background: var(--footer-bg);
border-top: 1px solid var(--footer-border);
color: var(--footer-fg);
font-size: 0.875rem;
}
.site-footer__inner {
display: grid;
gap: 2.5rem;
max-width: 1152px;
margin: 0 auto;
padding: 3rem 1rem;
}
@media (min-width: 768px) {
.site-footer__inner {
grid-template-columns: 1.2fr 2fr;
gap: 3rem;
}
}
.site-footer__logo {
margin: 0;
font-size: 1.125rem;
font-weight: 700;
}
.site-footer__tagline {
max-width: 34ch;
margin: 0.75rem 0 0;
color: var(--footer-muted);
line-height: 1.8;
}
.site-footer__social {
display: flex;
gap: 0.5rem;
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
}
.site-footer__icon {
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--footer-border);
border-radius: 50%;
color: var(--footer-muted);
transition: color 0.15s, border-color 0.15s;
}
.site-footer__icon svg {
width: 18px;
height: 18px;
}
.site-footer__icon:hover {
border-color: var(--footer-accent);
color: var(--footer-accent);
}
/* カラム数は幅に応じて自動で増減する */
.site-footer__nav {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 2rem;
}
.site-footer__heading {
margin: 0 0 0.875rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--footer-muted);
}
.site-footer__list {
display: grid;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer a {
color: inherit;
text-decoration: none;
}
.site-footer__list a {
color: var(--footer-muted);
transition: color 0.15s;
}
.site-footer__list a:hover {
color: var(--footer-fg);
text-decoration: underline;
}
.site-footer a:focus-visible {
outline: 2px solid var(--footer-accent);
outline-offset: 3px;
border-radius: 4px;
}
.site-footer__bottom {
border-top: 1px solid var(--footer-border);
}
.site-footer__copyright {
max-width: 1152px;
margin: 0 auto;
padding: 1.25rem 1rem;
color: var(--footer-muted);
}
@media (prefers-color-scheme: dark) {
.site-footer {
--footer-bg: #0b1220;
--footer-fg: #f9fafb;
--footer-muted: #9ca3af;
--footer-border: #374151;
--footer-accent: #3b82f6;
}
}
/* ここから下はプレビュー表示用です。コピーして使うときは不要です */
body {
margin: 0;
background: #ffffff;
font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
"Noto Sans JP", sans-serif;
color: #111827;
}
@media (prefers-color-scheme: dark) {
body {
background: #111827;
color: #f9fafb;
}
}