【CSSだけ、コピペOK】PCとスマホで、画像・バナーを出し分けする方法にゃんと役立つ!Wordpress手引き書サイトにゃんと役立つ!Wordpress手引き書サイト自分で更新できるワードプレスで自分だけのホームページの作り方やポイントを紹介中!非エンジニアのための、とっても役立つ、Wordpress手引き書サイトです。記事内に商品プロモーションを含む場合がありますPCとスマホで、画像やバナーを出しわけるにゃん。CSSのメディアクエリを使って、PCとSPで画像を出しわけます。基本の切り替えCSSのコード(コピペOK)contentを使用してCSSで画像を出し分けるソースHTML部分:<img>タグにclass="responsive-image"を設定しています。src属性は指定せず、CSSのcontentプロパティで画像を制御します。CSS部分:.responsive-imageクラスに基本的なスタイルを設定しています。urlで指定しています。メディアクエリを使用して、画面幅が767px以下の場合(スマートフォンサイズ)に別の画像を表示するようにしています。alt="レスポンシブ画像">30</body>31</html>メディアクエリのブレイクポイント(この例では767px)は、ご要望に応じて調整可能です。必要に応じて複数のブレイクポイントを設定し、タブレット用の画像なども追加できます。このコードを使用することで、デスクトップPCでは大きな画像が、スマートフォンでは小さな画像が表示されるようになります。これにより、モバイルデバイスでのパフォーマンスを向上させつつ、デスクトップでは高品質な画像を提供することができます。HTMLで画像URLを指定する方法HTML部分:2つの<img>タグを用意し、それぞれにPC用とスマートフォン用のクラスを付与しています。各画像に直接src属性でURLを指定しています(この例ではプレースホルダーを使用)。CSS部分:.pc-imageと.sp-imageに対して、初期状態での表示・非表示を設定しています。メディアクエリを使用して、画面幅が767px以下の場合に表示する画像を切り替えています。none;を使用して、適切な画像を表示・非表示にしています。</div>42</body>43</html>HTMLで直接画像を指定するため、画像の管理が容易です。異なるデバイス向けに完全に別の画像を用意できます(例:アスペクト比や内容が異なる画像)。高解像度の画像を指定する場合のCSS近年、スマホではPCよりもより高解像度の画像を求められることも多々あります。モバイル用に2倍サイズ(高解像度)の画像を指定する場合のCSS記載についても、ご紹介しておきます!「spで表示すると画像がぼやけて見えるなぁ」という場合は、高解像度の画像に差し替えてみましょう!srcset属性を使用する方法<img>タグにsrcset属性を使用しています。3x)に対応する画像を指定しています。src属性はフォールバック用として、最も低解像度の画像を指定しています。ブラウザは、デバイスの画面解像度に基づいて適切な画像を選択します。Retinaディスプレイ(2x)では、800×600の画像が選択されます。※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。alt="レスポンシブ画像">22</body>23</html>image-set()関数をCSSで使用する方法CSSのbackground-imageプロパティにimage-set()関数を使用しています。3x)に対応する画像を指定しています。ブラウザの互換性のため、-webkit-プレフィックス付きのバージョンも含めています。フォールバック用として、通常のbackground-imageも指定しています。image-set()関数を使用することで、ブラウザはデバイスの画面解像度に基づいて適切な背景画像を選択します。※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。上記2つの方法は組み合わせて使用することはできます。いうのも、image-set()関数は比較的新しい機能なので、古いブラウザではサポートされていない可能性があります。この方法を使うことで、高解像度のスマートフォンディスプレイでも鮮明な画像を表示することができます。通常のディスプレイでは標準解像度の画像が、高解像度ディスプレイでは2倍サイズの画像が表示されます。※/api/placeholder/幅/高さは実際の画像URLに置き換えてください。役立つ!Wordpress手引き書サイト記事URLをコピーしました。