「Menu」の項目を作成しました

1.HTML/ expというクラスを作成し、そのクラス内に画像とメニュー名・サイズ・価格をかく。

                
                <div class="exp">
                    <img src="○○.png" alt="Latte">
                    <h4>
                        Latte<br>
                        Regular ¥490 / Large ¥570
                    </h4>
                </div>
                
            

2.CSS/ 画像サイズを合わせる
正方形にしたかったため、widthとheightを同じにする。
object-fit: cover で画像の余分な部分を隠し、大きさを同じにする。

                
                    .exp img{
                        width: 250px;
                        height: 250px;
                        object-fit: cover;
                      }
                
            

3. exp クラスの外側に item クラスを作成し、expクラスの要素を並列するためのCSSを書く
display: flex で並列させる。gap: 0 10px で右側の間隔を調節する。

                
                    .item {
                        position: absolute;
                        right: 10px;
                        top: 45px;
                        display: flex;
                        gap: 0 10px;
                        margin: 0 auto;
                      }
                
            

→制作HP