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