【image】画像を表示させたい!!サイズ調整と代替えテキストの記述方法も解説

アイキャッチHTML05

こんにちは。ヒロユキです。

HTMLには、文字だけでなく「画像」や「表」などを表示させるタグもあります。

今回は画像を表示させるタグと、表示した画像のサイズ調整について解説しますよ。

imgタグの使い方

小松田くん

「見出し」や「本文」の作り方は理解しました。これでWebページ作れますね!

尾地ヒロユキ

文字ばっかりのWebページじゃつまんないぞ。画像の表示方法も覚えなきゃね。

imgタグって?

画像ファイルを表示させたい時に使用するのが、img(!)タグです。

imgタグ(イメージタグ)

画像ファイルを表示させる要素のこと。

ファイルの指定方法

例えば、ファイル名が”komatuda.JPG”という画像を表示させたい時。

コードはこんな感じ。↓

<img src="komatuda.JPG">
imgタグの使い方1
ブラウザで表示確認

imgタグは空要素です。「src属性(ソース属性)」で表示したい画像のファイル名(属性の値)を指定します。

でも、これは表示したい画像が編集中のindex.htmlと同じフォルダの階層にある場合です。

imgタグの使い方2
表示したい画像が同じフォルダの階層にある場合

たとえば、「MyHTML」の中に画像だけをまとめた「img」ファイルがあるとします。

“komatuda.JPG”が、その「img」ファイルの中にあった場合。↓

imgタグの使い方3
「MyHTML」⇒「img」⇒”komatuda.jpg”の場合
imgタグの使い方4
「MyHTML」⇒「img」⇒”komatuda.jpg”の場合

コードが少し変わります。↓

<img src="img/komatuda.JPG">

「img/」の記述が増えましたね。これは「imgフォルダの中にある」という意味なのです。

「img」の部分がフォルダ名を表していて↓

<img src="img/komatuda.JPG">
imgフォルダ

「/」が「〇〇の中にある」を表してるのです。↓

<img src="img/komatuda.JPG">
〇〇の中にある

では、フォルダの階層が下記の場合どんなコードになるでしょう?

「MyHTML」⇒「img」⇒「icon」の中にある”komatuda.jpg”を表示させたい!

正解!!
<img src="img/icon/"komatuda.JPG">

正解は、こんな感じになります。↑

小松田くん

フォルダ内では、画像ファイルの整理整頓が大切ですね。散らかってるとコードが書きにくそうです。

フォルダの階層構造

widthとheightでサイズ調整

画像を表示させたら次はサイズを調整しましょう。

画像のサイズ調整には「width」と「height」という、2種類の属性をつかいます。

width属性で横幅を指定

まずは、width属性(!)で「横幅」を指定します。

width属性(ウィッズ属性)

画像や図形などの要素の「横幅」を指定する属性。調整の単位はピクセル。

<img src="komatuda.JPG" 
 width="300"
尾地ヒロユキ

「width」のことは、「ウィスト」とか「ワイズ」って呼ぶこともあるぞ。

height属性で高さを指定

次に、height属性(!)で「高さ」を指定します。

height属性(ハイト)

画像や図形などの要素の「高さ」を指定する属性。調整の単位はピクセル。

<img src="komatuda.JPG" 
 width="300" height="300">
サイズ調整の比較

「width」と「height」は、ボタンやグラフの調整にもつかえる属性です。2つセットでおぼえておきましょう。

小松田くん

「ウィストとハイト」って、なんだかキャラクターみたいで覚えやすいですね。

alt属性で代替テキスト

alt属性って?

なにかの原因で画像の表示ができなくなると、エラー表示になります。

imgタグの使い方5

これだと、自分でもここに何の画像が表示されるはずだったのかわかりません。

ait属性(!)をつかうと、エラーにテキストを表示させることができます。

alt属性(オルト属性)

画像のエラーにテキストを表示させる属性。音声読み上げブラウザが参照するテキストでもある。

代替テキストの書き方

例えば、「小松田くんの画像」が表示されるはずだった場合。↓

<img src="komatuda.JPG" alt="小松田くんの画像だよ">
imgタグの使い方6

こんな感じですね。↑

alt属性の「属性の値」に打ち込んだテキストがそのまま表示されます。絶対に必要というわけでは無いですが、あると便利なので覚えておきましょう。

imageタグの使い方 まとめ

今回のまとめです。次の条件を表示させたい場合。↓

  • 画像ファイル名”komatuda.JPG”
  • フォルダは「MyHTML」⇒「photo」の中
  • 画像のサイズ 200×200ピクセル
  • 代替テキスト”小松田くんの画像です”

コードはこんな感じになります。↓

<img src="photo/komatuda.JPG"
 width="200" height="200"
 alt="小松田くんの画像です">

どうですか?伝わりましたか?

あとは実践の中で応用していきましょ〜ね。

それじゃまた。ヒロユキでした。

気に入ったらシェアしてね
ABOUT US
尾地ヒロユキOji Hiroyuki
Webページを作ったり、アプリやゲームを作ったり、作業の効率化だってできちゃうプログラミング。なのに「なんだかむずかしそう」「自分にはムリだよ」って諦めちゃうのはもったいない!プロじゃなくてもプログラミングしませんか?このブログ「つみきのーと」では、知識ゼロからのスタートを応援します。Twitter ⇒「PC豆知識」Instagram ⇒「Macショートカットキー」Pinterest ⇒「図解イラスト」を発信中。そっちもcheckだぞ♪