【React】Material UI(MUI)のGridによるレスポンシブデザインを実装｜ポートフォリオサイトの作り方

作成日: 2025年10月08日更新日: 2025年10月08日

開発環境

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

Material UI(MUI)のGridによるレスポンシブデザインを実装する手順

Material UI(MUI)のGridによるレスポンシブデザインを実装する手順を解説していきます。

Material UIからレスポンシブデザインに必要なものをインポートする

まずは Material UIからレスポンシブデザインに必要なものをインポートします。


1// react-portfolio-app/src/pages/homes/top.tsx 
2import React from "react";
3+ import Box from "@mui/material/Box";
4+ import Container from "@mui/material/Container";
5+ import Grid from "@mui/material/Grid";
6+ import Typography from "@mui/material/Typography";
7+ import Button from "@mui/material/Button";
8
9const Top: React.FC = () => {

BoxでWrapperとしての役割、Containerで横幅の制御、Gridでカラムのレイアウトを制御する構成にしていきます。トップページはLPにしたいため、上記の構成で各セクションのレイアウトを作成していきます。

各セクションのレスポンシブレイアウトを作成する

次に各セクションのレスポンシブレイアウトを作成します。


1// react-portfolio-app/src/pages/homes/top.tsx 
2import React from "react";
3import Box from "@mui/material/Box";
4import Container from "@mui/material/Container";
5import Grid from "@mui/material/Grid";
6import Typography from "@mui/material/Typography";
7import Button from "@mui/material/Button";
8
9const Top: React.FC = () => {
10    return(
11        <>
12+           <Box sx={{ height: "65vh", backgroundColor: "red" }}>
13+               <Container maxWidth='md'>
14+                   <Grid container rowSpacing={0} columnSpacing={2}>
15+                       <Grid item xs={12} md={12}>
16+                           <Typography component="h2" variant="h2">
17+                               MVタイトル
18+                           </Typography>
19+                       </Grid>
20+                       <Grid item xs={12} md={12}>
21+                           <Typography>
22+                               テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
23+                           </Typography>
24+                       </Grid>
25+                   </Grid>
26+               </Container>
27+           </Box>
28+           <Box>
29+               <Container maxWidth='md'>
30+                   <Grid container rowSpacing={2} columnSpacing={2}>
31+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
32+                           <Typography component="h2" variant="h2">
33+                               Skill
34+                           </Typography>
35+                       </Grid>
36+                       <Grid item xs={12} md={4}>
37+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
38+                       </Grid>
39+                       <Grid item xs={12} md={4}>
40+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
41+                       </Grid>
42+                       <Grid item xs={12} md={4}>
43+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
44+                       </Grid>
45+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
46+                           <Button variant="contained" size="large">
47+                               LearnMore
48+                           </Button>
49+                       </Grid>
50+                   </Grid>
51+               </Container>
52+           </Box>
53+           <Box>
54+               <Container maxWidth='md'>
55+                   <Grid container rowSpacing={2} columnSpacing={2}>
56+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
57+                           <Typography component="h2" variant="h2">
58+                               Production
59+                           </Typography>
60+                       </Grid>
61+                       <Grid item xs={12} md={4}>
62+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
63+                       </Grid>
64+                       <Grid item xs={12} md={4}>
65+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
66+                       </Grid>
67+                       <Grid item xs={12} md={4}>
68+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
69+                       </Grid>
70+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
71+                           <Button variant="contained" size="large">
72+                               LearnMore
73+                           </Button>
74+                       </Grid>
75+                   </Grid>
76+               </Container>
77+           </Box>
78+           <Box>
79+               <Container maxWidth='md'>
80+                   <Grid container rowSpacing={2} columnSpacing={2}>
81+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
82+                           <Typography component="h2" variant="h2">
83+                               Profile
84+                           </Typography>
85+                       </Grid>
86+                       <Grid item xs={12} md={4}>
87+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
88+                       </Grid>
89+                       <Grid item xs={12} md={8}>
90+                           <Box sx={{ height: 200, backgroundColor: 'red' }}></Box>
91+                       </Grid>
92+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
93+                           <Button variant="contained" size="large">
94+                               LearnMore
95+                           </Button>
96+                       </Grid>
97+                   </Grid>
98+               </Container>
99+           </Box>
100+           <Box>
101+               <Container maxWidth='md'>
102+                   <Grid container rowSpacing={2} columnSpacing={2}>
103+                       <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}>
104+                           <Typography component="h2" variant="h2">
105+                               Contact
106+                           </Typography>
107+                       </Grid>
108+                       <Grid item xs={12} md={12}>
109+                           <Box sx={{ height: 400, backgroundColor: 'red' }}></Box>
110+                       </Grid>
111+                   </Grid>
112+               </Container>
113+           </Box>
114        </>
115    );
116};
117
118export default Top;

Material UI(MUI)のGridは12分割グリッドになっており、xsやmdなどの横幅によってカラムをどれだけ割り当てるかを調整することができます。 MV部分は背景とタイトルを表示できる1カラム構成、Skill部分とProduction部分は3カラム構成、Profile部分は左に画像を入れて右にテキストを挿入できる構成にしています。今回はわかりやすいようにGrid部分にはバックグラウンドカラーを割り当てています。

おわりに

ReactでMaterial UI(MUI)のGridによるレスポンシブデザインを実装するための手順を解説してきましたが、いかがだったでしょうか。 Gridによってとても簡単にレスポンシブなデザインを実装することができるため、Bootstrapなどのライブラリを使ったことがある方にとっては使いやすいかと思います。是非、Reactにレスポンシブデザインを取り入れていきましょう。