html css react 商品情報コンポーネントのレイアウト部を作成 結論：css flexboxを使えば楽

概要

ECショップの商品情報の一部を実装します。下図みたいな奴ですね。（静岡県で有名な杏林堂って店のネットスーパの画像なんですけど）

今回の内容としては、html と css部分でビジュアル的な部分を実装します。

開発環境

IDE:VScode

├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

実装

cssの記法はvercel/styled-jsxを使っています。

productContent.tsx

import Image from 'next/image';

interface Props{
	productName:string;
	priceWithoutTax:number;
	priceIncludingTax:number;
	imageURL:string;
}
/**
 * 
 * @param props 商品情報 
 * @returns 商品情報を表示するコンポーネント
 */
export default function ProductContent(props : Props){

	return(
		<>
			<div className = 'ContentPadding ContentLayout'>
				<Image src={props.imageURL}
				width={160}
				height={150}
				alt='logo' />
				<div>{props.productName}</div>
				<div className='PriceWithoutTaxAndQuantityLayout'>
					<div>{`税抜` + props.priceWithoutTax  +`円`}</div>
					<div>数量</div>
					<div><select>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						</select>
					</div>
				</div>
				<div className='PriceIncludingTaxAndBuyButtonLayout'>
				<div>{`税込` + props.priceIncludingTax  +`円`}</div>
				<button >購入</button>
				</div>
			</div>

			<style jsx>{`				
				// 大枠の空白部分を担当
				.ContentPadding{
					padding: 20px;
					border:1px solid black;
				}
				// 大枠のレイアウト（縦並び）		
				.ContentLayout{
					position:relative;
					flex:1;
					width:200px;
				}
				// 税抜き価格と数量のレイアウト（横並び-等間隔）
				.PriceWithoutTaxAndQuantityLayout{
					display:flex;
					justify-content:space-between;
				}
				// 税込み価格と購入ボタンのレイアウト（横並び-等間隔）
				.PriceIncludingTaxAndBuyButtonLayout{
					display:flex;
					justify-content:space-between;
				}
			`}</style>	
		</>
	)
}

productBriefSecond.tsx

import ProductContent from "../../component/productContent"

/**
 * @remarks ProductContentのレイアウトを確認するためのページ
 * @returns 
 * 
 */
export default function ProductBriefSecond(){

	return(
		<>
			<ProductContent productName='サンプル商品' priceWithoutTax={100} priceIncludingTax={108} imageURL='/sampleProduct1.JPG'/>
		</>
	)

}

完成図

flexboxを使えばCSSの練度が低くてもきれいに実装できます。

githubURL

参考

杏林堂ネットスーパー

flexboxチートシート