HTML入門⑥画像を貼る

画像を貼りたい

まずは前に作ったフォルダの中に、画像を格納するためのフォルダを作成し、その中に適当な画像を格納してください。

私の場合、以下のようなファイル構造になりました。

ここまでできたら、コードを書いていきます。

ページに画像を貼るには<img>タグを使います。<img>タグは本講座で初めて属性を使用します。

imgタグは終了タグが不要ですので覚えておいてください。

 

これをブラウザで確認してみるときちんと画像が表示されると思います。

各部の説明

src=”img/hogehoge.jpg”

これはsrc属性です。画像ファイルがある場所を指定するためのものです。現在のhtmlからの相対パスを指定するのが一般的です。imgタグには必須の属性となっています。

この例ですと、同じ階層のimgというフォルダの中にあるhogehoge.jpgを指定しています。

width=”500″

これはwidth属性です。表示する画像の横幅を指定できます。単位はピクセルです。

単位に値を「50%」にするとブラウザの幅の50%の横幅になるのでそれも試してみてください。

また、高さを指定するheight属性もあります。

横幅のみを指定し、高さを指定しなかった場合、画像の縦横比を保ちながら横幅に合わせて高さが自動で調整されます。

横幅も高さも指定しなかった場合は元の画像の大きさで表示されます。

alt=”hogehoge”

alt属性は何らかの理由で画像が取得できなかった場合、代わりに表示する文章を指定します。

夕焼けの空、混雑した祭り会場など、その画像の説明となる文字を指定します。

画像が取得できなかった場合、下のように指定した文字が表示されます。