今回は、Reactを使ってケーキ屋さん向けのメニュー紹介コンポーネントを作る際の工夫を紹介します。
ポイントは 画像と説明を交互に配置するレイアウト です。これにより、見た目が動きのあるおしゃれなデザインになります。
実装のイメージ
左右に画像とテキストが交互に並ぶレイアウト
テキスト部分は商品名と説明文
画像サイズは統一（例：350×350px）
背景は明るくケーキ屋さんらしい色（薄い黄色など）
コード解説
<div className="menu-container">
{items.map((item, index) => (
<div
key={index}
className={`menu-item ${index % 2 === 0 ? "left-image" : "right-image"}`}
>
<div className="menu-text">
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
<img src={item.img} alt={item.title} />
</div>
))}
</div>
ポイント
mapでループ
配列 items の中身（商品データ）を順番に表示。
交互レイアウトの判定
index % 2 === 0 → 偶数は画像左、奇数は画像右
→ CSSで left-image と right-image にそれぞれスタイルを付ける。
共通のHTML構造
画像とテキストを1つの menu-item にまとめ、CSSで左右を切り替える
→ 商品が増えても自動で交互レイアウトが維持される。
CSSでの工夫（例）
.menu-item {
display: flex;
gap: 20px;
margin-bottom: 50px;
}
.left-image {
flex-direction: row;
}
.right-image {
flex-direction: row-reverse;
}
.menu-text {
display: flex;
flex-direction: column;
justify-content: center;
}
flex-direction を切り替えることで、HTML構造を変えずに左右交互に配置可能
gap で画像とテキストの間隔を調整
まとめ
この方法を使うと、新しい商品を追加しても 自動で交互レイアウトが適用 され、メンテナンス性も高くなります。
また、CSSの flex と組み合わせることで、レスポンシブ対応も簡単にできます。
