トップ > はじまりの村（初級エリア） > §-4 召喚の魔法：imgタグで画像を呼び出す！ 【HTML】img

想像してごらん。「img」を操って想像を具現化しろ！

今日もかなり重要な魔法を教えるぞ。
画像を召喚する魔法だ。

キッチリマスターしろよ。
それじゃ、さっそく唱え方と魔法効果を見てみろ。

<img src="https://html-magicworld.net/img/sample.png">

今回の呪文はタグで挟むタイプではない。
閉じタグがないタイプだ。

img（イメージ）タグのsrc（ソース）属性に、呼び出したい画像のURLを入れればOKだ。

<img src="★ここに画像のURL★">

ここで注意するのはURLと言っても、画像のURLなのでhttps://www.dmm.com/とか入れるなよ。

ちなみに表示できる画像の拡張子は色々あるぞ。

• jpgかjpeg（読み方：ジェイペグ）
• png（読み方：ピングとかピーエヌジーとかピン）
• gif（読み方：ジフだがギフと呼ぶ人もいるとかいないとか）
• svg（読み方：エスブイジー）

などなど。

まぁ、よく使うのはpngかjpgだと思う。

今は、唱え方だけ覚えておけばいいぞ。
画像のURLって？　とか詳しくわからなくてOKだ。

少し長くなったが、今日はここまにしよう。

次は、「§-5 整列の魔法」だぞ。

さらにレベルアップしたい人向け

ここからは遊び人は読まなくてもいいぞ。
まあ、『もうちょっとレベルアップしたいヤツ』と『ドラゴンを小さくしてペットにしたいと思ってるヤツ』は読んでいいぞ。

実は画像を呼び出す際にサイズを指定しながら呼び出すことができるぞ。

 <img src="★ここに画像のURL★" width="★横サイズ★" height="★縦サイズ★"> 

画像ファイルは横（width：ウィドゥスとかワイズとか）と縦（height：ハイト）のサイズがpx（ピクセル）って単位で決まっている。

サンプル画像は横200px縦200pxの画像だ。これを色々なサイズで呼び出してみるぞ。

<img src=”https://html-magicworld.net/img/sample.png”>
記載なし
（そのままの画像サイズで表示される。横200px縦200px）

<img src=”https://html-magicworld.net/img/sample.png” width=”200px”>
横（width）を200pxで指定。
（横200px縦200px）

<img src=”https://html-magicworld.net/img/sample.png” height=”100px”>
縦（height）を100pxで指定
（縦が100pxになり、自動的に横も同じ比率を保つので横100px）

<img src=”https://html-magicworld.net/img/sample.png” width=”400px” height=”400px”>
横（width）と縦（height）を400px指定
（横400px縦400px。ただ元の画像200px以上を指定しているので画像がボヤけてみえる）

横を100pxや400pxで呼び出すとサイズが変わってるのがわかるだろ。
基本的には、
横（width）を指定するだけで、縦（height）も元と同じ比率で縮小拡大されるし、縦（height）を指定するだけで横（width）も縮小拡大されるぞ。

色んな要素が絡んでいるから、初級者にはわかりにくいと思う。
とりあえずもうちょっと画像を調整したいなーって時は、width=”★px”って属性を追加してサイズを確認しながら調整してみろ。

推奨されるのは、widthとheightの両方記載だぞ。
それと、元の画像サイズより大きいサイズを指定するとぼやけるからな。

そのうち、より詳しく検証した書を探しておくからな。

色々と話したから、覚えきれなくてもOKだ。
次回は、 「§-5 整列の魔法」 だぞ。

それじゃ、次に備えてカジノでレースでもして遊んでこい。