WEBサイトがブラウザやサイズにより変化してしまう

質問

言葉で言いたいことが伝わるかどうか心配ですが、伝わって解決できれば幸いです。

ブラウザにしろ、エクスプローラでも、メモ帳にしろ起動中は右上に「最小化」「最大化」「閉じる」ボタンがありますが、真ん中が「最大化」の場合はどのソフトもそのウィンドウサイズを縮小・拡大ができますよね？とりあえずこの行動を「ウィンドウサイズの縮小・拡大」とします。

今回、ＷＥＢサイトを作っているのですがブラウザによってかまたは先ほどの「ウィンドウサイズの縮小・拡大」をすることによって作ったＷＥＢサイトの表示の仕方が変わってしまいます。

一つの例として今この質問投稿をご覧頂いているページの上部には

「トップ」「私に聞いて！」「ライフデザイン」「特集一覧」「ランキング」「ＱＡラボ」

と一列で表示されていると思います。これが、ブラウザやウィンドウの縮小・拡大をすることにって

「トップ」「私に聞いて！」「ライフデザイン」「特集一覧」「ランキング」
「ＱＡラボ」

と表示されたり極端にウィンドウの幅を短くしてしまうと

「トップ」
「私に聞いて！」
「ライフデザイン」
「特集一覧」
「ランキング」
「ＱＡラボ」

と表示されてしまいます。もちろん、このＯＫＷａｖｅのサイト自体はそのような感じにはなっていませんが私が作っているものはそのように変わってしまいます。

これを直すにはどうしたらよろしいでしょうか？

回答No.2

neko-ten

幅サイズ指定したブロックでコンテンツをくくればいいんでないのかね

回答No.1

noname#242220

可変グリットレイアウト
http://r360studio.com/dgcr/dgcr-extra22/test3.html
を使っている場合は基本の動作です。
CSSグリットシステム
http://webdesignrecipes.com/css-grid-system-layout/
に変更すれば良いでしょう。

補足

回答ありがとうございます。
確かに可変グリットレイアウトのページと同じ動き方をしています。

CSSグレットシステムですね、ちょっとリンクされたページを拝見してみます。

私のその作っているページでは３カラムのものが変化するのと、もう一つは<ul>と<li>で<li>が５つ横に並んでいるものもそうでした。