Q&A
画面幅にwidthを合わせるのではダメなのですか？
vwや%などの単位でそういう指定ができるかと思いますが
メディアクエリを使わずに作りました。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 5 <meta charset="UTF-8"> 6 <style> 7 .main { 8 background-color: white; 9 display: grid; 10 gap: 16px; 11 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 12 padding: 16px; 13 margin: 16px; 14 } 15 .main-item { 16 background-color: red; 17 height: 100px; 18 } 19 </style> 20 </head> 21 <title> 22 </title> 23 <body style="background-color: turquoise;"> 24 <main class="main"> 25 <div class="main-item">item 1</div> 26 <div class="main-item">item 2</div> 27 <div class="main-item">item 3</div> 28 <div class="main-item">item 4</div> 29 <div class="main-item">item 5</div> 30 <div class="main-item">item 6</div> 31 <div class="main-item">item 7</div> 32 <div class="main-item">item 8</div> 33 <div class="main-item">item 9</div> 34 <div class="main-item">item 10</div> 35 </main> 36 </body> 37</html>
幅の最小値300pxとしているので幅300以下のモニターで見るとコンテンツがはみ出すのが問題です。
なので以下のサイトのように横幅を一定の部分まで狭めるとスマホ版の全体が縮小されていくようにしてみたいですがどのような方法があるでしょうか。
https://www.panda-ah.com/
こちら要素一つ一つにブレイクポイントを設けているわけでは無さそうですが、特殊なviewport設定などが存在するのでしょうか。
％等だとはみ出ることは無くなるかもしれませんがかなり画面幅を狭めないと1カラムにならない等が発生するのであえて300pxにしています
それならflexでwrapを指定すれば1カラムという構造にはできますね。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items
gridでも似たようなことが出来ます。300pxというのが決まりきった幅ならgridレイアウトでも柔軟に位置指定ができます。
ちなみに、仮に%指定で現れる問題(1カラムにならない)が既知なのであれば質問をする際に、試したこととして記載すると良いかと思われます。
質問を読み返しましたが、
mim-widthや
https://developer.mozilla.org/ja/docs/Web/CSS/min-width
max-widthが利用可能と思います
https://developer.mozilla.org/ja/docs/Web/CSS/max-width
回答3件
0
今回の事例では蛇足かもしれないですが、
例えば余った領域はitemの幅で広げたい場合こういう例もあり得ます。
ほかの方が検索等で辿ったときに、参考になることもあると思うので残しておきます。
軽い説明ですが、flexだとgridと違いpx指定をせずともコンテンツを計算する方針が立つため、gridでは不可能なレイアウトが可能になります。
(今回はサンプルに従って、px指定がしてありますが。)
ちなみに、単にあるポイントでは大きすぎる、あるいは小さすぎるときは
min-widhtやmax-widhtを使用することも検討できます(コード例は載せていません)
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta name="viewport" 6 content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 7 <meta charset="UTF-8"> 8 <style> 9 /* .main { 10 background-color: white; 11 display: grid; 12 gap: 16px; 13 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 14 padding: 16px; 15 margin: 16px; 16 } 17 .main-item { 18 background-color: red; 19 height: 100px; 20 } */ 21 22 body 23 { 24 /* はみ出たら隠し横スクロールをなくす(なくてもいい) */ 25 /* word-break: break-all; */ 26 } 27 .main 28 { 29 background-color: white; 30 display: flex; 31 flex-wrap: wrap; 32 gap: 16px; 33 justify-content: space-between; 34 35 padding: 16px; 36 margin: 16px; 37 } 38 39 .main-item 40 { 41 background-color: red; 42 height: 100px; 43 44 flex-grow: 1; /* ここを消せば、スペースを埋めなくなります */ 45 flex-shrink: 1; /* 300pxが大きすぎるとき縮小します */ 46 flex-basis: 300px; 47 48 } 49 </style> 50</head> 51<title> 52</title> 53 54<body style="background-color: turquoise;"> 55 <main class="main"> 56 <div class="main-item">item 1</div> 57 <div class="main-item">item 2</div> 58 <div class="main-item">item 3</div> 59 <div class="main-item">item 4</div> 60 <div class="main-item">item 5</div> 61 <div class="main-item">item 6</div> 62 <div class="main-item">item 7</div> 63 <div class="main-item">item 8</div> 64 <div class="main-item">item 9</div> 65 <div class="main-item">item 10</div> 66 </main> 67</body> 68 69</html>
投稿2024/09/26 10:19
総合スコア271
フレックスボックスは折り返しがしやすいのですが、最後の行が悩ましい場合がありますよね。1次元レイアウトで2次元レイアウトを再現してるので上の行とグリッドを共有していないのが一長一短という感じです。
すみません。ありがとうございます。
何度も文章を書いては消してを繰り返し、
なんと返信すれば良いのかよく分かりませんでした。。。
それだけお伝えしておきます。。。
ありがとうございます。抽象的ですみませんでした。具体的には「最後の行に回る要素の数によっては、アイテムの幅が伸びすぎてしまいますね。テーブルやカードレイアウトのようにしたい場合はちょっと困りますね」ということでした。
flex-grow: 1;を消せば特に伸びすぎることは無いと思うのですが、
多分返信意図としては列の幅が各行で同じ場合はflexは向いてないですよね、ということかな？と解釈しますが、それはその通りですね
一応計算で各セルを同じサイズにできるとは思うのですが、gridだと1frで同じ計算をしてくれると思うので無理に実装する意味は無いかもですね。
回答のサンプルは質問とはまた別のレイアウトをしたい時のサンプルです。
私はデザイナーでは無いのでコンテンツ領域で自動でサイズを決められるflexの方がちょっと好きです笑
まあ、そうですね、そうすると少し動作が変わるので、そのあたりが少し悩ましいな、と。
そうですか、
まあ、元のレイアウトをflexで再現しようとしている訳ではないので、、、
なんかすみません
自分は特に悩ましくなったことがないので、すみません
ディスカッションしたりご同意を求めている意図ではなかったので、こちらこそすみません。
ご質問のレイアウトをフレックスボックスで解決する方針ではなかったこと、理解いたしました。ありがとうございます。
回答に、こういう例もありますと一応別の例であることを言っているのですが、なんと回答すれば良かったかなどありますか？
関係ないことは極力回答しない方が良いのでしょうか？
一応gridみたいに、セルの最小幅が決まりきっているのでは無いが、横向きに配置して折り返したいみたいなことはあるとは思うので回答したのですが
0
ベストアンサー
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100vw - 16px * 4 - 8px * 2), 1fr));などとするのはどうですか？
ただ、余白の計算が面倒なので、コンテナにサイズ指定した方が少しラクになるかもしれませんね。
投稿2024/09/26 06:13
編集2024/09/26 06:30総合スコア36898
回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。
触れられていませんが、
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
でも指定できますね。ブラウザによって違いがあるという話で触れていないのかもしれないのですが。
文法のルールとしては正しく動きそうです
<fixed-size>
https://developer.mozilla.org/ja/docs/Web/CSS/repeat#auto-fit
https://developer.mozilla.org/ja/docs/Web/CSS/length-percentage
https://developer.mozilla.org/ja/docs/Web/CSS/percentage
ああ、そうですね、おっしゃるとおりでした。難しく考えすぎました。
0
画像をwindow幅で拡大縮小するならこんな感じ
html
1<style> 2body{ 3 background-Image:url("https://picsum.photos/1000/600"); 4 background-repeat:no-repeat; 5 background-size: 100%; 6 width:100%; 7 height:100%; 8} 9</style>
ページ全体を拡大縮小したいなら、pdfか何かで作ることをおすすめします
投稿2024/09/26 06:10
編集2024/09/26 06:11
総合スコア116468
あなたの回答
tips
プレビュー
