基礎10. img要素-画像を表示させる
2018/02/22
img要素
img要素（image）は画像を表示する要素です。初期値はインラインの要素です。終了タグはありません。下記のファイルをダウンロードして、コードを記述して画像が表示されるか確認してみてください。
img01.zip
|
1 2 3 |
<p><img src="flower01.jpg" alt="チューリップ" width="400" height="266"></p> |
src属性
画像の場所を相対パスまたは、絶対パスで指定します。必須属性ですので省略できません。相対パスと絶対パスは、11章で詳しく解説します。
width属性、height属性
必須属性ではありませんが、記述すると画像の多いページでは、表示が多少早くなります。値の単位は、px指定の場合は単位をつけません。相対値の%の場合は単位をつけます。%は親要素の幅からの相対値です。画像本来のサイズからの相対値ではありません。
alt属性
代替テキストを記述する属性。代替テキストとは画像の説明文です。画像が表示できない通信状態の時に、画像の変わりにテキストが表示されます。また音声ブラウザの場合は、読み上げのテキストになります。alt属性は必須属性です。ただし値を入れるか、入れないかは任意です。これは矢印やアイコンなど説明が必要ない画像もあるからです。先ほどのコードのalt属性の値を省略した場合は下記になります。
|
1 2 3 |
<p><img src="flower01.jpg" alt="" width="400" height="266"></p> |
alt属性に値がある場合、Googleなどの画像検索でヒットする確率が上がります。
Google ウェブマスター向け公式ブログ「画像検索についての A to Z」
HTMLで使用できる画像は拡張子が .jpg（ジェイペグ）, .png（ピング）, gif（ジフ）の3種類になります。
まとめ
- img要素は画像を表示する要素。
- src属性は画像の場所を指定する属性。
- width属性、height属性は表示スピードが上がるので指定したほうが良い。
- alt属性は必須。ただしalt属性の値は場合によって省略しても良い。