回答受付が終了しました

ID非公開

2021/1/17 14:55

44回答

webサイト制作のレスポンシブの単位について。

HTML、CSS | ホームページ作成14閲覧xmlns="http://www.w3.org/2000/svg">250

回答(4件)

0

メディアクランプを使うといいですよ pcの時 スマホの時 タブレットの時 3パターンです スマホの時は画面サイズが変わるので必ず%を使う癖をつけましょう

ID非公開

質問者

2021/1/22 21:00

スマホの画面サイズが変わるというのはどいう意味でしょうか? ブレークポイントをつくって、それ以下の場合の指定を%で行うのでしょうか?

0

>webサイト制作のレスポンシブの単位について。 >PC用サイズの単位指定と、レスポンシブの単位指定の >使い分けがわかりません。 「PC、タブレット、スマホ」において、基本的に 「縦、横」両方ともCSSの単位のvwを使うと良いでしょう。 CSSの単位にvh(vmin、vmaxなども)を使っている場合、ソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる場合があるので注意が必要です。 ただし、フォント・サイズの単位はremが推奨されています。 デフォルト・フォント・サイズが大きく設定されている場合など、テキストを囲んでいる要素サイズをフォント・サイズに追随させたり、テキストを囲んでいる要素の横幅が固定値の場合は、テキストが その要素の横幅を越えた場合、その要素が縦方向に伸びるようにしておく必要があります。 ただし、その場合 レイアウトが崩れる可能性があるので、想定の範囲内でレイアウトが崩れるように設計する必要があります。 (レスポンシブ・デザインも良いですが)PCの場合、現在4k画面が普及価格帯で販売されており、また(まだまだ高価ですが)8k画面も販売されているので、特定の解像度に依存しないページが推奨されます。 レスポンシブ・デザインが推奨されます。 「スマホ、タブレット」の場合、端末の物理的な解像度と、ブラウザ上の解像度は違うようで、ブラウザ上の解像度を「CSSピクセル、dp解像度」と言うらしいです。 参考 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/ ※メディアクエリは使ってないので、一般的なレスポンシブ・デザインとは違いますが、特定の解像度に依存しないプログラムになっています。

0

viewportの設定をした後、 メディアクエリの設定で、下記のように @media screen and (max-width: 480px) { /* 480px以下に適用されるCSSをここに入れる(スマホ用) */ } ↑ そうすれば、単位指定はそんなにこだわらない。 自分が思う通りのレイアウトにすればいいです。 https://www.site-convert.com/archives/1528#outline__2