【React】プロフィールコンテンツにアイコン画像と自己紹介を表示させる｜ポートフォリオサイトの作り方
作成日: 更新日:
開発環境
- 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
- chart.js:4.4.0
- react-chartjs-2:5.2.0
Reactでよくあるプロフィールコンテンツのデザインを作成する手順
Reactでよくあるプロフィールコンテンツのデザインを作成する手順を解説します。
プロフィールコンテンツで使用する画像ファイルを準備する
まずはプロフィールコンテンツで使用する画像ファイルを準備します。 今回は縦横比「1:1」の画像を用意し、「public/images/common/配下」に画像を設置し、相対パスで画像を読み込ませていきたいと思います。 もし、ダミー画像を使ってとりあえずデザインを進めていきたい場合は「https://placehold.jp/」が使いやすいのでおすすめです。
プロフィールコンポーネントを作成する
次にプロフィールコンポーネントを作成します。
1// react-portfolio-app\src\components\ProfileList.tsx 2import React from "react"; 3import Box from "@mui/material/Box"; 4import Grid from "@mui/material/Grid"; 5import Typography from "@mui/material/Typography"; 6import Button from "@mui/material/Button"; 7 8const ProfileList: React.FC = () => { 9 return( 10 <> 11 <Grid container rowSpacing={2} columnSpacing={2}> 12 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 13 <Typography component="h2" variant="h2"> 14 Profile 15 </Typography> 16 </Grid> 17 <Grid item xs={12} md={4}> 18 <Box sx={{ width: "100%" }}> 19 <img style={{ width: "100%", height: "auto", borderRadius: "50%" }} src="/images/common/profile_image.jpg" /> 20 </Box> 21 </Grid> 22 <Grid item xs={12} md={8}> 23 <Box sx={{ width: "100%", paddingLeft: {sx: "0px", md: "30px"} }}> 24 <Typography variant="body2" color="text.secondary"> 25 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 26 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 27 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 28 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 29 </Typography> 30 </Box> 31 </Grid> 32 <Grid item xs={12} md={12} sx={{ textAlign: 'center' }}> 33 <Button variant="contained" size="large"> 34 LearnMore 35 </Button> 36 </Grid> 37 </Grid> 38 </> 39 ); 40}; 41 42export default ProfileList;
おしゃれなサイトではプロフィールのアイコン画像に丸い画像が表示されていると思いますが、スタイルに「borderRadius」プロパティに「50%」を当てると丸い画像になります。 また、グリッドはアイコン画像は「4」、自己紹介は「8」で割り当てています。
トップページコンポーネントを修正する
最後にトップページコンポーネントを修正します。
1// react-portfolio-app\src\pages\homes\top.tsx 2 3import MV from "../../assets/images/mv.jpg" 4import SkillList from "../../components/SkillList" 5import ProductionList from "../../components/ProductionList" 6+ import ProfileList from "../../components/ProfileList"; 7 8const Top: React.FC = () => { 9 return( 10 <> 11 <Box sx={{ height: "65vh", backgroundImage: "url(" + MV + ")", backgroundSize: "cover", backgroundPosition: "center", position: "relative" }}> 12 <Container maxWidth='md' sx={{ position: "absolute", top: "30%", left: "50%", transform: "translateX(-50%) translateY(-50%)" }}> 13 <Grid container rowSpacing={2} columnSpacing={2} sx={{ textAlign: "center",color: "#FFFFFF", textShadow: "1px 1px 3px #000000" }}> 14 <Grid item xs={12} md={12}> 15 <Typography component="h2" variant="h2"> 16 MVタイトル 17 </Typography> 18 </Grid> 19 <Grid item xs={12} md={12}> 20 <Typography> 21 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 22 </Typography> 23 </Grid> 24 </Grid> 25 </Container> 26 <Button variant="contained" size="large" sx={{ position: "absolute", bottom: "10%", left: "50%", transform: "translateX(-50%)" }}> 27 LearnMore 28 </Button> 29 </Box> 30 <Box> 31 <Container maxWidth='md'> 32 <SkillList /> 33 </Container> 34 </Box> 35 <Box> 36 <Container maxWidth='md'> 37 <ProductionList /> 38 </Container> 39 </Box> 40+ <Box> 41+ <Container maxWidth='md'> 42+ <ProfileList /> 43+ </Container> 44+ </Box> 45 <Box>
ProfileListコンポーネントをインポートし、プロフィールコンテンツでProfileListコンポーネントを呼び出す形にしています。
おわりに
Reactでよくあるプロフィールコンテンツのデザインを作成する手順を解説していきましたが、いかがだったでしょうか。 アイコン画像を丸くするだけでもおしゃれになりますし、グリッドを割り当て比率やテキストの色やフォントサイズを調整するだけでも印象はかなり変わります。 是非、Reactでおしゃれなデザインにしていきましょう。