端末ごとに表示する画像を切り替える方法
はじめに
WEBサイトで表示させる画像を、端末によって切り替える方法について考えてみました。
基本的にCSSのメディアクエリを使うようになるだろうなと思っていましたが、やはりメディアクエリによる切り替えが一般的なようです（というか他の方法は見つかりませんでした）。
メディアクエリとは
メディアクエリはCSSの一つで、端末のウインドウ環境（大きさや解像度など）に合わせてスタイルを切り替える技術のことです。
メディアクエリを使用することで、パソコン・タブレット・スマホ等異なるウインドウ環境で画面表示やレイアウトを切り替える（レスポンシブ）が可能になります。
また、HTML5.1で新たに追加された要素でも画像の切り替えができますので、こちらについても紹介します。
使用する画像について
今回は「PC」「タブレット」「スマホ」の切り替え用に、3種類の画像を用意しました。
（先日、熊野三山（「熊野速玉大社」「熊野那智大社」「熊野本宮大社」）を参拝したので、その時撮影した3枚の写真を利用します）
ブラウザの横幅にあわせて画面表示が切り替わるようにします。
オリジナルのサイズはそれぞれ「340px×255px」なので、実際にはもう少し大きく表示されます。
PC用画像
（熊野速玉大社）
タブレット用画像
（熊野那智大社）
スマホ用画像
（熊野本宮大社）
仕上がりイメージ
ブラウザの横幅を狭めたり広げたりして確認して下さい。
PC用画像（熊野速玉大社）
タブレット用画像（熊野那智大社）
スマホ用画像（熊野本宮大社）
目次
img要素で切り替える場合
img要素で画像を切り替える場合、HTML側では切り替える画像の数だけimg要素を記述します。
そしてその要素それぞれにclassを指定し、CSSのメディアクエリで表示（display:block）・非表示（display:none）を切り替えます。
メディアクエリの設定方法は、下記のように記述します
.クラス名 {
@media (min-width: (切り替えたい画面サイズ)) { /* あるいは max-width */
そのメディアクエリ内で設定したいプロパティなどを記述
}
}
下の例では、「横幅が768px以上の場合はappearance_pcクラスが表示」「640px以上ならappearance_tabクラスが表示」「それ以下はappearance_spクラスが表示」されるよう設定しています。
HTML
<img src="pc用画像パス" alt="" class="appearance_pc"> <img src="タブレット用画像パス" alt="" class="appearance_tab"> <img src="スマホ用画像パス" alt="" class="appearance_sp">
CSS
.appearance_pc {
@media (min-width: (768px)) { display: block; }
@media (max-width: (768px)) { display: none; }
@media (max-width: (640px)) { display: none; }
}
.appearance_tab {
@media (min-width: (768px)) { display: none; }
@media (max-width: (768px)) { display: block; }
@media (max-width: (640px)) { display: none; }
}
.appearance_sp {
@media (min-width: (768px)) { display: none; }
@media (max-width: (768px)) { display: none; }
@media (max-width: (640px)) { display: block; }
}
できあがったもの
ブラウザの横幅を狭めたり広げたりして確認して下さい。
PC用画像（熊野速玉大社）
タブレット用画像（熊野那智大社）
スマホ用画像（熊野本宮大社）
background要素で画像を切り替える場合
background要素で画像を切り替える場合も、メディアクエリを使用します。
HTML内にimg要素を記述しない分だけシンプルですが、CSSのbackground-imageプロパティをメディアクエリで切り替ます。
HTML
<div class="test_box"></div>
CSS
今回使用する画像サイズが「340×255px」なので、width: 340pxheight: 255pxを設定しています。
.test_box {
width: 340px;
height: 255px;
background-position: center center;
background-size: contain;
background-repeat: no-repeat;
@media (min-width: (768px)) { background-image: url("pc用画像パス") }
@media (max-width: (768px)) { background-image: url("タブレット用画像パス"); }
@media (max-width: (640px)) { background-image: url("スマホ用画像パス"); }
}
できあがったもの
ブラウザの横幅を狭めたり広げたりして確認して下さい。
PC用画像（熊野速玉大社）
タブレット用画像（熊野那智大社）
スマホ用画像（熊野本宮大社）
picture要素で切り替える場合
HTML5.1からpictureという要素が追加されました。
picture要素を使う事で、ある条件（ウインドウの横幅）によって表示させる画像を切り替える事が可能になっています。
画面の切り替えを行う場合、picture要素の子要素としてsource要素とimg要素を使用します。
pictureの子要素
| 要素 | 概要 |
|---|---|
| source | 条件（ウインドウの横幅）で表示させる画像を指定できます（複数記述可） |
| img | source要素の条件に合致しない場合に表示させる画像を指定します |
私も初めて使ってみた時に分かったのですが、picture要素内にimg要素を必ず記述しないと画像は表示されません（source要素だけでは画像が表示されない）。
また、img要素は必ず最後に記述する必要があるようです。
では、どのように条件を分けるかについてですが、source要素内にmedia属性を使用します。
その他、source要素はimg要素とは記述する属性が少し変わりますので、簡単に紹介します。
source要素の属性
| 属性 | 概要 |
|---|---|
| srcset | 画像のパスを指定 |
| media | 画像を表示させる条件（ウインドウの横幅）を指定 |
このほかにも属性がありますが、今回は割愛します。
media属性についてですが、例えば「横幅768px以上の場合」はmedia="(min-width: 768px)"のように記述します。
HTML
<picture> <source srcset="PC用画像パス" media="(min-width: 768px)"> <source srcset="タブレット用画像パス" media="(min-width: 640px)"> <img src="スマホ用画像パス" alt=""> </picture>
上記の場合だと、「画面サイズが768px以上でPC用画像が表示」「640px以上でタブレット用画像が表示」「それ以下の場合にスマホ用画像が表示される」という条件分岐になります。
HTMLの記述だけで画像の切り替えが可能なので、CSSを編集する必要が一切ありません。
できあがったもの
ブラウザの横幅を狭めたり広げたりして確認して下さい。
PC用画像（熊野速玉大社）
タブレット用画像（熊野那智大社）
スマホ用画像（熊野本宮大社）
picture要素はHTML5.1で新たに追加された要素なので、この方法をスタンダードにしたい（？）のかと個人的には思っています。
しかし、CSS（SCSS）を使わないという事は、将来的にwidthの値を変更したい場合、全HTMLファイルを横断して置換しないといけないのかな、と少し手間なようにも感じています。
そんな訳で私としては画像の切り替えを実装する場合は、しばらくCSSのメディアクエリで対応しようと考えています（何か方法が見つかればよいのですが）。
