【React】MVに背景画像を表示させる｜ポートフォリオサイトの作り方

動画で解説を見る

1 開発環境
2 ReactでMVに背景画像を表示させる手順
3 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0
react-router-dom:6.8.2
typescript:4.9.5
mui:5.11.10
mui/icons-material:5.11.11

ReactでMVに背景画像を表示させる手順

ReactでMVに背景画像を表示させる手順を解説します。

画像を設置する位置を決める

まずは画像を設置する位置を決めます。

画像フォルダの設置する場所は「public側」にするか、「src側」にするかはプロジェクトによって異なりますが、今回は「src側」に画像を設置します。

react-portfolio-app
└─src
    └─assets
    　  └─images
            └─mv.jpg

react-portfolio-app

└─src

└─assets

　 └─images

└─mv.jpg

画像をインポートする

次に画像をインポートします。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Skill
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Production
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Profile
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

import React from "react";

import Box from "@mui/material/Box";

import Container from "@mui/material/Container";

import Grid from "@mui/material/Grid";

import Typography from "@mui/material/Typography";

import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"

const Top: React.FC = () => {

return(

コンポーネントの階層からみたフォルダの位置によって画像パスはかわります。

背景画像を表示する

次に背景画像を表示します。

背景画像を表示させるには、cssでbackground-imageに背景画像のパスを割り当てる、コンポーネント内でスタイルをインラインで指定する方法があります。

インラインでスタイルを指定することで、CSSファイルを使用せずに背景画像を設定することができますが、スタイルの管理が複雑になりやすくなるため、使用する場合は注意が必要です。

今回はコンポーネント内でスタイルをインラインで指定する方法で記述しています。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Skill
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Production
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Profile
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

13	<Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>

wrapperの役割であるBox部分にbackgroundImageをインラインで記述していきます。

JavaScriptでは「(バッククォート文字)」を使用することによってテンプレートリテラルにプレースホルダーを含めることができます。

プレースホルダーはドル記号と波括弧 (${expression}) で記述することにより、プレースホルダー内の式とバッククォート文字「」の間にあるテキストが関数に渡されます。

「'（シングルクォート）」や「"（ダブルルクォート）」の場合は「+」で文字列を連結させるように記述します。

MV部分のデザインを整える

最後にMV部分のデザインを整えます。

import React from "react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";

import MV from "../../assets/images/mv.jpg"

const Top: React.FC = () => {
    return(
        <>
            <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}>
                <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}>
                    <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}>
                        <Grid item xs={12} md={12}>
                            <Typography component="h2" variant="h2">
                                MVタイトル
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Typography>
                                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                            </Typography>
                        </Grid>
                    </Grid>
                </Container>
                <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}>
                    LearnMore
                </Button>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Skill
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Production
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Profile
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={4}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={8}>
                            <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
                        </Grid>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Button variant="contained" size="large">
                                LearnMore
                            </Button>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
            <Box>
                <Container maxWidth='md'>
                    <Grid container rowSpacing={2} columnSpacing={2}>
                        <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
                            <Typography component="h2" variant="h2">
                                Contact
                            </Typography>
                        </Grid>
                        <Grid item xs={12} md={12}>
                            <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
                        </Grid>
                    </Grid>
                </Container>
            </Box>
        </>
    );
};

export default Top;

import MV from "../../assets/images/mv.jpg"

const Top: React.FC = () => {

return(

MVタイトル

</Typography>

</Grid>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

</Typography>

</Grid>

</Container>

LearnMore

</Button>

</Box>

wrapperの役割であるBoxにpositionプロパティにrelativeを設定し、MVのタイトルとテキスト部分、ボタン部分の位置を整えています。

ボタン部分もコンテナーで囲むようにしておけば、ボタンの数を簡単に増やすこともできますので、デザインに合わせて調整してください。

おわりに

ReactでMV部分に背景画像を表示させる手順を解説してきましたが、いかがだったでしょうか。

「`(バッククォート文字)」と「'（シングルクォート）」、または「"（ダブルルクォート）」では、記述の仕方が少し異なりますので、画像が表示されない場合は見直してみてください。

是非、ReactでポートフォリオサイトのMV部分に背景画像を表示しておしゃれなデザインにしていきましょう。