ホームページ更新その18（画像の加工とスマホ対応）

ホームページの画像の加工とスマホ対応を行いました。

横幅、1920pxで作成します。
Instagramの正方形の画像を2つ横に並べたいので、960x960pxの画像を横に並べて、1920x960pxで画像を作ります。

Photoshopで1920x960pxのカンバスを用意して、そこに画像を配置してサイズを整えます。

画像のサイズは、画像を選択して「プロパティ」で変更できます。
また、画像を選択して、「編集」メニューから「自由変形」で、画像の角をドラッグします。

画像を2つ配置したら、Photoshop形式で保存した後に、jpegで書き出します。

PC用の画像をそのままスマホで表示すると小さくなって見にくくなってしまうので、スマホ用の画像が別で用意します。

PC用は横長の画像でしたが、スマホ用は正方形で作ります。
960x960pxのカンバスに、960x480pxの画像を2つ縦に並べます。

長方形選択ツールで、画面上のスタイルを「固定」を選ぶと、具体的な数値を指定して選択範囲を作ることができます。
「縦横比を固定」を選ぶと縦横比を指定して選択範囲を作ることができます。

画像を2つ配置したら、Photoshop形式で保存した後に、jpegで書き出します。

スマホ対応は、cssでPC用の画像とスマホ用の画像を切り替えるようにします。
htmlに、PC用の画像は「pc」のclass名、スマホ用の画像は「sp」のclass名をつけます。

cssに、通常は、PC用の画像を表示して、スマホ用の画像を非表示、スマホの画面サイズの時は、PC用の画像を非表示にして、スマホ用の画像を表示します。

cssに以下を記述します。
.pc { display: block !important; }
.sp { display: none !important; }

@media screen and (max-width: 767px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

SAInoLESSON（サイのレッスン） Macの使い方講座、詳しい情報はこちら。

ホームページ更新 その18（画像の加工とスマホ対応）