ホーム＞コース別ガイド一覧＞画像を埋め込みましょう！
使用タグ <img>タグ
HTML一覧タグ辞典 … <img> タグ
<img>タグを使えば、Webページに画像を埋め込んで表示することができできます。主な属性は次に記述してあります
img要素の主属性
| 属性 |
指定できる値 |
働き |
src
（エスアールシー） |
URL |
src 属性は img 要素の必須属性で、画像ファイルの場所と名前を属性値のURLで指定します。また、属性値のURLでは相対パス、絶対パスで指定します。 |
alt
（アルト） |
文字列 |
alt 属性は img 要素の必須属性です。画像が何らかの理由で表示されない場合に代わりに属性値の文字列を表示します。 |
width
（ウィドス） |
長さ |
width 属性では画像の幅を指定でき、属性値にはピクセルを表す整数を、またはパーセンテージで指定できます。長さは画像の元の幅より大きく指定すると拡大し、縮小すると縮小されて表示します。 |
height
（ハイト） |
長さ |
height 属性では画像の高さを指定でき、属性値にはピクセルを表す整数を、またはパーセンテージで指定できます。長さは画像の元の幅より大きく指定すると拡大し、縮小すると縮小されて表示します。 |
border
（ボーダー） |
ピクセル |
border 属性では画像の周り（上下左右）に枠線を表示できます。属性値にはピクセルを表す整数で枠線の太さを指定します。
※この要素は「推奨されない」属性です。画像を枠線で囲いたい場合は CSS の border プロパティを使いましょう。 |
align
（アライン） |
表示位置 |
align 属性では画像の表示位置を指定できます。属性値には「top」（上揃え）、「middle」（中央揃え）、「bottom」（下揃え）、「left」（左揃え）、「right」（右揃え）を指定できます。
※この要素は「推奨されない」属性です。「top」、「middle」、「bottom」の代わりに画像の縦方向の表示位置を指定するには vertical-align プロパティを使います。「left」、「right」の代わりに画像の回り込みを指定するには float プロパティを使いましょう。 |
使用タグ <img src="画像のファイル名" alt="代替テキスト"> タグ … （src属性、alt属性）
img 要素に src 属性、alt 属性を指定し、それぞれに画像のファイル名またはそのURL、代替テキストを記述します。
使用例
それでは実際に画像を埋め込んでみましょう！img 要素に src 属性、alt 属性を指定します。画像ファイルの場所は同じフォルダ内にあるとして、ファイル名は「sample.jpg」となります。したがって相対パスで指定した場合はそのまま「sample.jpg」となります。記述例は相対パスで指定しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
<strong>ワンポイント</strong>を紹介します！</p>
<p>おいしい<em>チャーハン</em>の作り方</p>
<img src="sample.jpg" alt="チャーハン">
</body>
</html> |
|
[img要素適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方 |
|
 |
[img要素適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするためのワンポイントを紹介します！
おいしいチャーハンの作り方
 |
|
このように画像が表示されました！画像がうまく表示されない方は、パスが間違っている場合がありますので確認してみましょう。
関連情報ページ |
|
このタグによく使われるCSS |
|
|
|
|
その他 |
|
|
