【HTML】画像挿入する方法(imgタグのsrc属性を利用する)
HTMLで画像を挿入するにはimgタグのsrc属性を利用します。
<img src ="ファイル名">
![](https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png)
上記の画像ファイルは「https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png」にあります。
画像ファイルと同じディレクトリ内にHTMLが存在する場合は
<img src ="imgsrc.png">
で表示することができます。
同じディレクトリにない場合は画像は表示することはできません。
以下のように絶対パスを指定して画像を表示することができます。
<img src ="https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png">
alt属性:画像の代わりのテキストを設定
alt属性を設定することで、画像が表示することができない場合(※画像が存在しない等)に設定したテキストが表示されます。
<img src ="ファイル名" alt = "画像">
上記でファイルが存在しない場合は、以下のように表示されます。
![](https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc2.png)
width:画像の幅を設定、height:画像の高さを設定
//width:画像の幅を設定、height:画像の高さを設定 <img src ="ファイル名" width ="ピクセル数 または パーセント">
width属性を使用することで横幅を設定することができます。
例えば、次のように記述すると幅が縮小されることが分かります。
<img src="https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png" width="133" height="68">
↓通常表示時↓
![](https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png)
↓幅、高さ調整後↓
![](https://shiken-kouryaku-joho.com/wp-content/uploads/2023/07/imgsrc.png)
コメントを残す