- ChakraUI でフッターを作りたい！
このような方に向けて書きました。
ナビゲーションバーと同様、フッターはほとんどのページに必要なコンポーネントです。
ところがフッターはページの最後に表示されるものなので、表示位置の調整や書き方などで迷うことも多いと思います。
本記事では基本的なフッターの書き方をご紹介します。
フッターコンポーネントの作り方
以下の手順で進めていきます。
- Next.js と ChakraUI の環境構築
- フッターコンポーネントの作成
- フッターをレイアウトに組み込む
順番に解説していきます。
Next.js と ChakraUI の環境構築
まずは Next.js プロジェクトのセットアップを行います。
npx create-next-app frontend && cd frontend続いて ChakraUI プロジェクトを作成。
npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion最後に Next.js プロジェクトのpages/_app.tsxに ChakraUI プロバイダーを設定を行います。
import { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
function MyApp({ Component, pageProps }: AppProps) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp;<Component {...pageProps} />は Next.js の_app.tsxだけで使える特殊なコンポーネントで、各ページ内で定義されているコンポーネントがここに呼び出されます。
以上で、Next.js のプロジェクト立ち上げと ChakraUI を使うための準備が整いました。
フッターコンポーネントの作成
まずはcomponents/Footer.jsに、フッターの内容そのものを書きます。
import { Box, Stack, Text, Link } from '@chakra-ui/react';
function Footer() {
return (
<Box bg="gray.800" color="gray.200" p={4}>
<Stack direction="row" spacing={4} justify="center">
<Link href="#">プライバシーポリシー</Link>
<Link href="/about">サービスについて</Link>
</Stack>
<Text textAlign="center" mt={4}>
© 2024 Your-Site-Name. All rights reserved.
</Text>
</Box>
);
}
export default Footer;続いてcomponents/layout.tsxを作成します。
これはページ内のどこにフッターを表示させるかを決定するコンポーネントになります。
import { ReactNode } from "react";
import Footer from "./Footer";
interface LayoutProps {
children: ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
return (
<>
<main>{children}</main>
<Footer />
</>
);
};
export default Layout;<main>{children}</main>は、ページ内のフッター以外の要素を表します。
この要素の後に<Footer />を定義しているので、このレイアウトを使うと「ページの最後にフッターが表示される」状態になります。
このレイアウトを全ページに反映させるため、_app.tsxにLayoutを反映させましょう。
import { ChakraProvider } from "@chakra-ui/react";
import Layout from "../components/Layout";
import theme from "../theme";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider theme={theme}>
<Layout>
<Component {...pageProps} />
</Layout>
</ChakraProvider>
);
}
export default MyApp;フッターを適切な場所に表示させる
メインコンテンツが少ない場合、フッターは画面下部に配置されることが多いです。
ここではレイアウトの調整方法をご紹介します。
前提条件
components/Footer.tsxが次のようなコードだとします。
import { Box, Text } from '@chakra-ui/react';
const Footer = () => {
return (
<Box as="footer" width="100%" bg="gray.800" color="white" p={4} textAlign="center">
<Text>© 2024 Your Company</Text>
</Box>
);
};
export default Footer;上記は普通にフッターコンポーネントを作成しているだけです。
表示位置をLayout.tsxに定義する
表示位置をLayout.tsxとして、次のように記載します。
import { ReactNode } from 'react';
import { Box } from '@chakra-ui/react';
import Footer from './Footer';
interface LayoutProps {
children: ReactNode;
}
const Layout = ({ children }: LayoutProps) => {
return (
<Box display="flex" flexDirection="column" minHeight="100vh">
<Box as="main" flex="1">
{children}
</Box>
<Footer />
</Box>
);
};
export default Layout;レイアウトを調整しているのは、二つのBoxコンポーネントの属性です。
display="flex"
Boxをフレックスコンテナにしています。
display="flex"属性を加えると、そのコンポーネントは親要素になります。
フレックスコンテナで囲われたコンポーネントは、フレックスアイテムと呼ばれる小要素になります。
今回の例ではmainとFooterがフレックスアイテムに当たりますね。
小要素のレイアウトを操作するための準備がdisplay="flex"だと考えておけば良いでしょう。
flexDirection="column"
フレックスアイテムを「縦方向に配置」するためのものです。
仮に横方向に並べたい場合には、flexDirection="row"とします。
minHeight="100vh"
親要素であるフレックスコンテナの高さの上限値を指定します。
100vh（Viewport Height）は、ページを表示しているディスプレイの高さを100%とした場合にコンテンツをどれくらい表示させるかを制御するものです。
100vhなら、画面いっぱいまで表示させます。
flex="1"
小要素のBoxコンポーネントにあるflex="1"は、BoxとFooterの間に可能な限り余白を入れるという処理になります。
つまり、親要素のBoxコンポーネントでは画面高さ100%分までのエリアを確保しましたが、mainに100vhとあるのでmainが少なければ下方向に余白を入れて、余った部分にFooterが配置されます。
コメント