English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
私たちが今日見る多様なウェブページは、画像のおかげです。過去のウェブはすべてテキストのみのウェブページで、非常に単調でした。画像がウェブデザインにおける重要性を理解できます。HTMLページには画像を挿入できます。ウェブページでよく使われる画像形式にはjpg、png、gifなどがあります。
!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基本チュートリアル(oldtoolbag.com)</title> </head> <body> <h2>default picture</h2> <img border="0" src="/run/html/default.jpg" alt="default" width="304" height="228"> </body> </html>テストして見て‹/›
画像を挿入する
このサンプルでは、ウェブページに画像を表示する方法を示します。
異なる場所から画像を挿入する
このサンプルでは、他のフォルダーやサーバーの画像をウェブページに表示する方法を示します。
（更多示例请见页面底部。）
HTMLでは、画像は<img>タグで定義されます。
<img>は空タグであり、属性のみを含み、閉じタグがないことを意味します。
ページに画像を表示するには、ソース属性（src）を使用する必要があります。srcは「source」を意味します。ソース属性の値は画像のURLアドレスです。
画像の定義方法は：
<img src="url" alt="some_text">
URLは画像の保存位置を指します。"default.jpg"という名前の画像がja.oldtoolbag.comのimagesディレクトリにあります場合、そのURLは https://ja.oldtoolbag.com/run/html/default.jpg
ブラウザは、ドキュメント内の画像タグが表示される場所に画像を表示します。画像タグを2つの段落の間に配置する場合、ブラウザはまず最初の段落を表示し、次に画像を表示し、最後に2つ目の段落を表示します。
alt属性は、画像に予備の代替テキストを定義するために使用されます。
代替テキスト属性の値はユーザーが定義します。
<img src="boat.gif" alt="Big Boat">
ブラウザが画像を読み込めない場合、代替テキスト属性は読者に失われた情報を伝えます。この場合、ブラウザは代替テキストを表示し、画像の代わりに表示します。ページ上のすべての画像に代替テキスト属性を追加することは良い習慣であり、情報のより良い表示に役立ち、テキストのみのブラウザを使用する人々にとって非常に有用です。
height（高さ）とwidth（幅）属性は、画像の高さと幅を設定するために使用されます。
属性値のデフォルトの単位はピクセルです：
<img src="pulpit.jpg" alt="Pulpit rock" width="304"height="228">
ヒント: 画像の高さと幅を指定することは良い習慣です。画像に高さと幅が指定されている場合、ページが読み込まれると指定されたサイズが保持されます。画像のサイズが指定されていない場合、ページが読み込まれるとHTMLページの全体のレイアウトが壊れる可能性があります。
注意: あるHTMLファイルに10個の画像が含まれている場合、このページを正しく表示するために、 11 ファイルです。画像の読み込みには時間がかかりますので、画像の使用には慎重に行ってください。
注意: ページが読み込まれる際には、ページに挿入された画像のパスに注意してください。画像の場所が正しく設定されていないと、ブラウザは画像を読み込めず、画像タグは壊れた画像を表示します。
画像の並べ方
この例では、文字の中で画像を並べる方法を説明しています。
浮遊画像
この例では、画像を段落の左側や右側に浮かべる方法を示しています。
画像リンクの設定
この例では、画像をリンクとして使用する方法を説明しています。
画像マップの作成
この例では、クリック可能なエリアを持つ画像マップの作成方法を示しています。それぞれのエリアはリンクです。
| タグ | 説明 |
| <img> | 画像を定義 |
| <map> | 画像マップを定義 |
| <area> | 画像マップ内のクリック可能なエリアを定義 |