HTMLとCSSを使用してdivタグ内のimg要素のスタイルを変更する方法

1. インラインスタイルを使用する方法:

   <div>
    <img src="image.jpg" style="width: 200px; height: 150px; border: 1px solid red;">
   </div>

   上記の例では、img要素に直接スタイル属性を追加しています。widthとheightは画像の幅と高さを指定し、borderは赤い枠線を追加します。

2. CSSクラスを使用する方法:

   <style>
    .image-style {
      width: 200px;
      height: 150px;
      border: 1px solid red;
    }
   </style>
   <div>
    <img src="image.jpg" class="image-style">
   </div>

   上記の例では、CSSクラス「image-style」を定義し、img要素にそのクラスを追加しています。CSSのスタイル定義内で、クラス名を指定してスタイルを設定します。

3. IDセレクタを使用する方法:

   <style>
    #image {
      width: 200px;
      height: 150px;
      border: 1px solid red;
    }
   </style>
   <div>
    <img src="image.jpg" id="image">
   </div>

   上記の例では、IDセレクタ「#image」を使用してimg要素のスタイルを指定しています。CSSのスタイル定義内で、#を使ってIDを指定します。

これらは一部の例です。他にもさまざまな方法がありますが、基本的なアプローチは上記のいずれかになります。HTMLとCSSを組み合わせて、divタグ内のimg要素のスタイルを自由に変更できます。