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

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

8.画像を張る

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

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

<ソースコード>

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

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

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

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

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

<アウトプットイメージ>

https://www.saycon.co.jp/html/img.html

少し大きすぎましたね。

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

width, height, alt

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

 <ソースコード>

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

数値の単位はPixelです。

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

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

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

<アウトプットイメージ>

https://www.saycon.co.jp/html/img2.html

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

“alt”はalternateの略で代わりのという意味です

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

 

なお、背景画像を設定するには、CSSの方で

としてください。

 

メニューなどを手早くかっこよく作りたい方にはこちらのサイトを紹介しておきます。

http://www.tagindex.com/template/menu/

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

http://www.jpegmini.com/main/shrink_photo

 

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

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