スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？ - SWELLに関する質問

RE: スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

Tue, 20 Sep 2022 08:14:17 +0000

詳細度も優先度もまあ同じようなものだと思います。（どちらの呼び方が正解なのかとかはちょっと分かってないです。）

ただ、max-widthだけimportant付けて優先度強くしても意味ないので、「セレクタの」詳細度を上げてください。

（かなり雑な）例

.my-allwidth-image.my-allwidth-image.my-allwidth-image{...}

RE: スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

ayanami650304 — Sat, 17 Sep 2022 16:20:30 +0000

詳細度を調べるうちに優先度が出てきたので同義だと理解してしまいました。
もう少し調べてみます。
ヒントがあれば教えてくださると嬉しいです。
力不足、理解不足ですみませんでした・・・。

RE: スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

しらこ — Thu, 15 Sep 2022 14:47:02 +0000

@ayanami650304 了さんの説明は読んで理解していただいておりますでしょうか？「詳細度」です。「優先度」ではありません。詳細度をGoogle検索などして対応してください。

RE: スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

ayanami650304 — Wed, 14 Sep 2022 18:08:07 +0000

返信くださりありがとうございます。

その後CSSを

/* スマホ画面いっぱいに画像を表示 */
@media only screen and (max-width: 480px){
my-allwidth-image {
position:relative;
left:-15px;
max-width: calc(100% + 30px)!important;
}
}

と"important"を入れて優先度を上げたのですが
反映されません。
ちなみに追加CSS内には他にコードを入れてません。
他に見るべき点があったらご教授いただけたら幸いです。

RE: スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

Wed, 14 Sep 2022 00:04:42 +0000

セレクタの詳細度を上げてみてください。

スマホの場合だけ、画像全幅（画面いっぱい）に出すにはどうすればいいでしょうか？

ayanami650304 — Tue, 13 Sep 2022 15:54:47 +0000

cocoonから乗り換えたばかりのものです。
cocoonでは以下のcssを追加して
スマホだけ画像を全幅させるということができていました。
しかし、SWELLに乗り換え
SWLLに同じcssを追加しても
スマホの場合画像の全幅ができませんでした。
（PCとスマホ両方で全幅しているという意味ではありません。）
どのように対処したらよいか
SWELLの先輩方にアドバイスいただきたいです。

以下cocoon時代に使っていたものです。

@media only screen and (max-device-width: 480px) {
.my-allwidth-image {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
}