More than 3 years have passed since last update.

画像の表示(HTMLとCSS)

Posted at 2021-03-23

HTMLとCSSを使って画像を表示させる方法に関しての記事。
下記2点について書きたいと思う。

・画像を表示する方法
・画像の大きさを調節する方法

まずは、画像を配置させる。
下記のようにimageというフォルダ内に画像を配置させる。

画像を表示するためには、img要素を使う。
img要素を用いることで、Webサイト上に画像を表示することができる。
img要素には、画像の場所を指定するsrc属性、画像が表示されなかった場合に代替テキストなどを表示するためのalt属性も併せて使用する。

image src="image.jpeg" alt="imagename" class="classname"
           画像を決める       代替テキスト        css適用のためのセレクタ

表示された画像が大きすぎる場合
cssでサイズを調整してあげる。

.classname{
 width: 300px;
 height: 300px;
}