7.画像を貼って表現力アップ | 新入社員研修ポータル

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

前回は、「リンクを張って回遊性を高める」方法を学びました。

今回は、画像をWebに表示する方法を学びましょう。

画像を張る

画像を表示するには<img>を使います。

“img”は「image」の略です。

<p><img src="mtFuji.jpg"></p>

src属性の属性値にその画像名を指定します。

“src”は「source」の略です。

今回は例として画像名をmtFuji.jpgとしています。

ちなみに、<img>に閉じタグはありません。

ブラウザで確認してみましょう。

少し大きすぎましたね。

ということでサイズを変更する方法を学びましょう。

<img>には属性として幅や高さなどを付けることができます。

<img src="mtFuji.jpg" alt="富士山"　width="300px" >

“width”または“height”はその名の通り画像の「横幅」と「高さ」を指定します。

数値の単位はPixelです。

Pixelは、「Picture Cell」の略でディスプレイを構成する画素のことです。

表示しているディスプレイによって大きさは異なることになります。

なお、画像の場合は縦横比（アスペクト比）を保って表示するので“width”または“height”のどちらか一方を指定すればOKです。

ブラウザで確認してみましょう。

“alt”はこの画像が表示できなかった時に代わりに表示される「テキスト」になります。

alternateの略で代わりのという意味です

目の不自由な方向けの読み上げブラウザ等では有効になりますから省略しないようにしましょう。

また、SEO（検索エンジン対策）にも有効とされています。

<img>はHTML４でいうところのインライン要素です。

したがって<img>はブロック要素の中で使い、基本横並びになります。

一方、ブロック要素は要素のまとまりを作る効果があり、基本縦並びとなります。

また、一般的なインライン要素は、ブロック要素と違い「width」、「height」、「margin」、「padding」の設定ができません。(左右のpaddingとmarginの設定は可能)

しかし、<img>は「width」、「height」、「margin」、「padding」の設定が可能な、例外的なインライン要素なのです。

話は変わりますが、背景画像を設定するには、CSSの中で

background-image: url("画像へのパス");

としてください。

なお、上記の方法で画像の表示を小さくしても画像の容量は変わっていないことに注意してください。

もし、スマホなどで撮影した容量の大きな画像ファイルを小さくしたい方にはこちらのサイトを紹介しておきます。

以上、今回は「画像」について学びました。

次回は、「テーブルを使って表現力をアップ」する方法について学んでいきましょう。

【今回の復習Youtube】