Zoomを使用せずにHTMLで画像を拡大する方法

1. CSSを使用した方法:

   • まず、画像を含むHTML要素（例: <div>や<img>）にclassまたはid属性を追加します。
   • 次に、追加したclassまたはid属性を使用して、CSSスタイルを定義します。以下は例です:

   .zoom-image {
    cursor: pointer; /* マウスを重ねた時にカーソルが変わるようにする */
    transition: transform 0.2s; /* 拡大・縮小のアニメーション効果を追加する */
   }
   .zoom-image:hover {
    transform: scale(1.2); /* マウスを重ねた時に拡大する */
   }

   • 上記のCSSコードでは、.zoom-imageクラスを持つ要素にマウスを重ねると、その要素が1.2倍のサイズに拡大されます。

2. JavaScriptを使用した方法:

   • まず、画像を含むHTML要素にclassまたはid属性を追加します（同様にCSSの方法と同じです）。
   • 次に、JavaScriptを使用して画像のサイズを変更する関数を定義します。以下は例です:

   function zoomImage(element) {
    element.style.transform = "scale(1.2)"; /* 画像を1.2倍に拡大する */
   }

   • 画像を拡大したいイベント（例: マウスオーバー）が発生した時に、上記の関数を呼び出します。

以上の方法を使用することで、Zoomを使用せずにHTMLで画像を拡大することができます。お好みの方法を選んで実装してみてください。