ページ全体をなめらかに縮めるようにするのがわかりません

Question

ブラウザー幅を縮めるときにページ全体を縮小して、全体がうつるようにしたまま縮める方法がわかりません。
教えてください。

こんな感じで全体的に小さくしようとしてます。
（縦並び横並びは関係なくて、右にスクロールせずに全体的にページが表示されるように）

Comments

[m.ts10806]

ふわっとしすぎていて要点が掴めません。「例えばこういうサイトで実現されている」というのを提示いただけませんか？
まあ「そのサイトを解析すればいい」に落ち着くかもしれませんが、キーワードくらいはアドバイスできるかもしれません。

[m.ts10806]

ひとまず「だいぶエスパーして言えること」は回答としておきます

[m.ts10806]

カメラじゃなく、画面キャプチャのほうが。

Answer 1

レスポンシブレイアウトのデザインということですね。

今は、下記のような感じにしているのが多いのでは。

全体をブロックで囲み幅を100%にする。
ただし、max-width で最大幅を制限する。
このブロックは margin: 0 auto; で中央配置しておく。

中の各コンテンツは、画面幅に応じてレイアウトやサイズを切り替える。
コンテンツの内容によって、PCサイズでは２カラムまたは３カラム、にしておいて、特定の画面幅以下では順次カラム数を減らす。スマホは基本1カラム。
タイトルなどのフォントサイズも画面幅に応じて切り替える。

この辺の変更は、CSSのメディアクエリで切り替えます。レイアウトは、CSS Flexbox か CSS Grid で決めます。

画像の場合だと、下のコンテンツはPCサイズ２カラム、スマホサイズは 1カラムになってますね。
また、フォントサイズも変更していますね。

この回答で出てきたワードをキーにWEB検索てしみるといろいろ解説ページが見つかると思います。

Answer 2

ページ全体をなめらかに縮めるようにするのがわかりません

もし、滑らかにブラウザ機能で縮められないなら、それはPC・SP等のスペック不足が主な原因として考えられます。いくらWEBサイトの製作者が、軽いサイトを作ろうとしても最低限度のスペックラインは存在します。

あと、左右スクロールバーが出ている場合は、要素の幅やmarginやpadding、box-sizingの値を見直してみてください。
どこかで計算が狂っているはずです。
または、元の計算を上回る内容量になっています。

詳しい指摘はコードがないとできません。

Answer 3

「なめらかに」が引っ掛かるんですが「レスポンシブ Webデザイン」とかをキーワードにすると参考になるかもしれません。

Comments

[m.ts10806]

あとは「グリッドデザイン」