HTML5の仕様変更で、各ブラウザはメディア部分に多くの機能をサポートするようになりました。jpg png gifなどの画像ファイルや svg pngなどのベクター形式のファイルを指定することができます。
それに伴いimgに必要とされる要素も増えてきています。新しい機能を使うためにもチェックしておきましょう。
imgタグ
| カテゴリ | 画像 |
|---|---|
| タグ | <img> |
| 機能 | 画像を表示し、サイズ調整などをします。 |
| 属性 | src alt width height |
| 使用例 |
|---|
| <img src="○" alt="○" width="○" height="○"> |
imgの説明
- src ： 画像の指定をします。
- alt ： 画像が表示されなかった場合にテキストを表示します。
- width/height ： 幅と高さをピクセルで指定します、指定しなければ画像本来の大きさで表示されます。
※alt属性はSEO対策にとても大切です。面倒でも画像に説明文をつける事で、検索エンジンに正しい情報を伝える事ができます。必ず入れる癖を付けましょう！
imgタグを設定する
下のコードを書き換えてみましょう。画像のパスというのは画像を表示するHTMLファイルから画像ファイルのへの場所を指定することです。ここをちゃんと指定しないと画像のリンク切れにより表示されません。
パスの指定方法については、はじめてのホームページ作成方法（パスの書き方）をご確認ください。
widthとheightを指定しなかった場合は画像本来のサイズで表示されます。
うまく指定できるとこのようにイメージが表示できます。
imgタグで他のサイトの画像を使ったら絶対ダメ
imgタグの src 属性に他のホームページの画像への絶対パスを書く事もできますが、これは絶対にやってはいけません。非常に迷惑な行為ですし、最悪訴えられる可能性もありますので注意してください。もちろん自分のホームページなら問題ありません。
画像を加工してから貼り付ける事も必要
ホームページに写真を掲載したい場合があると思います。カメラやスマホなどで撮影してそのまま貼り付けた場合、サイズが大きすぎて表示されるまで時間がかかってしまいます。imgタグで width と height を指定したとしても元の画像サイズは変わらないためです。
そのような時は無料の画像編集ソフトを使って比率を保ったまま縮小するか、いい感じでトリミングするかしてサイズをホームページに合わせるといいでしょう。
当サイトでは画像編集ソフトも紹介していますので参考にしてください。
画像編集ソフト一覧ページを見る
