<img> タグは、 画像を表示するタグ です。
この <img> タグに、画像のファイル名を指定することで、
画像を表示することができます。
■ <img> タグの記述例
|
<img src="aaa.jpg" alt="建物の画像">
|
■ ホームページ上の表示
上記のように、<img> タグを使うことで、 画像を表示すること ができます。
なお、src で指定している aaa.jpg が、「画像のファイル名」 になります。
このようにして、画像のファイル名を指定することで、その画像を表示させることができます。
あと、その後ろの alt="建物の画像" については、画像のコメントを入れることができます。
画像は、検索エンジンにはヒットしませんが、alt で文章を入れておくことで、その文章が検索エンジンにヒットするようになります。
そのため、画像を表示させるときは、このalt を使って、画像にコメントを入れておくようにしましょう。（ちなみに、このコメントはホームページ上には表示されません）
そして、これをよく質問でいただくのですが、、、
画像の大きさを変更するためには、width を入れてあげます。
具体的には、下記のように記述します。
■ 画像の大きさを変更するときの <img> タグの記述例
|
<img src="aaa.jpg" width="300" alt="建物の画像">
|
■ ホームページ上の表示
上記のように、width="300" という記述を入れることで、画像の大きさを変更できます。
このwidth の設定が、画像の横幅の大きさになるので、もっと画像を大きくしたい場合は、width="500" などにすれば、画像が大きくなりますよ。
ただ、注意点としては、もともと小さな画像を、width を使って大きくすると、画質が悪くなるということです。
もともと小さな画像を、width を使って、引き伸ばして表示するため、画質が悪くなってしまうのですよね。。。
だから、大きな画像を、width を使って小さくするというやり方が、基本になると思います。
もともと大きな画像を、width を使って、小さくしてあげれば、画質が悪くなることはありませんよ。
もちろん、画像自体の大きさを、「JTrim」などの画像編集ソフトを使って、変更してあげれば、width は必要ありません。
ただ、手っ取り早く画像の大きさを変更するには、上記のように、width を入れてあげるのが簡単ですよね。
なお、この画像を表示させる方法については、ホームページのリンクと画像を表示させる方法 のページを見てみてください。
このページで、画像の表示方法を詳しく説明していますよ。
あと、パーツテンプレート集 のページに、 「画像を表示するパーツ」 を用意しているので、このパーツを使えば、簡単に画像をホームページに表示させることができます。
ぜひ参考にしてくださいね。
