【HTML/CSS】画像を貼り付ける HTMLのimgタグとCSSで指定する方法
img要素で、文書内に画像を表示させる

img要素には、src属性とalt属性が必須となります。
src=""で表示する画像のURIを指定する。
Webページで使用する画像の形式は、一般的にはGIF、JPEG、PNGになります。

<img src="sample.gif" alt="サンプル">

形式内容
GIF (拡張子 .gif)256色(8bit)まで使用可能。イラスト向きの形式で、色数の少ない単調な画像に適しています。
JPEG (拡張子 .jpg)約1677万色(24bit)まで使用可能。写真向きの形式で、色数の多い複雑な画像に適しています。
PNG (拡張子 .png)約1677万色(24bit)まで使用可能。イラスト向きの形式で、色数の少ない単調な画像に適しています


画像のサイズを指定する

img要素に width="" と height="" を追加すると、画像のサイズを指定することができます。

<img src="sample.gif" alt="サンプル" width="300" height="200">

CSSを使って画像を表示する方法

プロパティbackground-imageを使って、簡単に画像を表示することができます。

    <!DOCTYPE html>
    <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>CSS 画像 サンプル</title>

            <link rel="stylesheet" href="main.CSS">
        </head>

        <body>
            <h2>CSSから画像の表示</h2>
            <div class="disp-img"></div>

        </body>

    </html>
  

  サンプルコード - CSS:
  .disp-img{
      background-image:url(../img.jpg);             /* 画像のURLを指定       */
      background-repeat:  no-repeat;                /* 画像の繰り返し(なし)を指定  */
      width:auto;                                   /* 横幅のサイズを指定    */
      height:400pX;                                 /* 縦幅のサイズを指定    */
  }
  

今日はここまで。