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