目次
1.イメージ②（写真風の画像）
写真風の枠の中にイメージ②の画像があります。
※クリックすると画像が大きくなります。
ここではイメージ②は「photoimg2.png」を使用しています。（※ここの画像はパソコンの時のみ表示されます。）
タブレット・スマホサイズの画面の時には表示されません。
タブレット・スマホサイズの画面の時には表示されません。
2.画像（イメージ②）を表示するソースコード
ファイルをエディタで開くと、
175行目あたりに「<div class=”fluid photo_img”><img src=”img/photoimg2.png” alt=””/></div>」があります。
このコードがイメージ②の画像を表示させるソースコードです。
※クリックすると画像が大きくなります。
|
1 2 3 4 5 |
<!--▼画像エリア（※この画像はPCの時だけ表示されます）--> <div class="fluid photo"> <div class="fluid photo_img"><img src="img/photoimg2.png" alt=""/></div> </div> <!--▲画像エリア）--> |
3.イメージ②を別の画像ファイルに変える
「photoimg1.png」ではなく別の画像を設定してみましょう。
「girl.jpg」を作ってその画像を指定してみます。
※クリックすると画像が大きくなります。
ファイルの中のコードを指定するファイル名に書き換えて上書き保存をします。
4.ワンポイントアドバイス
イメージ②の画像はパソコンで見るときに、横:325px・縦:380pxになるように設定されています。
※クリックすると画像が大きくなります。
上記を見てみると、「girl.jpg」のサイズは、横:1333px 縦:2000pxです。
それ以上大きなサイズの画像を指定すると、横幅325pxに縮小され、縦のサイズは同じ比率で縮小されます。
それ以上大きなサイズの画像を指定すると、横幅325pxに縮小され、縦のサイズは同じ比率で縮小されます。
横:1333px 縦:2000pxの画像を使用していても、きちんと縮小されて表示されます。
縮小されたあと縦サイズが380pxより大きい場合、はみ出した部分は自動的に切り取られて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。
縮小されたあと縦サイズが380pxより大きい場合、はみ出した部分は自動的に切り取られて表示されます。
大きなサイズの画像でもちゃんと縮小されて表示されますが、
できればあらかじめ横幅365pxくらいに縮小しておいたほうが、データ容量も膨大になりません。
次に「girl_002.jpg」という画像を作って、それを指定してみます。
この画像の比率は横サイズより縦サイズの方が小さい画像です。
※クリックすると画像が大きくなります。
上記を見てみると、「girl_002.jpg」のサイズは、横:1300px 縦:1100pxです。
縦サイズの方が小さいことがわかりますね。
縦サイズの方が小さいことがわかりますね。
縦サイズの比率が小さいと、縮小されたときに縦が380pxにならず余白ができてしまいます。
余白ができないようにするためには、縦サイズのほうが大きい画像を指定してください。
できればあらかじめ、横:325px・縦:380pxのサイズで画像を作ってアップロードしましょう。
余白ができないようにするためには、縦サイズのほうが大きい画像を指定してください。
できればあらかじめ、横:325px・縦:380pxのサイズで画像を作ってアップロードしましょう。