Open Fumiya-Matsumoto opened 2 years ago
/ new_post /
position: relative; width: 500px; height: 604.55px;
background: #FFFFFF; border: 1.51515px solid #0BBBD7; box-shadow: 0px 6.06061px 6.06061px rgba(0, 0, 0, 0.25); border-radius: 15.1515px 15.1515px 0px 0px;
/ Group 44 /
position: absolute; width: 500px; height: 60.61px; left: 0px; top: 209.09px;
/ Rectangle 13 /
box-sizing: border-box;
position: absolute; left: 0%; right: 0%; top: 34.59%; bottom: 55.39%;
background: #FFFFFF; border-top: 1.51515px solid #C4C4C4;
/ strength_area /
position: absolute; left: 0%; right: 50%; top: 34.59%; bottom: 55.39%;
/ Rectangle 15 /
position: absolute; left: 34.55%; right: 55.76%; top: 30%; bottom: 30%;
background: #0BBBD7;
/ Rectangle 16 /
position: absolute; left: 46.67%; right: 43.64%; top: 30%; bottom: 30%;
background: #0BBBD7;
/ Rectangle 17 /
position: absolute; left: 58.79%; right: 31.52%; top: 30%; bottom: 30%;
background: #0BBBD7;
/ Rectangle 18 /
position: absolute; left: 70.91%; right: 19.39%; top: 30%; bottom: 30%;
background: #D9D9D9;
/ Rectangle 19 /
position: absolute; left: 83.03%; right: 7.27%; top: 30%; bottom: 30%;
background: #D9D9D9;
/ Rectangle 14 /
position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;
/ 強度 /
position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ Rectangle 14 /
box-sizing: border-box;
position: absolute; left: 0%; right: 0%; top: 14.54%; bottom: 75.44%;
background: #FFFFFF; border-bottom: 1.51515px solid #C4C4C4;
/ Group 43 /
position: absolute; width: 500px; height: 60.61px; left: 0px; top: 148.48px;
/ Rectangle 12 /
box-sizing: border-box;
position: absolute; left: 0%; right: 0%; top: 24.56%; bottom: 65.41%;
background: #FFFFFF;
/ place_area /
position: absolute; left: 50%; right: 0%; top: 24.56%; bottom: 65.41%;
/ 場所 /
position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ Rectangle 14 /
position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;
/ fa-solid:road /
position: absolute; left: 33.94%; right: 50.91%; top: 20%; bottom: 25%;
/ Vector /
position: absolute; left: 0%; right: 0%; top: 25%; bottom: 0%;
background: #0BBBD7;
/ wether_area /
position: absolute; left: 0%; right: 50%; top: 24.56%; bottom: 65.41%;
/ Rectangle 14 /
position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;
/ 天気 /
position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ fluent:weather-sunny-24-filled /
position: absolute; left: 33.33%; right: 52.12%; top: 20%; bottom: 20%;
/ Vector /
position: absolute; left: 8.33%; right: 8.33%; top: 8.33%; bottom: 8.33%;
background: #0BBBD7;
/ Group 38 /
position: absolute; left: 0%; right: -0.3%; top: 60.15%; bottom: 8.52%;
/ Rectangle 20 /
position: absolute; left: 0%; right: -0.3%; top: 60.15%; bottom: 8.52%;
/ Group 36 /
position: absolute; left: 0%; right: -0.3%; top: -0.5%; bottom: 87.97%;
/ Rectangle 10 /
position: absolute; left: 0%; right: 0%; top: -0.5%; bottom: 87.97%;
background: #0BBBD7; border-radius: 15.1515px 15.1515px 0px 0px;
/ Group 35 /
position: absolute; left: 3.94%; right: 85.15%; top: 1.25%; bottom: 89.72%;
/ Ellipse 3 /
position: absolute; left: 3.94%; right: 85.15%; top: 1.25%; bottom: 89.72%;
background: #FFFFFF;
/ Vector /
position: absolute; left: 4.24%; right: 85.45%; top: 1.5%; bottom: 89.97%;
background: #0BBBD7;
/ 2022 / 07 / 06 (水) 午前 /
position: absolute; left: 23.03%; right: 21.82%; top: 3.51%; bottom: 91.69%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 24.2424px; line-height: 29px; display: flex; align-items: center; text-align: center;
color: #FFFFFF;
/ ... /
position: absolute; left: 85.45%; right: -0.3%; top: 1.5%; bottom: 93.98%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 36.3636px; line-height: 44px; display: flex; align-items: center; text-align: center;
color: #FFFFFF;
/ Group 42 /
position: absolute; left: 3.94%; right: 5.15%; top: 47.12%; bottom: 42.11%;
/ Rectangle 11 /
position: absolute; left: 3.94%; right: 5.15%; top: 47.12%; bottom: 42.11%;
background: #0BBBD7; border-radius: 7.57576px;
/ Group 39 /
position: absolute; left: 33.94%; right: 59.39%; top: 52.88%; bottom: 44.36%;
/ km /
position: absolute; left: 33.94%; right: 59.39%; top: 52.88%; bottom: 44.36%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #FFFFFF;
/ kind_area /
position: absolute; left: 0%; right: 50%; top: 14.54%; bottom: 75.44%;
/ 強度 /
position: absolute; left: 32.73%; right: 36.97%; top: 22.5%; bottom: 22.5%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ 練習 /
position: absolute; left: 12.73%; right: 69.09%; top: 22.5%; bottom: 22.5%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ 強度 /
position: absolute; left: 6.36%; right: 84.55%; top: 60.15%; bottom: 34.34%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #808080;
/ Rectangle 24 /
box-sizing: border-box;
position: absolute; width: 454.55px; height: 133.33px; left: 19.7px; top: 407.58px;
background: #FFFFFF; border: 1.51515px solid #C4C4C4; border-radius: 7.57576px;
/ Rectangle 25 /
position: absolute; width: 125.76px; height: 37.88px; left: 39.39px; top: 298.48px;
background: #FFFFFF; border-radius: 7.57576px;
/ Group 45 /
position: absolute; width: 71.21px; height: 37.88px; left: 222.73px; top: 298.48px;
/ Group 40 /
position: absolute; left: 55.76%; right: 41.21%; top: 52.88%; bottom: 44.4%;
/ h /
position: absolute; left: 55.76%; right: 41.21%; top: 52.88%; bottom: 44.4%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #FFFFFF;
/ Rectangle 26 /
position: absolute; width: 50px; height: 37.88px; left: 222.73px; top: 298.48px;
background: #FFFFFF; border-radius: 7.57576px;
/ Group 47 /
position: absolute; width: 71.21px; height: 37.88px; left: 301.52px; top: 298.48px;
/ Group 40 /
position: absolute; left: 71.52%; right: 25.45%; top: 52.88%; bottom: 44.4%;
/ m /
position: absolute; left: 71.52%; right: 25.45%; top: 52.88%; bottom: 44.4%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #FFFFFF;
/ Rectangle 26 /
position: absolute; width: 50px; height: 37.88px; left: 301.52px; top: 298.48px;
background: #FFFFFF; border-radius: 7.57576px;
/ Group 46 /
position: absolute; width: 71.21px; height: 37.88px; left: 384.85px; top: 298.48px;
/ Group 45 /
position: absolute; width: 71.21px; height: 37.88px; left: 384.85px; top: 298.48px;
/ Group 40 /
position: absolute; left: 88.18%; right: 8.79%; top: 52.88%; bottom: 44.4%;
/ s /
position: absolute; left: 88.18%; right: 8.79%; top: 52.88%; bottom: 44.4%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 21.2121px; line-height: 26px; display: flex; align-items: center;
color: #FFFFFF;
/ Rectangle 26 /
position: absolute; width: 50px; height: 37.88px; left: 384.85px; top: 298.48px;
background: #FFFFFF; border-radius: 7.57576px;
/ button /
position: absolute; width: 98.48px; height: 33.33px; left: 375.76px; top: 556.06px;
/ Rectangle 28 /
box-sizing: border-box;
position: absolute; left: 0%; right: 0%; top: 0%; bottom: 0%;
background: #FFFFFF; border: 1.51515px solid #0BBBD7; border-radius: 4.54545px;
/ 保存 /
position: absolute; left: 29.23%; right: 30.77%; top: 22.73%; bottom: 18.18%;
font-family: 'Inter'; font-style: normal; font-weight: 700; font-size: 15.1515px; line-height: 18px; display: flex; align-items: center; text-align: center;
color: #0BBBD7;
投稿カードのコンポーネントを作成する
イメージ
CSS