Insert an image
画像には<img>タグを使います。 通常のような終了タグ</>はありません。
どの画像を表示するのかをsrc属性を使って指定します。
WEBで使用できる画像形式はGIF・JPEG・PNG・SVGです。
画像の拡張子（extension）を表示させておこう
フォルダーを開いて上部の「表示」→「ファイル名拡張子」にチェックを入れておくこと
01 画像を挿入
<img src="img/fruits.jpg">
HTML
<img src="img/fruits.jpg" alt="フルーツ">
DEMO
画像をwebページへ入れる時はaltの指定をしておきましょう
画像が表示されないトラブルがあった時、音声ブラウザ使用の時やSEO対策にもなります
02 画像を半透明にする opacity
HTML
<img src="img/fruits.jpg" alt="フルーツ" style="opacity:0.6;">
DEMO
03 画像の角を丸くする
HTML
<img src="img/fruits.jpg" alt="フルーツ" style="border-radius:30px;">
DEMO
▶ 画像を丸く表示する
04 画像に影をつける
gazou.png のところには使いたい画像の名前を入れます
alt のところへはテキストで画像の説明を入れます
CSS
.kage {
box-shadow: 3px 3px 10px gray;
}
HTML
<img src="img/fruits.jpg" alt="フルーツ" class="kage">
DEMO
▶ さらに詳しくは「影をつける」（box-shadow）
05 テキストを画像の上に入れる
▶ こちらのページを参考06 テキストと画像を並べる位置を指定
通常
HTML
<img src="img/car.png" alt="くるま"> くるまのイラスト
DEMO
くるまのイラスト
テキストの位置を指定する場合
テキストと画像を並べる位置を指定 texttop、absmiddle、absbottom
HTML
<img src="img/car.png" alt="くるま" align="absmiddle"> くるまのイラスト
DEMO
くるまのイラスト
07 画像サイズを変更
実際のサイズを入れる
HTML
<img src="img/diet.jpg" width="300" height="200" alt="ダイエット">
DEMO
画像のサイズを変更する
HTML
<img src="img/diet.jpg" width="250" height="200" alt="ダイエット">
DEMO