目次
開発環境
- 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 2 3 4 5 6 7 8 | 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"; const Top: React.FC = () => { |
BoxでWrapperとしての役割、Containerで横幅の制御、Gridでカラムのレイアウトを制御する構成にしていきます。
トップページはLPにしたいため、上記の構成で各セクションのレイアウトを作成していきます。
各セクションのレスポンシブレイアウトを作成する
次に各セクションのレスポンシブレイアウトを作成します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 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"; const Top: React.FC = () => { return( <> <Box sx={{ height: "65vh", backgroundColor: "red" }}> <Container maxWidth='md'> <Grid container rowSpacing={0} columnSpacing={2}> <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> </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; |
Material UI(MUI)のGridは12分割グリッドになっており、xsやmdなどの横幅によってカラムをどれだけ割り当てるかを調整することができます。
MV部分は背景とタイトルを表示できる1カラム構成、Skill部分とProduction部分は3カラム構成、Profile部分は左に画像を入れて右にテキストを挿入できる構成にしています。
今回はわかりやすいようにGrid部分にはバックグラウンドカラーを割り当てています。
おわりに
ReactでMaterial UI(MUI)のGridによるレスポンシブデザインを実装するための手順を解説してきましたが、いかがだったでしょうか。
Gridによってとても簡単にレスポンシブなデザインを実装することができるため、Bootstrapなどのライブラリを使ったことがある方にとっては使いやすいかと思います。
是非、Reactにレスポンシブデザインを取り入れていきましょう。