コンテンツへスキップ
Karan Design System

フッター

プレビュー

特徴

  • レスポンシブデザイン: スマホ・タブレット・PC などの画面サイズに合わせて要素が自動的に並び替わり、見やすさを確保します。

  • ロゴは任意: logo を指定しない場合はロゴ部分が表示されず、ナビアイテムは右寄せ表示になります。

  • アクセシビリティ: リンクに対して hover や focus などの状態をわかりやすく示すスタイルを適用し、キーボードユーザーにも配慮した設計です。

  • ダークモード対応: 背景色や文字色がシステム設定に合わせて自動的に切り替わり、各デザインシステムのトークンにも対応。

  • 最小限の Props: logo（省略可）と navItems のみでリッチなフッターを簡単に実装できます。

ヒント

ロゴが長い場合でも、レイアウトが崩れないように適切なスタイリングを行っています。

プロパティ

プロパティ名型デフォルト値説明
logostring省略可
(空文字や未指定の場合はロゴ非表示)		フッター左側に表示される文字列。指定しない場合は右寄せのリンクのみが表示されます。
navItems{label: string; href: string;}[][ { label: "Privacy Policy", href: "/privacy" } ]フッターに表示したいリンクの配列。

Github

Tailwind
Lit

コード例

Footer.tsx
import "@/styles/tailwind.css";


type NavItem = {
  label: string;
  href: string;
};


type FooterProps = {
  logo?: string;
  navItems?: NavItem[];
};


export default function Footer({
  logo,
  navItems = [
    { label: "About", href: "#" },
    { label: "Contact", href: "#" },
    { label: "Q&A", href: "#" },
  ],
}: FooterProps) {
  return (
    <footer className="relative w-full bg-white text-black dark:bg-black dark:text-white mt-8">
      <div className="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-lime-500 via-teal-400 to-blue-500" />
      <div
        className={`flex flex-col md:flex-row items-center px-4 py-6 gap-4 text-center md:text-left md:px-8 ${
          logo ? "md:justify-between" : "md:justify-end"
        }`}
      >
        {logo && (
          <h2 className="text-xl font-bold overflow-hidden text-ellipsis whitespace-nowrap">
            {logo}
          </h2>
        )}
        <nav className="flex flex-wrap items-center gap-4 md:gap-8 justify-center md:justify-end w-full md:w-auto">
          {navItems.map(({ label, href }) => (
            <a
              key={href}
              href={href}
              className="block px-2 py-1 transition-opacity duration-200 hover:opacity-75 focus:opacity-75"
            >
              {label}
            </a>
          ))}
        </nav>
      </div>
      <div className="border-t border-dashed border-gray/30 dark:border-white/30 px-4 py-4 md:px-8 text-sm text-center">
        © {new Date().getFullYear()} Your Company
      </div>
    </footer>
  );
}

使用方法

コンポーネントをインポートして、ページやレイアウトに組み込みます。logo や navItems を必要に応じて上書きしてください。 各フレームワークによってインポート先は調整し、実際には上記のコードを別ファイルで管理すると便利です。

// import Footer from "@/components/Footer";
import Footer from "@/components/Footer";


export default function Layout({ children }) {
  return (
    <>
      <main id="main">{children}</main>
      <Footer
        logo="MyWebsite"
        navItems={[
          { label: "Privacy Policy", href: "/privacy" },
          { label: "Terms of Service", href: "/terms" },
          { label: "Contact", href: "/contact" },
        ]}
      />
    </>
  );
}

補足情報