>横並びのテーブルセルのような枠組みの作り方で、レスポンシブに崩せるフレームでお勧めのやり方って何でしょうか。 >今は「float:left」で横に並べた幅をパーセント指定した枠を、メディアクエリで幅の割合を変更する方法で崩れるように作っていますが (float:leftより)普通にインライン要素の方が良いです。 >この方法だと、横並びの枠の高さの制御がとても難しいです。 テキストが固定なら、テキストが改行せずに全部入るようにすると良いでしょうが、改行が必要な場合はJavaScriptで対応する必要があるでしょう。 問題点としては、ユーザーが意地悪くPC用ブラウザの横幅を小さくすると、PC用ブラウザでレスポンシブ用メディアクエリが効いてしまうと言う問題点があります(それを回避するにはJavaScriptが必要になるでしょう)。 (レスポンシブ･デザインも重要ですが)PCの場合、現在4k画面が普及価格帯で販売されており、また(まだまだ高価ですが)8k画面も販売されているので、特定の解像度に依存しないページが推奨されます。 レスポンシブ･デザイン：「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を"CSSピクセル"と言うらしいです。 OS・Android端末のCSSピクセル・dp解像度一覧 https://wemo.tech/1496 つまり、結局 レスポンシブ･デザインでも特定の解像度に依存しないページが推奨されます。 参考 Webページにおける基本的な注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+00000231&tsn+00000231&bts+2019/08/12%2011%3A02%3A18& 作成したWebページをChromeのモバイル･エミュレーターで「1K～4k」の解像度でチェックしてみると良いでしょう。 モバイル･エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。 そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。 参考 (通常版)《 チンチロリン Version 2.001.11.0 》 http://xd305417.html.xdomain.jp/demo/dice000/ ※超単純なレスポンシブ･デザイン デモ･ページになっています。 (モバイル･エミュレーター チェック用)《 チンチロリン Version 2.001.11.0 》 http://xd305417.html.xdomain.jp/responsive/dice000/ ※フォント･サイズ自動設定用JavaScript入り。 《 ブロック崩し Version 3.001.1 》 http://xd305417.html.xdomain.jp/demo/block000/ ※メディアクエリは使ってないので、一般的なレスポンシブ･デザインとは違いますが、特定の解像度に依存しないプログラムになっています。