HTML 画像ファイルを表示するサンプル(img)

01. サンプル

・画像ファイルを表示する

02. 中央寄せ

・テーブルの画像を中央寄せにする(div)

03. svg

・svgファイルに色を付ける方法

画像ファイルを表示する

imgタグとsrcを指定します。

<body>
  <img src="test1.png" />
  <img src="./test1.png" />
  <image src="test1.png" />
</body>

2,3行目は、このhtmlファイルと同じフォルダ内にある画像ファイルを指します。
4行目は、imgではなくimageにしています。表示できます。

ファイル名を囲むダブルコーテションは半角です。全角の場合、画像は表示されません。
エディタによっては判別しづらい場合があります。

ファイルがない時に文字を表示(alt)

<body>
  <img src="test11.png" alt="ファイル無" />
</body>

alt属性は画像ファイルを取得できなかった時に指定された文字を表示します。

相対パスまたは絶対パスで開く

<body>
  <img src="./img/test1.png" />
  <img src="../test1.png" />
  <img src="D:/Test1/img/test1.png" />
</body>

2,3行目は、相対パスです。このhtmlファイルがあるフォルダの配下のimgフォルダ内を指定しています。先頭のドット(.)は必要です。ないとファイルがないというエラーになります。
3行目のようにドットを2回続ける(..)と上位のフォルダが対象になります。

4行目は、絶対パスです。ドライブ名からパス、ファイル名まですべて記述します。

画像のサイズを指定

<body>
  <img src="./img/test1.png" width="150"/>
</body>

width(幅)とheight(高さ)を指定できます。片方だけ指定するともう片方は元の画像の比率を維持して表示されます。数値のみの場合、単位はpxです。%の指定も可能です。

ツールチップをつける(title)

<body>
  <img src="./img/test1.png" title="テストです" />
</body>

画像の上にカーソルをあてるとツールチップの内容が表示されます。

画像を中央寄せにする

画像の親の要素でtext-align:centerを指定します。

<body>
  <div style="text-align: center;">
    <img src="./img/test1.png" width="150"/>
  </div>
</body>

テーブルの画像を中央寄せにする(div)

テーブルの画像を中央寄せにする場合は、親要素にdivを追加しtext-alignでcenterを指定します。

<style>
  table {
    border-collapse: collapse;
    width: 500px;
  }
  td {
    border: 1px solid #000;
  }
  .div1 {
    text-align: center;
  }
</style>
<table>
  <tbody>
    <tr>
      <td>
        <div class="div1">
        <img src="./img/test1.png" width="150" /></td>
        </div>
    </tr>
  </tbody>
</table>

svgファイルに色を付ける方法

１．svgファイルをテキストエディタ等で開きます。
２．コードの中にCSSのclass等を記述します。
３．svgのコードをhtmlに貼り付けます。

<style>
  .svg1 {
    fill: yellow; /*色をつける*/
    stroke: green; /*外枠の色*/
    width: 100px;
  }
</style>
<div>
  <svg class="svg1" version="1.1" viewBox="0.0 0.0 132.0 109.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><clipPath id="p.0"><path d="m0 0l132.0 0l0 109.0l-132.0 0l0 -109.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l132.0 0l0 109.0l-132.0 0z" fill-rule="evenodd"/><path fill="#f3f3f3" d="m6.5039372 54.498688l0 0c0 -26.787985 26.637295 -48.503937 59.496063 -48.503937l0 0c32.858765 0 59.496063 21.715952 59.496063 48.503937l0 0c0 26.787987 -26.637299 48.503937 -59.496063 48.503937l0 0c-32.85877 0 -59.496063 -21.71595 -59.496063 -48.503937z" fill-rule="evenodd"/><path stroke="#666666" stroke-width="1.0" stroke-linejoin="round" stroke-linecap="butt" d="m6.5039372 54.498688l0 0c0 -26.787985 26.637295 -48.503937 59.496063 -48.503937l0 0c32.858765 0 59.496063 21.715952 59.496063 48.503937l0 0c0 26.787987 -26.637299 48.503937 -59.496063 48.503937l0 0c-32.85877 0 -59.496063 -21.71595 -59.496063 -48.503937z" fill-rule="evenodd"/></g></svg>
</div>

9行目は、svgファイルのコードです。class="svg1"という箇所が追記した部分です。
3行目のfillは色を付けます。
4行目のstrokeは外枠の色をつけます。

以下のイメージになります。