iSaraの「実現可能です」のブロックについて解説願います。

現在以下サイトを模写コーディングしております。
iSaraリンク

添付のブロック内の3人の画像部分のサイズ指定、レスポンシブ対応が上手くいきません。
bootstrapは使用せずにSCSSで実装することはできないのでしょうか？

以下一番上の画像のみ抜粋してコードを貼付いたします。

HTML
1<div class="image">
2  <img src="img/take.jpg" width="245" height="245" alt="画像">
3</div>

SCSS
1.image img{
2  width: calc(245px + (100vw - 768px) * (300 - 245) / (992 - 768));
3  height: auto;
4}
5
6@media screen and (min-width: 992px){
7  .image img{
8    width: 245px;
9  }
10}

miyabi_pudding

2020/06/07 12:52

> レスポンシブ対応が上手くいきません。どういうことでしょうか？そのサイトの所有者ではなく、模写しているということですか？それなら、そう記載するのと、現在のソースコードを、質問本文に記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

bootstrapは使用せずにSCSSで実装することはできないのでしょうか？

可能です。
現に、参考サイトは、CSSのみでやっているようです。

やり方としては、こちらでコードを書くわけにはいかないので、
（質問のコードから、参考サイトと同じ挙動のものを作るとなると、作業依頼になってしまいます）
いくつかヒントというか、やり方を書き出します。

3〜4段階で切り替えている

メディアクエリを使い、3〜4段階に分けて、CSSを上書きしています。
（上行に書いている同じスタイルを、その下行にて、同じスタイルを値だけ変えて上書きする手法）
例えば下記のような形です。

css
1.image img {
2  width: 300px;
3  height: auto;
4}
5
6@media screen and (max-width: 992px){
7  .image img {
8    width: 100%;
9  }
10}
11
12@media screen and (max-width: 750px){
13  .image img {
14    width: 80vw;
15  }
16}

初期にデフォルトで、width: 300pxを与え、それぞれ、スクリーンサイズが992px以下になったとき、750px以下になったときに、別の値を与える、とやって、デバイスサイズによって、値を上書きます。
このような上書きを、3〜4段階のデバイスサイズによって切り替えているのだと思います。

px絶対値と相対単位をうまく使っている

px単位で指定する場合は、デバイス別にとはいきません。
デバイスによって、見え方の比率が大きく変わるため、意図したレイアウトを組むのが難しくなります。
ただし、PCに関しては、逆に相対単位を使うと意図したレイアウトを組むのが難しいため、（レイアウトによっては、相対単位を使った方がいい）px絶対値を使うことが多いです。
なので、参考サイトさんでもやっているのは、
あるサイズではpx絶対値、あるサイズからは相対単位という風に上記で述べた切り替えを行っているようです。
おそらく、%や、デバイスの横幅からの比率で大きさを指定できる、vwを使っているものと思われます。