html を作成するにあたりサイズ単位の質問です。

ベストアンサー

0

ThanksImg質問者からのお礼コメント

ありがとうございました。 参考になります。

お礼日時:10/16 11:51

その他の回答(3件)

1

rem/vw/px が多いと思います。 vhは基本いないと思います。 一番簡単なのはpxでしょうが、スマホのサイズがまちまちな今、対応力にかけると思います。 あたしは スマホ・タブレ⇒vw PC⇒px です。

1人がナイス!しています

0

一番簡単なのはvwです(ピクセル・パーフェクトを希求する)。 vh(vmin、vmaxなども)を使っている場合、「スマホ、タブレト」でソフトウェア・キーボードを表示すると、ソフトウェア・キーボードが表示された分、viewport領域が縮小されレイアウトが崩れる可能性があるので相対単位でも「vh、vmin、vmax」は非推奨です。 メリット:レイアウトの崩れを全く考慮しなくて良いので設計が簡単。 デメリット:SEO的にはイマイチです。 もし フロントエンドをガッツリやりたいなら、下記を参考に実用的なWebページを実際に作ってみると良いでしょう。 実用的なWebページ:ユーザー・フレンドリー(レスポンシブ・デザイン)・Webページ作成の注意点 http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+00000037&tsn+00000037&bts+2021/03/21%2013%3A55%3A19& 「PC、タブレット、スマホ」などで解像度は機種ごとに違うので、特定の解像度に依存しないユーザー・フレンドリー(PCフレンドリー、タブレット・フレンドリー、スマホ・フレンドリー)なページが推奨されます。 Chromeのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみればユーザー・フレンドリーが如何に重要か解るでしょう。 (各解像度のチェック自体は それほど難しく無いので)現在 Webページを作成しているなら、実際にChromeのデベロッパー・ツールのモバイル・エミュレーターで「PC、タブレット、スマホ」の各解像度をチェックしてみると良いでしょう。 PCにおいては とりあえず「1k~4k」解像度をチェックしてみると良いでしょう。 具体的には「1k」では「約1000px*750px」(アスペクト比「4:3」)を、フルHD画面 以上なら「約2000px*1120px、約4000px*2250px」(アスペクト比「16:9」)の解像度をチェックすると良いでしょう。 「タブレット、スマホ」は既に登録されているプリセットの解像度でチェックしてみると良いでしょう。 「タブレット、スマホ」の解像度のプリセットは[Responsive]コンボボックスで選択可能です(下記の解像度をチェックしてみると良いでしょう)。 タブレット:『「iPad」(768px*1024px)、「iPad Pro」(1024px*1366px)』。 スマホ:『「Galaxy Fold」(280px*635px)、「iPhone 5/SE」(320px*568px)、「Moto G4」(360px*640px)、「Pixel 2」(411px*731px)、「Surface Duo」(540px*720px)』 解像度を変更したら必ずリロードして下さい。 (Webページ作成の基本のキとして)ブレイク・ポイントを念頭に置き、必ずワイヤー・フレームを作成して下さい、手書きでも良いですし単純なレイアウトなら脳内だけでも おkです。 ※初心者の場合はワード系のアプリでカッチリ作ったほうが、そのままサイズを測れば良いので分かりやすいでしょう(それを「%、vw」などに換算する)。

ユーザー・フレンドリー フォント・サイズは1rem以上を使う。 メリット:SEO的に良い。 デメリット:解像度と(remは)因果関係が薄いので、remを使う場合はレイアウトが崩れる可能性を考慮し、想定の範囲内でレイアウトが崩れるように設計する必要があります、なので設計が難しい。

0

pyo********さん >・・・・幅や高さ、それに文字の大きさを設置する際、・・・・・・・・・・ 一言で言えば、場合場合で違うと思います。 勝手に文字が小さくなって見えなくなるのも困ることもあるし、 画像が画面からはみ出すのも困ります。 結局、特質を理解して、臨機応変に書くことになると思います。 ご参考に↓ https://note.com/takamoso/n/nde1275183086 https://hara-chan.com/it/programming/px-em-rem-vw-vh/