HTMLへ画像・動画を貼り付け・縮小

1. 画像の貼り付け方

基本は <img> タグを使います。PNG、GIF、WebPは同じ方法です。

<img src="sample.png" alt="PNGサンプル">
PNGサンプルsample.png（PNG） 
<img src="sample.gif" alt="GIFサンプル">
GIFサンプルsample.gif（GIF） 
<img src="sample.webp" alt="WebPサンプル">
WebPサンプルsample.webp（WebP）

2. 画像の縮小方法

HTML属性で幅と高さを指定する：

<img src="sample.png" alt="サンプル画像" width="300" height="200">

※縦横比を保ちたい場合は片方だけ指定すると自動調整されます：

<img src="sample.png" alt="サンプル画像" width="300">
サンプル画像600×600のPNGを横300に縮小

3. 動画の貼り付け方

基本は <video> タグを使います。MP4、WebMは同じ方法です。

<video src="sample.mp4" controls></video>
sample.mp4 
<video src="sample.webm" controls></video>
sample.webm

4. 動画の縮小方法

動画も幅と高さを指定するだけで縮小できます：

<video src="sample.mp4" width="400" height="225" controls></video>

縦横比を保ちたい場合は片方だけ指定：

<video src="sample.mp4" width="400" controls></video>

5. 動画のループ・自動再生

ループ再生・自動再生・ミュートで「ずっと動く」動画：

<video src="sample.mp4" width="320" loop controls></video>
再生ボタンを押すと動画がループします 
<video src="sample.webm" width="320" autoplay loop muted></video>
ページを読み込んだら自動再生。音なし。
  • loop：動画が終わったら最初に戻る
  • controls：再生・一時停止ボタンなどを表示
  • autoplay：ページ読み込み時に自動再生
  • muted：音声を消す（ブラウザの自動再生制限対策）

まとめ

  • 画像も動画も、HTMLタグは <img> と <video> を使う
  • 縮小は width と height 属性で指定、片方だけでも縦横比保持
  • 動画のループ・自動再生・ミュートは loop autoplay muted を追加
  • PNG/GIF/WebP、MP4/WebMは同じ方法で扱える
上に戻る