imgダグ/画像の挿入

<img>タグは画像を示します。

説明

 <img>タグを使ってファイルを指定すると画像を表示する事が出来ます。

構文

 <img>タグはHTMLボディー内に記述します。構文は以下の通りです。

<img src="画像ファイル名" alt="代替え文書" height="高さ" width="幅" />

 画像ファイル名はtest.gif等と指定します。PNG形式であればtest.png、JPEG形式であればtest.jpgになります。異なるディレクトルのファイルを指定する場合はimage/test.gifと指定するとimageディレクトリ配下のtest.gifファイルを指定した事になります。親ディレクトリを指定したい場合は../test.gifと指定します。

 代替え文書は画像が表示出来ない時に代わりに表示する文書です。検索エンジンは画像の内容は判断出来ないため、この文書が検索の対象になります。

 赤字部分の高さと幅は必須ではありません。デフォルトでは表示する画像の高さと幅を自動的に確保します。

 高さと幅は数字だけで指定するとピクセルになります。50%等%を付けて指定すると、画像として表示出来る大きさに対する割合で指定した事になります。

 高さや幅を指定する事で画像を縮小したり、拡大して表示出来ます。

利用例

 画像ファイルを指定した利用例は以下の通りです。

<img src="image/img_1.png" alt="代替え文章">

 上記では以下のように画像が表示されます。

画像表示例

画像や幅を指定した拡大・縮小

 高さや幅を数字だけ指定した例は以下の通りです。

<img src="image/img_1.png" alt="画像表示例" height="30" width="240">

 上記を表示すると以下になります。元々の画像が幅183px、高さ62pxのため、縦は縮小、横は拡大されています。

画像表示例

 %で指定した例です。

<img src="image/img_1.png" alt="画像表示例" height="80%" width="50%">

 上記を表示すると以下になります。点線で囲った枠は高さを200pxに指定しているため、その80%の高さで縦は拡大、幅は枠が表示可能な範囲の50%で表示されています。

画像表示例

 又、幅を指定して高さを自動調整させる事も出来ます。

<img src="image/img_1.png" alt="画像表示例" height="auto" width="30%">

 上記を表示すると以下になります。幅は表示可能な範囲の30%で表示し、高さは画像の高さと幅の比率が変わらないように調整されます。

画像表示例

 autoを指定する事で画像が変形する事なく、拡大・縮小が出来ます。

センタリング

 <img>タグで囲むとインラインボックスを示すため、次の文章や画像を横に並べて表示させる事が出来ます。

 又、インラインボックスはtext-align: center;とスタイルを指定した枠の中ではセンタリングして表示されます。

<div style="text-align: center;">
<img src="image/img_1.png" alt="画像表示例">
<div>

 上記を表示すると以下になります。枠には分かり易いように点線を付けています。

画像表示例

関連ページ

・ホームページ作成「画像の挿入

 GIF、PNG、JPEGといった画像の形式、imgタグによる単純な画像の挿入方法からCSSも活用したtext-align以外のセンタリング方法も説明しています。又、画像を横に並べる方法、画像からリンクする方法、画像上にカーソルを乗せると変化する方法等も説明しています。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加