【HTML/CSS】画像を貼り付ける HTMLのimgタグとCSSで指定する方法

2019年1月15日

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;                                 /* 縦幅のサイズを指定    */
  }

今日はここまで。