• 基本的な画像の挿入方法
• 相対パスと絶対パス
• alt属性の使い方
• 画像サイズの指定
• 画像をリンクにする
• CSSで背景画像を設定する
• レスポンシブ対応の画像
• 画像フォーマットの選び方

基本的な画像の挿入方法

HTMLで画像を挿入するには<img>タグを使用します。画像のパスはsrc属性で指定します。

<img src="example.jpg" alt="サンプル画像">

このコードを使うと、ブラウザに「example.jpg」という画像が表示されます。

相対パスと絶対パス

画像のパスには相対パスと絶対パスがあります。

相対パス

現在のHTMLファイルの場所を基準にしたパスです。

<img src="images/sample.jpg" alt="サンプル画像">

絶対パス

URLを指定する方法です。

<img src="https://example.com/images/sample.jpg" alt="サンプル画像">

alt属性の使い方

alt属性は、画像が表示されない場合に代替テキストを表示するために使います。

<img src="photo.jpg" alt="風景の写真">

画像サイズの指定

HTMLではwidthとheight属性でサイズを指定できます。

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

画像をリンクにする

画像をクリックすると別のページに移動するようにするには、<a>タグを使います。

<a href="https://example.com">
    <img src="logo.jpg" alt="ロゴ">
</a>

CSSで背景画像を設定する

HTMLのimgタグを使わずに、CSSのbackground-imageを使って背景画像を設定できます。

<div style="background-image: url('background.jpg'); width: 300px; height: 200px;"></div>

レスポンシブ対応の画像

レスポンシブデザインでは、CSSを使って画像を画面サイズに合わせて調整できます。

<img src="responsive.jpg" style="max-width: 100%; height: auto;" alt="レスポンシブ画像">

画像フォーマットの選び方

• JPEG: 写真向き、高圧縮
• PNG: 透過背景を持つ画像に適用
• GIF: アニメーションに対応
• SVG: ベクター画像で拡大縮小しても劣化しない
• WebP: 高圧縮かつ高品質

以上がHTMLで画像を挿入する方法の詳細な解説です。