サンプル 1: 一番単純なサンプル

続きのテキスト

サンプル 2-1: 画像の大きさを指定する (width, height属性)

width:  画像の幅
height: 画像の高さ
単位を省略した場合はピクセル (px) になります。

width, heigth の両方を指定する場合は画像の縦:横の比率に注意。
縦横比が 1 でないと変形した画像になります。通常は width か
height の一方だけを指定することが多いです（下のサンプルを参照）。

画像の縦横比に注意。

サンプル 2-2: width だけ指定する

画像の高さは自動的に調整されます。

サンプル 2-3: heightだけ指定する

画像の幅は自動的に調整されます。

サンプル 2-4: 画像の大きさを % で指定する

img の width を % で指定すると親のブロック要素(ここでは body)
の幅に対して指定した割合の幅になります。

width="60%" の例。 ブラウザのウインド幅を変えると画像の大きさも自動的に変わります。

サンプル 3: CSS で指定する

その1

その2: 影を付ける効果をかける (CSS box-shadow)

(2014/12-2023/04)
動作     : Edge106, Firefox95, Chrome96