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