ここでは、IT系企業の新入エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
なぜ、画像の扱いを学ぶのか、その理由。
前回は、「リンクを張って回遊性を高める」方法を学びました。
今回は、画像をWebに表示させる方法を学びましょう。
当社の新人エンジニア研修でも、画像の知識は重要です。
なぜなら、データベースにある商品情報の一覧を取り出しても、文字だけだとユーザーにアピールできないからです。
画像を張る
画像を表示するには<img>を使います。
“img”は「image」の略です。
＜ソースコード＞
<p><img src="mtFuji.jpg"></p>
src属性の属性値にその画像名を指定します。
“src”は「source」の略です。
今回は例として画像名をmtFuji.jpgとしています。
ちなみに、<img>に閉じタグはありません。
ブラウザで確認してみましょう。
＜アウトプット＞
https://saycon.co.jp/html/img.html
少し大きすぎましたね。
ということでサイズを変更する方法を学びましょう。
width, height, alt
<img>には属性として幅や高さなどを付けることができます。
＜ソースコード＞
<img src="mtFuji.jpg" alt="富士山" width="300px" >
“width”または“height”はその名の通り画像の「横幅」と「高さ」を指定します。
数値の単位はPixelです。
Pixelは、「Picture Cell」の略でディスプレイを構成する画素のことです。
表示しているディスプレイによって大きさは異なることになります。
なお、画像の場合は縦横比（アスペクト比）を保って表示するので“width”または“height”のどちらか一方を指定すればOKです。
ブラウザで確認してみましょう。
＜アウトプット＞
https://saycon.co.jp/html/img2.html
“alt”はこの画像が表示できなかった時に代わりに表示される「テキスト」になります。
alternateの略で代わりのという意味です
目の不自由な方向けの読み上げブラウザ等では有効になりますから省略しないようにしましょう。
また、SEO（検索エンジン対策）にも有効とされています。
<img>はHTML４でいうところのインライン要素です。
したがって<img>はブロック要素の中で使い、基本横並びになります。
一方、ブロック要素は要素のまとまりを作る効果があり、基本縦並びとなります。
また、一般的なインライン要素は、ブロック要素と違い「width」、「height」、「margin」、「padding」の設定ができません。(左右のpaddingとmarginの設定は可能)
しかし、<img>は「width」、「height」、「margin」、「padding」の設定が可能な、例外的なインライン要素なのです。
話は変わりますが、背景画像を設定するには、CSSの中で
background-image: url("画像へのパス");
としてください。
なお、上記の方法で画像の表示を小さくしても画像の容量は変わっていないことに注意してください。
もし、スマホなどで撮影した容量の大きな画像ファイルを小さくしたい方にはこちらのサイトを紹介しておきます。
以上、今回は「画像」について学びました。
次回は、「テーブルを使って表現力をアップ」する方法について学んでいきましょう。
【今回の復習Youtube】
最後までお読みいただきありがとうございました。