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

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

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

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

imgタグの使い方

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

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

imgタグって？

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

ファイルの指定方法

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

コードはこんな感じ。↓

<img src="komatuda.JPG">

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

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

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

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

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

<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属性(!)で「横幅」を指定します。

<img src="komatuda.JPG" 
 width="300"

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

height属性で高さを指定

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

<img src="komatuda.JPG" 
 width="300" height="300">

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

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

alt属性で代替テキスト

alt属性って？

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

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

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

代替テキストの書き方

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

<img src="komatuda.JPG" alt="小松田くんの画像だよ">

こんな感じですね。↑

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

imageタグの使い方 まとめ

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

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

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

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

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

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