HPを作る上で画像を使うことを欠かすことはできません。今回はフリー素材を使って画像の貼り方やサイズ変更を練習してみました。
１.背景で画像を使う方法まずは背景で画像を使う方法です。
background="画像の指定"これでHPの背景に画像を貼り付けることができます。
HTMLソース＜html＞
＜head＞
＜title＞題名＜/title＞
＜/head＞
＜body background="画像のアドレス"＞
＜h1＞ともべのゼミ用HP＜/h1＞
＜/body＞
＜/html＞
実際に入力して作ったページがこちらになります。
2.画像の貼り方とサイズ変更(1) 画像の貼り方
HP内で画像を貼る方法です。
＜img src="画像のURL"＞上記の方法を使って、このようにHP内に画像を貼り付けることができます。
(2)サイズの変更方法
続いて画像のサイズ変更の方法です。
＜img src="画像のアドレス"width="幅" height="高さ" /＞
widthとheightの後に入るのは数字です。その数字を元の画像のサイズより大きくするか小さくするかで画像を拡大したり縮小することができます。
では、実際に画像を拡大、縮小してみようと思います。今回は「いらすとや」というフリー素材を提供しているサイトの画像を使わせていただきます。
・拡大
元の画像のサイズが大体width=390 height=470なので、width=780 height=940のサイズで拡大してみようと思います
このように画像を拡大することができます。
・縮小
続いて画像を縮小します。サイズはwidth=195 height=235でいきます。
このように画像を縮小することができます。