画像のサイズ調整について教えてください

Question

SNSボタンのサイズ調整について教えてください
画面サイズに応じてSNSボタンがはみ出てしまうため
SNSボタンが縦に並ぶようにしたい。
ボタンサイズは縮小の最低値を設定できればうれしいです
画面に合わせて、サイズ変更と縦に並べるを同時に記述するのが
難しいようでしたらボタンのサイズは固定で構いません。
サイト自体はレスポンシブデザインです
よろしくお願いします

現在のコードはこちらです
<style>
.sns-share-links {
display: flex;
align-items: center;
gap: 0px 50px;
}
</style>
<div class="sns-share-links">
<!-- Facebook --><a class="js-sns-link" href="//www.facebook.com/sharer/sharer.php?u=&t=" target="_blank" rel="nofollow noopener noreferrer">
<img src="/public/customer/img/search/f_logo_rgb-black_512.png">
</a>
<!-- Twitter --><a class="js-sns-link" href="//twitter.com/intent/tweet?text=&url=" target="_blank" rel="nofollow noopener noreferrer">
<img src="/public/customer/img/search/2021twitterlogo-black.png">
</a>
<!-- LINE --><a class="js-sns-link" href="//timeline.line.me/social-plugin/share?url=&text=" target="_blank" rel="nofollow noopener noreferrer">
<img src="/public/customer/img/search/line_brand_icon.png">
</a>
<!-- はてなブログ --><a class="js-sns-link" href="//b.hatena.ne.jp/add?mode=confirm&url=&title=" target="_blank" rel="nofollow noopener noreferrer">
<img src="/public/customer/img/search/hatenabookmark_symbolmark.png">
</a>
<!-- ピンタレスト --><a class="js-sns-link" href="//www.pinterest.com/pin/create/button/?url=&media=" target="_blank" rel="nofollow noopener noreferrer">
<img src="/public/customer/img/search/P-Badge-Red-RGB.jpg">
</a> <br>
</div>
</div>

Comments

[maisumakun]

<div class="container">となっているものの、こちらにかけるCSSが存在しませんが、それは意図通りでしょうか？

[takami3]

ありがとうございます
<div class="container">
こちらは不要です
宜しくお願い致します。

[Lhankor_Mhy]

「折り返し」ではなくて「縦に並ぶ」で間違いないですよね？
そして「縦に並ぶ」スクリーンサイズはボタンがはみ出る時、という理解であっていますか？　ボタンのサイズや数は固定ではなくて変動しますか？

[takami3]

コメントありがとうございます。縦に並ぶで間違いありません。
またボタンがはみ出るという理解であっています
ボタンの数は変動しません。
サイズは最低値だけ設定できればうれしいです
よろしくお願いします

[Lhankor_Mhy]

> サイズは最低値だけ設定できればうれしいです

『ボタンサイズが変わるのではなく』とのことですので、ボタンのサイズは固定だと思うのですが、最低値とはどういう働きをするものですか？　

[takami3]

スマホのように画面が小さい場合、現状のボタンの大きさですと少し大きい気がします
ボタンのサイズを画面に合わせて小さくする場合、小さくなりすぎて見えなくなっては困るため、最低値を設定すべきかと考えました。
サイズ変更と縦に並べるを同時に記述するのは難しいのかもしれません。
難しいようでしたらボタンのサイズは固定で構いません。
よろしくお願いします。

Answer 1

皆様ご回答ありがとうございます
flex-wrapを使って自己解決できました
ありがとうございます

Comments

[yambejp]

それって折り返しですよね？
質問のコメントでは折り返しではなく縦並びで間違いないと明言されていたと思いますが
結局は折返しで十分ということですか？

[Lhankor_Mhy]

「折り返し」ではなくて「縦に並ぶ」で間違いないですよね？　と補足依頼欄で確認していたはずですが、お読みにならずにご返信されていましたか？

[takami3]

私の拙い説明で混乱させてしまいました。
申し訳ございません
画面によってはみ出てしまうので画面の縮小に合わせて縦に並んでいくというのが本来の目的です
ありがとうございました。

[takami3]

Lhankor_Mhy様
読まないとか見てないとかそういうことはしません。
勘違いやニュアンスの違いなど説明が拙いことはだれしもあるかと思います
前回のLhankor_Mhy様からのコメントも同じです
何卒宜しくお願いします

[Lhankor_Mhy]

「折り返し」という言葉の意味が具体的にはわからなかった、ということなのですね。傾向はわかりました、了解です。

Answer 2

メディアクエリーで画像の想定値からwidthを決めて、それ以下になったら縦並びにすればよいのでは？
５つ横並びが急にすべて縦並びになるのは仕様としては微妙ですが

参考

いまいちうまくできません

質問の意図とあっていないかもしれませんが、参考までに

<style>
*{
  margin:0;
  padding:0;
}
@media screen and (min-width: 700px) {
  .sns-share-links{
  margin:0;
  display: flex;
  align-items: center;
  gap: 0px 50px;
  }
}
</style>
<div class="sns-share-links">
<div><img src="#" width=100 height=100 alt="#1"></div>
<div><img src="#" width=100 height=100 alt="#2"></div>
<div><img src="#" width=100 height=100 alt="#3"></div>
<div><img src="#" width=100 height=100 alt="#4"></div>
<div><img src="#" width=100 height=100 alt="#5"></div>
</div>

「min-width: 700px」の根拠は画像widthの1005、画像の間のgap 504の計

Comments

[takami3]

ご回答ありがとうございます
いまいちうまくできません
具体的にはどのようなコードになりますか?
宜しくお願い致します。

[takami3]

ご回答いただき誠にありがとうございます。
@media screen and (min-width: 700px) {
と記載ありますが＠は何を意味するものでしょうか
調べても＠が何なのかわかりませんでした。
こちらは初めて目にする記号ですが、こちらを使わずに記述することは可能でしょうか？
お忙しいと存じますがよろしくお願いします

[Lhankor_Mhy]

横からすみません。

https://teratail.com/questions/4hvv18nulzeucx#reply-ryhzdeupx071ea
あなたは、この回答のコメントで @import を試したけど上手くいかなかった、と書いていたと思うのですが……

[juner]

メディアクエリは ブラウザの状態を取得するものです。使わないなら画面のサイズによって切り替えることはできないのではないでしょうか？ https://developer.mozilla.org/ja/docs/Learn_web_development/Core/CSS_layout/Media_queries

Answer 3

.sns-share-links全体の幅を設定していないようです。

こちらをmax-width: 100%のようにしてみたらどうなりますか？

Comments

[takami3]

ご回答いただきありがとうございます
.sns-share-links {の中にmax-width: 100%を記述しましたが変わりありませんでした
宜しくお願い致します。