レスポンシブ対応の画像切り替え方法

画像をpictureタグで切り替える方法

画像をpictureタグで切り替える方法を説明します。

                                                                             html
<picture>
  <source media="(min-width: 1200px)" srcset="large-image.jpg">
  <source media="(min-width: 768px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="テキスト">
</picture>

このコードの説明:

1. <picture>要素: 複数の画像ソースをグループ化します。
2. <source>要素:
   • media属性: メディアクエリを指定し、どの条件で画像を表示するかを定義します。
   • srcset属性: 表示する画像ファイルを指定します。
3. <img>要素: デフォルトの画像とフォールバックを提供します。また、alt属性で画像の説明を記述します。

このコードは以下のように動作します:

• 画面幅が1200px以上: large-image.jpgを表示
• 画面幅が768px以上1200px未満: medium-image.jpgを表示
• 画面幅が768px未満: small-image.jpgを表示

バックグラウンドで画像を切り替える方法

                                                                            html

    <div class="background-container"></div>

                                                                            css
.background-container {
            width: 100%;
            height: 100vh;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* スマートフォン向け（デフォルト） */
        .background-container {
            background-image: url('small-image.jpg');
        }

        /* タブレット向け */
        @media (min-width: 768px) {
            .background-container {
                background-image: url('medium-image.jpg');
            }
        }

        /* デスクトップ向け */
        @media (min-width: 1024px) {
            .background-container {
                background-image: url('large-image.jpg');
            }
        }

1. HTMLで背景画像を表示するためのdiv要素を作成します。
2. CSSで.background-containerクラスに基本的なスタイルを設定します。
   • background-size: cover;で画像をコンテナにフィットさせます。
   • background-position: center;で画像を中央に配置します。
   • background-repeat: no-repeat;で画像の繰り返しを防ぎます。
3. メディアクエリを使用して、デバイスの画面幅に応じて異なる背景画像を設定します。
   • スマートフォン向け（デフォルト）: 768px未満
   • タブレット向け: 768px以上1024px未満
   • デスクトップ向け: 1024px以上

実際に使用する際は、small-image.jpg、medium-image.jpg、large-image.jpgを適切な画像ファイルに置き換えて下さい。また、必要に応じてブレイクポイントや画像サイズを調整してください。

まとめ

pictureタグを使って画像を切り替える方法とバックグラウンドで画像をレスポンシブ対応で切り替える方法を説明しました。

pictureタグを使えばcssを使わなくても画像を切り替えられます。