img要素で、文書内に画像を表示させる
img要素には、src属性とalt属性が必須となります。
src=""で表示する画像のURIを指定する。
Webページで使用する画像の形式は、一般的にはGIF、JPEG、PNGになります。
<img src="sample.gif" alt="サンプル">
形式 | 内容 |
GIF (拡張子 .gif) | 256色(8bit)まで使用可能。イラスト向きの形式で、色数の少ない単調な画像に適しています。 |
JPEG (拡張子 .jpg) | 約1677万色(24bit)まで使用可能。写真向きの形式で、色数の多い複雑な画像に適しています。 |
PNG (拡張子 .png) | 約1677万色(24bit)まで使用可能。イラスト向きの形式で、色数の少ない単調な画像に適しています |
画像のサイズを指定する
img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。
<img src="sample.gif" alt="サンプル" width="300" height="200">
CSSを使って画像を表示する方法
プロパティbackground-imageを使って、簡単に画像を表示することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS 画像 サンプル</title>
<link rel="stylesheet" href="main.CSS">
</head>
<body>
<h2>CSSから画像の表示</h2>
<div class="disp-img"></div>
</body>
</html>
サンプルコード - CSS:
.disp-img{
background-image:url(../img.jpg); /* 画像のURLを指定 */
background-repeat: no-repeat; /* 画像の繰り返し(なし)を指定 */
width:auto; /* 横幅のサイズを指定 */
height:400pX; /* 縦幅のサイズを指定 */
}
今日はここまで。