【Next.js + ChakraUI】ヒーローセクションを作る方法

2024年5月13日2024年5月14日

トップページにヒーローセクションを設置したい！

このような方に向けて書きました。

トップページにドーンと大きめのグラフィックが入ると、ウェブサイトが締まります。

本記事では Next.js と ChakraUI を使ったヒーローセクションの作り方を解説します。

Contents

【Next.js】ヒーローセクションを作る方法
- コンポーネントを作成
- index.tsx にインポートして使用
ヒーローセクションのカスタマイズ
まとめ

【Next.js】ヒーローセクションを作る方法

以下の手順で行います。

コンポーネントを作成
index.tsxにインポートして使用

順番に解説します。

コンポーネントを作成

ヒーローセクション用のコンポーネントを作成しましょう。

ファイル名はHeroSection.tsxとします。

import { Box, Heading, Button } from '@chakra-ui/react';

function HeroSection() {
    return (
        <Box bg="teal" color="white" p={10} textAlign="center">
            <Heading mb={4}>Welcome to Our Website!</Heading>
            <Button colorScheme="pink">Get Started</Button>
        </Box>
    );
}

export default HeroSection;

Chakra UI の Box コンポーネントの属性を指定することで、デザインを加えました。

属性	内容
`bg`	背景色を指定
`color`	文字色を指定
`p`	パディングを指定
`textAlign`	テキストの表示位置を指定

各属性の内容

ここでは背景色としてtealを単色で適用しました。

公式ドキュメント

» 参考：Default Theme (teal) – Chakra UI

index.tsx にインポートして使用

先ほど作成したHeroSection.tsxをindex.tsx内でインポートしましょう。

import { Box } from '@chakra-ui/react';
import Navbar from './Navbar';
import HeroSection from './HeroSection';

function HomePage() {
    return (
        <Box>
            <Navbar />
            <HeroSection />
            {/* その他のコンポーネントが入る */}
        </Box>
    );
}

export default HomePage;

挿入したい箇所に<HeroSection />を挿入すればOKです。

ヒーローセクションのカスタマイズ

高さを調整したい場合

ヒーローセクションの高さは Chakra UI のBoxコンポーネントのうち、height または minHeight プロパティを使います。

高さを500pxにしたい場合には、以下です。

<Box bg="teal" color="white" p={10} textAlign="center" height="500px">

またヒーローセクションを画面全体に設置したい場合には、以下のように最低高さを設定します。

<Box bg="teal" color="white" p={10} textAlign="center" minHeight="100vh">

1vhはブラウザで表示する画面を100分の1した高さなので、100vhとすると画面全体を覆います。

見出しとボタンをヒーローセクションの中央に配置したい

Boxコンポーネントの属性の設定を変更します。

<Box bg="teal" color="white" p={10} textAlign="center" minHeight="100vh" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
    <Heading mb={4}>Welcome to Our Website!</Heading>
    <Button colorScheme="pink">Get Started</Button>
</Box>

それぞれの属性は、以下のような役割です。

属性	役割
`bg="teal"`	背景色はティール色
`color="white"`	テキストは白色
`p={10}`	パディングは10
`textAlign="center"`	テキストは中央揃え
`minHeight="100vh"`	画面全体に表示
`display="flex"`	要素をフレックスボックスとして設定
`flexDirection="column"`	フレックスボックスを縦方向に設定
`alignItems="center"`	子要素を横方向の中央に配置
`justifyContent="center"`	子要素を縦方向の中央に配置

属性ごとの説明

ヒーローセクションの背景に画像を指定する

はい、Chakra UIのBoxコンポーネントに背景画像を設定することができます。

backgroundImageプロパティを使用して、背景画像のURLを指定します。

<Box 
  bg="teal" 
  color="white" 
  p={10} 
  textAlign="center" 
  minHeight="100vh" 
  display="flex" 
  flexDirection="column" 
  alignItems="center" 
  justifyContent="center"
  backgroundImage="url('https://example.com/your-image.jpg')"
  backgroundSize="cover"
  backgroundPosition="center"
>
    <Heading mb={4}>Welcome to Our Website!</Heading>
    <Button colorScheme="pink">Get Started</Button>
</Box>

属性の内容は以下のとおりです。