どうもこんばんは。
最初にテーブルという少し難解なものをもってきておいて、今更リンクと画像の貼り方です。
非常に簡単なので早速本題に入っていきましょう。
1．画像の貼り方
<img src="https://lightning-web.com/img/pos.jpg">
はい、以上です。これを表示すると
こうなります。
非常にシンプルです。アドレスさえ間違わなければそのまま表示されるのですから。
ちなみに画像のアドレスは今回フルパス(絶対パス)で入力しましたが、相対パスでも大丈夫です。(img/pos.jpgみたいなやつ)
2．imgタグで使える属性
さて、当然imgタグも属性が使えます。
一先ず一気に書いて、次の項から詳しく説明します
| src="アドレス" | これも一応 |
| width="数字" | 表示する画像の横幅 |
| height="数字" | 表示する画像の縦幅 |
| alt="文字" | 画像が表示されない時のメッセージ |
| title="文字" | 画像にカーソルを合わせた時のメッセージ |
2-1．width、height
これはテーブルでも出てきましたね。
ただこれはテーブルの時と異なり画像のサイズを伸縮させます。
この画像は横幅が300縦400ですので、横200と、横400の2つ表示させてみましょう。
ついでに横200縦600も表示しましょう。
<img src="https://lightning-web.com/img/pos.jpg" width="200">
<img src="https://lightning-web.com/img/pos.jpg" width="400">
<img src="https://lightning-web.com/img/pos.jpg" width="200" height="600">
タグはこう。実際に表示すると
1．２．
３．
こうなります。
小さい方はともかく、大きくすると引き延ばされて画像が荒くなります。
そして横200縦600ですが、横幅が200にはなりましたが、縦は600にはならず、
横200にしたものと同じになります。
「引き伸ばしはともかく、縮小する方はサムネとして利用するのに便利では？」
と思われると思いますが、正直お勧めしません。
何故ならこれはサムネ画像を作っているわけではなく実際の画像をそのまま表示しているだけだからです。
それの何が問題なの？と思うかもしれませんが、大きい画像を小さく見せているだけなので、あくまで通信量は元の画像と同じです。
つまり今のスマートフォン全盛の時代、安易にサムネとして表示するとパケットをバカ食いして通信制限を誘発するサイトになってしまうのです。
そうでなくてもこの属性を指定しなくても画像は表示されるので、むしろ使わなくてもいいとすら言えてしまいます……。
2-2．title
altよりもこっちの方が重要なので先にこちらから。
画像にカーソルを合わせてしばらくすると、文字がカーソル傍に表示されたという経験はありますでしょうか？
それがこのタグになります。
<img src="https://lightning-web.com/img/pos.jpg" title="画像だよ！">
それでは早速表示しましょう。画像にカーソルを合わせてみてください。
表示されましたか？ されましたね？
文字数制限はどうだったかは覚えていませんが、余程の長文でもなければ問題ないでしょう。
2-3．alt
そのままですが、画像が表示できなかった場合に表示されます。
今回参考として挙げている画像のファイル名は「pos.jpg」ですが、
通信に問題があり表示できなかった、あるいは普通に画像がなかったという体で「pos2.jpg」という画像を表示させようとしてみましょう。
<img src="https://lightning-web.com/img/pos2.jpg" width="300">
<img src="https://lightning-web.com/img/pos2.jpg" width="300" alt="ピッチャー投げたー">
上が何もしていない場合、下のタグが設定した場合です。
どちらも画像が表示されず、上は枠だけ、下は……なんか文字だけが表示されていますね。
というか文字だけ表示されていて意味がわからないくらいです（
これは上で書いたように通信に問題があり表示できなかった、あるいは普通に画像がなかった場合に表示するためのメッセージです。
どちらかと言えば何かあった際の為に設定するもので、普段表示されるものではないですね。
今回はこんなところでしょうか。
難しいものはなく、今回使えるのは正直「src」と「title」だけかもしれませんね。
