Webデザイン制作に欠かせない『Figma』
フロントエンドエンジニアとAI技術をつなげる法人様向けのFigmaプラグインです。
(個人事業主様もお気軽にご相談ください)
動画で詳しく
※︎ 音が出ます
<div style="position: absolute; display: flex; justify-content: center; align-items: center; gap: 20px; padding: 20px; width: 557.27px; height: 178px; background-color: #ffffff; border-radius: 15px; border: 1px solid #9b9b9b; box-sizing: border-box;">
<img src="https://via.placeholder.com/106x130" alt="" style="position: absolute; left: 20px; top: 24px; width: 106.27px; height: 130px;" />
<div style="position: absolute; left: 146.27px; top: 20px; display: flex; flex-direction: column; justify-content: center; gap: 20px; width: 391px; height: 138px;">
<div style="position: absolute; left: 0px; top: 0px; color: #232323; font-size: 18px; letter-spacing: 0.08em;">
お洗濯簡単!毎日着たくなる軽やかセーター
</div>
<div style="position: absolute; left: 0px; top: 46px; color: #232323; font-size: 16px; letter-spacing: 0.08em;">
¥2,300(税抜)
</div>
<div style="position: absolute; left: 0px; top: 89px; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 10px 0; width: 391px; height: 49px; background-color: #f88a5b; border-radius: 10px; box-sizing: border-box;">
<div style="position: absolute; left: 153px; top: 10px; color: #ffffff; font-size: 20px; font-weight: bold; letter-spacing: 0.08em;">
購入する
</div>
</div>
</div>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/106x130" alt="" class="product-image" />
<div class="product-details">
<div class="product-title">
お洗濯簡単!毎日着たくなる軽やかセーター
</div>
<div class="product-price">
¥2,300(税抜)
</div>
<div class="product-buy-button-wrapper">
<div class="product-buy-button">
購入する
</div>
</div>
</div>
</div>
<div class="element_0">
<img src="https://via.placeholder.com/106x130" alt="" class="element_1" />
<div class="element_4">
<div class="element_5">
お洗濯簡単!毎日着たくなる軽やかセーター
</div>
<div class="element_8">
¥2,300(税抜)
</div>
<div class="element_12">
<div class="element_13">
購入する
</div>
</div>
</div>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/106x130" alt="" class="product-image" />
<div class="product-info">
<div class="product-description">
お洗濯簡単!毎日着たくなる軽やかセーター
</div>
<div class="product-price">
¥2,300(税抜)
</div>
<div class="purchase-button-container">
<div class="purchase-button">
購入する
</div>
</div>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/106x130" alt="" class="card-image" />
<div class="card-content">
<div class="card-title">
お洗濯簡単!毎日着たくなる軽やかセーター
</div>
<div class="card-price">
¥2,300(税抜)
</div>
<div class="card-action">
<div class="button">
購入する
</div>
</div>
</div>
</div>
.selected-element {
position: relative;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 20px 20px 20px 20px;
width: 557.27px;
height: 178px;
background-color: #ffffff;
border-radius: 15px 15px 15px 15px;
border: 1px solid #9b9b9b;
box-sizing: border-box;
}
@media (max-width: 600px) {
.selected-element {
flex-direction: column;
width: 298px;
height: 354px;
}
}