Q&A
リキッドレイアウトの課題なのか、たんに目指すデザインの解決策がリキッドレイアウトだと思っているのかどちらかによりますね。
実現したいこと
ソリッドレイアウトで作られたサイトをリキッドレイアウトに変更したい
発生している問題・分からないこと
スマホ用のsp表示では画面に合わせてフォントサイズや画像サイズが拡大縮小しているが、pc表示の画面ボックス幅を固定しているため、ソリッドレイアウトになっています。
pc表示もリキッドレイアウトにしたいため、幅の固定をやめて％で指定をしたものの
これでリキッドレイアウトになっているのかも、自信がありません。
崩れずにソリッドレイアウトで作ったサイトをリキッドレイアウトに変更したいです。
該当のソースコード
特になし
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
まず、リキッドレイアウトの理解が乏しかったため調べて、
画面の大きさに合わせて画像やフォントサイズが変更されどのデバイスでも
見やすくするレイアウトとわかりました。(ブレイクポイントも必要最低限まで減らせるのもポイント)
そのため、幅の指定を％に変更してみるものの、なんとなくの状態です。
補足
下記のソリッドレイアウトのサンプルページをリキッドレイアウトにしたいため、サンプルページのURLを記しておきます。
このサンプルページをリキッドレイアウトにする場合、①②③等、箇条書きで必要な工程をご教授いただければ幸いです。
何卒宜しくお願い致します。
どういうレイアウトにしたいのか、ご質問の意図を読み取ることができませんでした。『崩れる』というのは具体的にはどの現象のことをおっしゃっていますか？
コンテンツ幅をビューポート依存にしたい、ということであれば達成できていると思うのですが、もしかして、『崩れる』という言葉を具体的な現象には用いておらず、『max-widthを外したのですが、これで読みやすいですか？』というようなことをお聞きになっていますか？
『リキッドレイアウト』というあいまいな言葉に振り回されているようにも思えました。もし、達成すべきレイアウトの定義があいまいになっているのであれば、そちらをしっかり定義してからの方が早いかもしれません。
ご回答ありがとうございます。
サンプルページでは、ブラウザ幅がある程度長くなった場合、各要素の大きさや長さを固定にして左右の余白を増やすレイアウト（ソリッドレイアウト）になっているため
ブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウト（リキッドレイアウト）にするという
課題です。
宜しくお願い致します。
回答1件
0
ページのレイアウトがrem単位で設定されているようですから、
css
1html { 2 font-size: 62.5%; 3/* ↑を↓に */ 4 font-size: .833vw; 5}
などとすれば、おそらくレイアウトが崩れずにビューポートにあわせて全体のレイアウトが拡大縮小されるでしょう。
ただ、フォントもそのまま拡大縮小されますから、それが読みやすいかどうかはまた別の話になるかと思います。
補足依頼欄にも書きましたが、リキッドレイアウトという言葉にあまり振り回されない方がいいかと思いました。
投稿2025/01/16 02:09
総合スコア37169
リキッドレイアウトという言葉にあまり振り回されほうがいい。
承知いたしました。
サンプルページが一応、模範解答例のようなページなのですが
こちらを参考にページを自身でつくっても、
備考：サンプルページでは、ブラウザ幅がある程度長くなった場合、各要素の大きさや長さを固定にして左右の余白を増やすレイアウト（ソリッドレイアウト）にしています
と書いてあり、
課題要項のブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウト（リキッドレイアウト）になっていないことに気がつきました。
リキッドレイアウトを調べて、幅を％で設定(添付画像のように.contents_width {
width: 88%;)してみたものの
画面を変更するとデザインがカンプとずれてしまい、困っているため質問致しました。
ですので、長さの固定を行っているサンプルページの長さの固定をせずに、ブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウトにする方法をご教授いただければ幸いです。
宜しくお願い致します。
回答した方法ではダメでしたでしょうか？ 少なくとも『ブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウト』になっているはずです。
---
また、『デザインがカンプとずれてしまい、困っている』という問題については、デザインカンプを参照できない第三者が解決することは困難であると思われます。（そもそも、ソリッドレイアウトを想定したカンプと、そこからリキッドレイアウトに改変したWEBページを比較すれば、ずれるのは当然では、と思います）
もう少し困っていることを具体的に記述するとなにかよい回答が得られるかもしれません。
回答、誠にありがとうございます。font-size: .833vw;の回答も非常に参考になりました。
具体的に困っていることは、
長さの固定を行っているサンプルページの長さの固定をせずに、ブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウトにする方法が分からないです。
しかし、解答のお話を聞いているとコーディングに詳しい方から見て
部分的に
[ブラウザ幅がある程度長くなった場合、各要素の大きさや長さを固定にして左右の余白を増やすレイアウト(ソリッドレイアウト)]
があっても、全体としてサンプルページは
[ブラウザ幅の変化に伴って各要素が拡大縮小されるレイアウト（リキッドレイアウト）]になっていると言えるということなのでしょうか？
課題の詳細を見たときに一部ソリッドレイアウトで作られているため、リキッドレイアウトになっていないサンプルページなのだと私は認識していました。
出題者に認識の差異を聞ければいいのですが、聞けない状況で困っています。
おっしゃるとおり、ご提示のページのような、コンテンツ幅をソリッドにして余白を背景画像で埋めるようなレイアウトは、一般的なリキッドレイアウトとは言えないと思います。
---
当方の回答は「具体的に困っていること」を解消していると思います。もし、当方の回答でなにか認識の違いがあるようでしたらお知らせください。
あなたの回答
tips
プレビュー
