今回はCSSで画像のプロパティを学んでいきます。まず『なばなの里』の画像を用意しました。何でもいいので画像を用意します。（ちなみに上部は明るい色の方が良いです）
前回までのbodyタグの中を消します。
用意した画像を取り込みます。
CSSのフォルダの中にあることを確認。なければ移動します。
imgタグで画像を表示します。
プレビューをすると、このように表示されます（新しいタブとして表示されるプレビュー）。南に白い部分まででページの端になります。
次にpractice.cssで上記のように横幅を表すwidthを300pxにします。
幅300pxで上記のサイズになります。
次に高さを表すheightを500pxにします。
高さ500pxで上記のようになりました。
次に幅と高さを指定してみます。
無理やり幅と高さを合わせるので違和感があります。幅か高さを指定すると、それに合わせて画像を調整してくれるので、どちらかを指定するのがオススメです。
ちなみにパーセントで変えることも出来ます。
widthを100％にすると幅ぴったしに合わせてくれます。
次にwidthを50％にしてみます。
ちょうど幅が半分になりました。
コメント