プロが教える店舗&オフィスのセキュリティ対策術

とても根本的な部分になるのだと思いますが、理解ができないのでアドバイスをお願いいたします。

色々と調べたのですが、小手先の技術的なノウハウは色々と情報があるのですが、恐らく基本的な根本的な部分が理解できていないので、いつもつまづいてしまい時間と精神的にすり減ってしまいます…。

レスポンシブのWEBページの作成ですが、ページのサイズの可変によってデザインを変更していくという部分は理解していますが、これらは何を基準にするのでしょうか?
といいますか、何らかの基準を設けてでなければ無理ですよね?

例えば、画面幅0px から最大は無限大とかって無理ですよね?
そうなると、やはりある程度の部分で最小値と最大値の設定は必要になりますか?
※でも、360pxくらいから1980pxくらいまで拡大縮小しても、一切のデザインが崩れないようなデザイン方法があればとても理想です、それぞレスポンシブといった感が私には御座います。

特に最大値については、無限大は無理だと思うので設定するのは基本でしょうか?
つまり、MAX1400pxとかを設定したとしたら、そこから上は、無視する。つまりそれ以上はレスポンシブへの対応は行わないといった認識でよいのでしょうか?
最小値も同じように、指定した最小値より下は無視、つまり最低に設定した幅でデザインが確保できていればOKという感じなのでしょうか?

この辺りの理解が乏しく、いまいち決定的レスポンシブというものが何なのか把握できておりません。

レスポンシブの基本的な概念が理解できるアドバイス、またそのようなサイトなどご存知のかいらっしゃいましたら、意味が分かりにくい質問で恐縮ではありますがご教授いただけますと幸いです。

A 回答 (3件)

> レスポンシブのWEBページの作成ですが、ページのサイズの可変によってデザインを変更していくという部分は理解していますが、これらは何を基準にするのでしょうか?


デバイスの画面やアプリのウィンドウ幅を基準にすることが多いと思います
他には
・印刷用は別にする
・ユーザーがダーク・モードを使用しているか?
なども有ります

> そうなると、やはりある程度の部分で最小値と最大値の設定は必要になりますか?
はい、必要になります

> ※でも、360pxくらいから1980pxくらいまで拡大縮小しても、一切のデザインが崩れないようなデザイン方法があればとても理想です
いえ、幅が狭いときと広いときで使いやすいデザインは違います
例えば PC など画面が横長なら横にメニューや操作アイコンが常に左右どちらかに表示されていると都合が良いケースが多いですが、縦長ではそうではありません
また画面が小さければ、普段はそれらの UI は隠してあったほうが使いやすいでしょう

> 特に最大値については、無限大は無理だと思うので設定するのは基本でしょうか?
基本のデザインを決めておき、
・あるサイズ以下もしくは以上
・特定のサイズに収まる範囲
のデザインを指定することになると思います
こうすれば、上記以外は基本デザインになるので
    • good
    • 0
この回答へのお礼

有難うございます。
私のお伺いした質問に対して、具体的に回答を頂き感謝申し上げます。
やはり最大値と最小値などの、基準値は確実に設けないといけないという事が理解できました。
基準値無しに最大最小それぞれ無限は無理ですよね…。

>>いえ、幅が狭いときと広いときで使いやすいデザインは違います
確かにそうでした、私の書いた基準が無理がありました。
例えば、大きい方をあえて無理やり基準にしてみますが、750px以下はスマホ用、750px以上、2000pxまでが同じように表示できればと思います。
が、書いていて思いましたが、基準値が明確にわかっていれば、その幅に対してそれぞれ計算でできるので、なんとなく理解が深まった気がいたします。

まだもやもやしていますが、少し思考に前進があった気がいたします。
有難うございます!!

お礼日時:2021/10/30 20:55

>画面幅0px から最大は無限大


使われる端末の種類(スマホ・タブレット・PC)によってある程度、画面解像度は決まっているので、閾値を超えたり、下回ったらブラウザが表示を変更する。

>一切のデザインが崩れない
初期のHTMLの時代から言われ続けているが、それは作り手側の傲慢であり幻想に過ぎない。
デザインというのは如何に情報を見やすく提供するかが目的であり、ドット単位でレイアウトを決めることではない。
    • good
    • 1
この回答へのお礼

有難うございます。
私の理解が乏しく、あまり理解ができませんでした…。

お礼日時:2021/10/30 20:49

https://skillhub.jp/courses/168/lessons/915

上記で説明されている「Bootstrapのグリッドを理解する」をごらんください。
    • good
    • 1
この回答へのお礼

有難うございます。
Bootstrapに関して理解が深ましました、bootstrapの持っているブレイクポイントなど。

お礼日時:2021/10/30 20:48

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!