【Next.js+TailwindCSS】サイズの異なる2種類の画像をモバイルとPCで切り替える仕組み

概要

• アプリケーション上に使用する画像をモバイルとPCで切り替える

該当コード

<Image
    src="/hero-desktop.png"
    width={1000}
    height={760}
    className="hidden md:block"
    alt="Screenshots of the dashboard project showing desktop version"
/>

<Image
    src="/hero-mobile.png"
    width={560}
    height={620}
    className="block md:hidden"
    alt="Screenshots of the dashboard project showing desktop version"
/>

仕組み

className="hidden md:block"
className="block md:hidden"

• ここがToggleスイッチの役割を果たしている。
• Pc: デフォルトはhidden, md以上のサイズ（768px）であればmd:blockで表示。
• SP: デフォルトはblockで表示, md以上のサイズ（768px）であればmd:hiddenで非表示。

MediaQueryはもう要らなくなったんだなあ。。。